自定义向下凹入的布局

效果如下有一个向内凹入的效果
截图.png

实现思路:用贝塞尔曲线画出弧形,再填充空白部分,代码如下

package com.zjh.baseutillib.widget;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.PointF;
import android.util.AttributeSet;
import android.view.View;

import io.reactivex.annotations.Nullable;

/**
 * 向内凹的布局
 * Created by ZJH
 * on 2019-05-21
 */
public class BalanceView extends View {

    private Paint mPaint;//画笔
    private Path mPath;//路径

    private PointF start, end, control;
    private float width, height;

    public BalanceView(Context context) {
        super(context);
        initData();
    }

    public BalanceView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initData();
    }

    public BalanceView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initData();
    }

    private void initData() {
        mPath = new Path();
        mPaint = new Paint();
        //抗锯齿
        mPaint.setAntiAlias(true);
        //画笔颜色
        mPaint.setColor(Color.WHITE);
        //画笔模式填充
        mPaint.setStyle(Paint.Style.FILL);

        start = new PointF(0, 0);
        end = new PointF(0, 0);
        control = new PointF(0, 0);

    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        int centerX = w / 2;
        width = w;
        height = h;

        // 初始化数据点和控制点的位置
        start.x = 0;
        start.y = 0;
        end.x = w;
        end.y = 0;
        control.x = centerX;
        control.y = 80;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        // 绘制贝塞尔曲线
        mPath.moveTo(start.x, start.y);
        mPath.quadTo(control.x, control.y, end.x, end.y);
        //填充剩余部分
        mPath.lineTo(width, height);
        mPath.lineTo(0, height);

        canvas.drawPath(mPath, mPaint);
    }
}



你可能感兴趣的:(自定义向下凹入的布局)