In the development of a project, sometimes we need an interface with an arc as a background decoration.

The easy way to design this view is to do a custom draw, rewrite the onDraw function.

public class ArcView extends View { private int mWidth; private int mHeight; private int mArcHeight; Private int mBgColor; Private int lgColor; // Change the final color private Paint mPaint; // private LinearGradient LinearGradient; Private the Rect the Rect = new the Rect (0,0,0,0); Private Path Path =new Path(); Public ArcView(Context Context) {this(Context, null); } public ArcView(Context context, @Nullable AttributeSet attrs) { this(context, attrs, 0); } public ArcView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.ArcView); mArcHeight = typedArray.getDimensionPixelSize(R.styleable.ArcView_arcHeight, 0); mBgColor=typedArray.getColor(R.styleable.ArcView_bgColor, Color.parseColor("#303F9F")); lgColor = typedArray.getColor(R.styleable.ArcView_lgColor, mBgColor); mPaint = new Paint(); mPaint.setAntiAlias(true); typedArray.recycle(); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); // Log.d("----","onSizeChanged"); LinearGradient = new linearGradient (0,0,getMeasuredWidth(),0, mBgColor,lgColor, Shader.TileMode.CLAMP); mPaint.setShader(linearGradient); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); // set it to FILL mPaint. SetStyle (paint.style.fill); mPaint.setColor(mBgColor); Rect. set(0, 0, mWidth, mheight-marcheight); canvas.drawRect(rect, mPaint); // Draw path path.moveto (0, mheight-marcheight); path.quadTo(mWidth >> 1, mHeight, mWidth, mHeight - mArcHeight); canvas.drawPath(path, mPaint); } @Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSize = MeasureSpec.getSize(widthMeasureSpec); int widthMode = MeasureSpec.getMode(widthMeasureSpec); int heightSize = MeasureSpec.getSize(heightMeasureSpec); int heightMode = MeasureSpec.getMode(heightMeasureSpec); if (widthMode == MeasureSpec.EXACTLY) { mWidth = widthSize; } if (heightMode == MeasureSpec.EXACTLY) { mHeight = heightSize; } setMeasuredDimension(mWidth, mHeight); }}Copy the code

Declared properties

<! -- Curved interface properties --><declare-styleable name="ArcView">
        <attr name="arcHeight" format="dimension"/>
        <attr name="lgColor"   format="color"/>
        <attr name="bgColor" format="color"/>
    </declare-styleable>

Copy the code

The simple code is to use path to draw the path and add a gradient effect.