實作自定義任意圓角的WebView、RecyclerView等任意控件

• 以自定義RoundWebView為例

以自定義RoundWebView為例

public class RoundWebView extends WebView {

    private Path mPath = new Path();
    private RectF mRectF = new RectF();

    private float[] mRadiusArray = {0f, 0f, 0f, 0f, 0f, 0f, 0f, 0f};

    public RoundWebView(Context context) {
        this(context, null);
    }

    public RoundWebView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public RoundWebView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(context, attrs);
    }

    private void init(@NonNull Context context, AttributeSet attrs) {
        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.RoundWebView); // 讀取xml styleable，attrs是xml屬性的集合
        float radius = a.getDimension(R.styleable.RoundWebView_rwv_radius, 0);
        float topLeftRadius = a.getDimension(R.styleable.RoundWebView_rwv_top_left_radius, 0);
        float topRightRadius = a.getDimension(R.styleable.RoundWebView_rwv_top_right_radius, 0);
        float bottomLeftRadius = a.getDimension(R.styleable.RoundWebView_rwv_bottom_left_radius, 0);
        float bottomRightRadius = a.getDimension(R.styleable.RoundWebView_rwv_bottom_right_radius, 0);
        a.recycle();

        if (radius > 0) {
            topLeftRadius = topRightRadius = bottomLeftRadius = bottomRightRadius = radius;
        }
        setRoundRadius(topLeftRadius, topRightRadius, bottomRightRadius, bottomLeftRadius);
    }

    /**
     * 設定四個角的圓角半徑
     *
     * @param radius 所有圓角的半徑
     */
    public void setRoundRadius(float radius) {
        float result = radius > 0 ? radius : 0;
        setRoundRadius(result, result, result, result);
    }

    /**
     * 設定四個角的圓角半徑
     *
     * @param leftTopRadius     左上角半徑
     * @param rightTopRadius    右上角半徑
     * @param rightBottomRadius 右下角半徑
     * @param leftBottomRadius  左下角半徑
     */
    public void setRoundRadius(float leftTopRadius, float rightTopRadius,
                               float rightBottomRadius, float leftBottomRadius) {
        mRadiusArray[0] = leftTopRadius > 0 ? leftTopRadius : 0;
        mRadiusArray[1] = leftTopRadius > 0 ? leftTopRadius : 0;
        mRadiusArray[2] = rightTopRadius > 0 ? rightTopRadius : 0;
        mRadiusArray[3] = rightTopRadius > 0 ? rightTopRadius : 0;
        mRadiusArray[4] = rightBottomRadius > 0 ? rightBottomRadius : 0;
        mRadiusArray[5] = rightBottomRadius > 0 ? rightBottomRadius : 0;
        mRadiusArray[6] = leftBottomRadius > 0 ? leftBottomRadius : 0;
        mRadiusArray[7] = leftBottomRadius > 0 ? leftBottomRadius : 0;
        invalidate();
    }

    @Override
    public void onDraw(@NonNull Canvas canvas) {
        int scrollX = this.getScrollX();
        int scrollY = this.getScrollY();
        mPath.reset();
        mRectF.set(0, scrollY, scrollX + getWidth(), scrollY + getHeight());
        // 使用半角的方式，性能比較好
        mPath.addRoundRect(mRectF, mRadiusArray, Path.Direction.CW);
        canvas.clipPath(mPath);
        super.onDraw(canvas);
    }
}
           

其他類型的控件隻需要改變繼承的父類即可，如果大家在使用過程中發現任何問題歡迎回報，共同進步。