Android原生实现控件圆角方案（API28及以上）

Android控件的圆角效果的实现方式有很多种，这里介绍一下另一种Android原生的圆角实现方案（API28及以上）。

我们利用ShapeAppearanceModel、MaterialShapeDrawable来实现一个圆角/切角的Button。

实现效果如下图

我们在为控件添加阴影的基础上实现为控件添加shape的功能.

属性

增加自定义属性:

        <attr name="carbon_cornerRadiusTopStart" />
        <attr name="carbon_cornerRadiusTopEnd" />
        <attr name="carbon_cornerRadiusBottomStart" />
        <attr name="carbon_cornerRadiusBottomEnd" />
        <attr name="carbon_cornerRadius" />

        <attr name="carbon_cornerCutTopStart" />
        <attr name="carbon_cornerCutTopEnd" />
        <attr name="carbon_cornerCutBottomStart" />
        <attr name="carbon_cornerCutBottomEnd" />
        <attr name="carbon_cornerCut" />

创建ShapeModelView接口

创建通用的shape接口

public interface ShapeModelView {
    void setShapeModel(ShapeAppearanceModel shapeModel);
    ShapeAppearanceModel getShapeModel();

    void setCornerCut(float cornerCut);

    void setCornerRadius(float cornerRadius);
}

为ShapeButton 实现ShapeModeView接口:

public class ShapeButton extends AppCompatButton implements ShadowView, ShapeModelView {
//.....

    private static int[] elevationIds = new int[]{
            R.styleable.shape_button_carbon_elevation,
            R.styleable.shape_button_carbon_elevationShadowColor,
            R.styleable.shape_button_carbon_elevationAmbientShadowColor,
            R.styleable.shape_button_carbon_elevationSpotShadowColor
    };
    
    private static int[] cornerCutRadiusIds = new int[]{
            R.styleable.shape_button_carbon_cornerRadiusTopStart,
            R.styleable.shape_button_carbon_cornerRadiusTopEnd,
            R.styleable.shape_button_carbon_cornerRadiusBottomStart,
            R.styleable.shape_button_carbon_cornerRadiusBottomEnd,
            R.styleable.shape_button_carbon_cornerRadius,
            R.styleable.shape_button_carbon_cornerCutTopStart,
            R.styleable.shape_button_carbon_cornerCutTopEnd,
            R.styleable.shape_button_carbon_cornerCutBottomStart,
            R.styleable.shape_button_carbon_cornerCutBottomEnd,
            R.styleable.shape_button_carbon_cornerCut
    };

    private void initButton(AttributeSet attrs, @AttrRes int defStyleAttr, @StyleRes int defStyleRes) {
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.shape_button, defStyleAttr, defStyleRes);
        // 初始化阴影相关属性
        Carbon.initElevation(this, a, elevationIds);
        // 初始化圆角相关属性
        Carbon.initCornerCutRadius(this,a,cornerCutRadiusIds);
        a.recycle();
    }

 // -------------------------------
    // shadow
    // -------------------------------
    .....



// -------------------------------
    // shape
    // -------------------------------
    private ShapeAppearanceModel shapeModel = new ShapeAppearanceModel();
    private MaterialShapeDrawable shadowDrawable = new MaterialShapeDrawable(shapeModel);
    @Override
    public void setShapeModel(ShapeAppearanceModel shapeModel) {
     this.shapeModel = shapeModel;
        shadowDrawable = new MaterialShapeDrawable(shapeModel);
        if (getWidth() > 0 && getHeight() > 0)
            updateCorners();
        if (!Carbon.IS_LOLLIPOP_OR_HIGHER)
            postInvalidate();
    }

// View的轮廓形状
    private RectF boundsRect = new RectF();
    // View的轮廓形状形成的Path路径
    private Path cornersMask = new Path();
	
    /**
     * 更新圆角
     */
    private void updateCorners() {
        if (Carbon.IS_LOLLIPOP_OR_HIGHER) {
            // 如果不是矩形,裁剪View的轮廓
            if (!Carbon.isShapeRect(shapeModel, boundsRect)){
                setClipToOutline(true);
            }
            //该方法返回一个Outline对象，它描述了该视图的形状。
            setOutlineProvider(new ViewOutlineProvider() {
                @Override
                public void getOutline(View view, Outline outline) {
                    if (Carbon.isShapeRect(shapeModel, boundsRect)) {
                        outline.setRect(0, 0, getWidth(), getHeight());
                    } else {
                        shadowDrawable.setBounds(0, 0, getWidth(), getHeight());
                        shadowDrawable.setShadowCompatibilityMode(MaterialShapeDrawable.SHADOW_COMPAT_MODE_NEVER);
                        shadowDrawable.getOutline(outline);
                    }
                }
            });
        }
        // 拿到圆角矩形的形状
        boundsRect.set(shadowDrawable.getBounds());
        // 拿到圆角矩形的Path
        shadowDrawable.getPathForSize(getWidth(), getHeight(), cornersMask);
    }

    @Override
    public ShapeAppearanceModel getShapeModel() {
        return this.shapeModel;
    }

    @Override
    public void setCornerCut(float cornerCut) {
        shapeModel = ShapeAppearanceModel.builder().setAllCorners(new CutCornerTreatment(cornerCut)).build();
        setShapeModel(shapeModel);
    }

    @Override
    public void setCornerRadius(float cornerRadius) {
        shapeModel = ShapeAppearanceModel.builder().setAllCorners(new RoundedCornerTreatment(cornerRadius)).build();
        setShapeModel(shapeModel);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        if (!changed)
            return;

        if (getWidth() == 0 || getHeight() == 0)
            return;

        updateCorners();

    }

}

绘制轮廓

@Override
    public void draw(Canvas canvas) {
        boolean c = !Carbon.isShapeRect(shapeModel, boundsRect);

        if (Carbon.IS_PIE_OR_HIGHER) {
            if (spotShadowColor != null)
                super.setOutlineSpotShadowColor(spotShadowColor.getColorForState(getDrawableState(), spotShadowColor.getDefaultColor()));
            if (ambientShadowColor != null)
                super.setOutlineAmbientShadowColor(ambientShadowColor.getColorForState(getDrawableState(), ambientShadowColor.getDefaultColor()));
        }

		// 判断如果不是圆角矩形,需要使用轮廓Path,重新绘制一下Path,不然显示会很奇怪
        if (getWidth() > 0 && getHeight() > 0 && ((c && !Carbon.IS_LOLLIPOP_OR_HIGHER) || !shapeModel.isRoundRect(boundsRect))) {
            int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
            super.draw(canvas);
            paint.setXfermode(Carbon.CLEAR_MODE);
            if (c) {
                cornersMask.setFillType(Path.FillType.INVERSE_WINDING);
                canvas.drawPath(cornersMask, paint);
            }
            canvas.restoreToCount(saveCount);
            paint.setXfermode(null);
        }else{
            super.draw(canvas);
        }
    }

在Carbon中添加方法:

    public static void initCornerCutRadius(ShapeModelView shapeModelView, TypedArray a, int[] ids) {
        int carbon_cornerRadiusTopStart = ids[0];
        int carbon_cornerRadiusTopEnd = ids[1];
        int carbon_cornerRadiusBottomStart = ids[2];
        int carbon_cornerRadiusBottomEnd = ids[3];
        int carbon_cornerRadius = ids[4];
        int carbon_cornerCutTopStart = ids[5];
        int carbon_cornerCutTopEnd = ids[6];
        int carbon_cornerCutBottomStart = ids[7];
        int carbon_cornerCutBottomEnd = ids[8];
        int carbon_cornerCut = ids[9];

        float cornerRadius = Math.max(a.getDimension(carbon_cornerRadius, 0), 0.1f);
        float cornerRadiusTopStart = a.getDimension(carbon_cornerRadiusTopStart, cornerRadius);
        float cornerRadiusTopEnd = a.getDimension(carbon_cornerRadiusTopEnd, cornerRadius);
        float cornerRadiusBottomStart = a.getDimension(carbon_cornerRadiusBottomStart, cornerRadius);
        float cornerRadiusBottomEnd = a.getDimension(carbon_cornerRadiusBottomEnd, cornerRadius);
        float cornerCut = a.getDimension(carbon_cornerCut, 0);
        float cornerCutTopStart = a.getDimension(carbon_cornerCutTopStart, cornerCut);
        float cornerCutTopEnd = a.getDimension(carbon_cornerCutTopEnd, cornerCut);
        float cornerCutBottomStart = a.getDimension(carbon_cornerCutBottomStart, cornerCut);
        float cornerCutBottomEnd = a.getDimension(carbon_cornerCutBottomEnd, cornerCut);
        ShapeAppearanceModel model = ShapeAppearanceModel.builder()
                .setTopLeftCorner(cornerCutTopStart >= cornerRadiusTopStart ? new CutCornerTreatment(cornerCutTopStart) : new RoundedCornerTreatment(cornerRadiusTopStart))
                .setTopRightCorner(cornerCutTopEnd >= cornerRadiusTopEnd ? new CutCornerTreatment(cornerCutTopEnd) : new RoundedCornerTreatment(cornerRadiusTopEnd))
                .setBottomLeftCorner(cornerCutBottomStart >= cornerRadiusBottomStart ? new CutCornerTreatment(cornerCutBottomStart) : new RoundedCornerTreatment(cornerRadiusBottomStart))
                .setBottomRightCorner(cornerCutBottomEnd >= cornerRadiusBottomEnd ? new CutCornerTreatment(cornerCutBottomEnd) : new RoundedCornerTreatment(cornerRadiusBottomEnd))
                .build();
        shapeModelView.setShapeModel(model);
    }

    public static boolean isShapeRect(ShapeAppearanceModel model, RectF bounds) {
        return model.getTopLeftCornerSize().getCornerSize(bounds) <= 0.2f &&
                model.getTopRightCornerSize().getCornerSize(bounds) <= 0.2f &&
                model.getBottomLeftCornerSize().getCornerSize(bounds) <= 0.2f &&
                model.getBottomRightCornerSize().getCornerSize(bounds) <= 0.2f;
    }

使用

        <com.chinatsp.demo1.shadow.ShapeButton
            android:id="@+id/show_dialog_btn"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_margin="@dimen/carbon_padding"
            android:background="#ffffff"
            android:stateListAnimator="@null"
            android:text="TOM"
            app:carbon_cornerRadius="10dp"
            android:elevation="2dp"
            app:carbon_elevationShadowColor="@color/carbon_red_700" />

        <com.chinatsp.demo1.shadow.ShapeButton
            android:id="@+id/show_date_dialog_btn"
            android:layout_width="56dp"
            android:layout_height="56dp"
            android:layout_margin="@dimen/carbon_padding"
            android:background="#ffffff"
            android:stateListAnimator="@null"
            android:text="TOM"
            app:carbon_cornerCut="10dp"
            android:elevation="10dp"
            app:carbon_elevationShadowColor="@color/carbon_grey_700" />

完整代码:

public class ShapeButton extends AppCompatButton implements ShadowView, ShapeModelView {
    public ShapeButton(@NonNull Context context) {
        super(context);
        initButton(null, android.R.attr.buttonStyle, R.style.carbon_Button);
    }

    public ShapeButton(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        initButton(attrs, android.R.attr.buttonStyle, R.style.carbon_Button);
    }

    public ShapeButton(@NonNull Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initButton(attrs, defStyleAttr, R.style.carbon_Button);
    }

    public ShapeButton(Context context, String text, OnClickListener listener) {
        super(context);
        initButton(null, android.R.attr.buttonStyle, R.style.carbon_Button);
        setText(text);
        setOnClickListener(listener);
    }

    private static int[] elevationIds = new int[]{
            R.styleable.shape_button_carbon_elevation,
            R.styleable.shape_button_carbon_elevationShadowColor,
            R.styleable.shape_button_carbon_elevationAmbientShadowColor,
            R.styleable.shape_button_carbon_elevationSpotShadowColor
    };

    private static int[] cornerCutRadiusIds = new int[]{
            R.styleable.shape_button_carbon_cornerRadiusTopStart,
            R.styleable.shape_button_carbon_cornerRadiusTopEnd,
            R.styleable.shape_button_carbon_cornerRadiusBottomStart,
            R.styleable.shape_button_carbon_cornerRadiusBottomEnd,
            R.styleable.shape_button_carbon_cornerRadius,
            R.styleable.shape_button_carbon_cornerCutTopStart,
            R.styleable.shape_button_carbon_cornerCutTopEnd,
            R.styleable.shape_button_carbon_cornerCutBottomStart,
            R.styleable.shape_button_carbon_cornerCutBottomEnd,
            R.styleable.shape_button_carbon_cornerCut
    };

    protected TextPaint paint = new TextPaint(Paint.ANTI_ALIAS_FLAG | Paint.FILTER_BITMAP_FLAG);

    private void initButton(AttributeSet attrs, @AttrRes int defStyleAttr, @StyleRes int defStyleRes) {
        TypedArray a = getContext().obtainStyledAttributes(attrs, R.styleable.shape_button, defStyleAttr, defStyleRes);
        Carbon.initElevation(this, a, elevationIds);
        Carbon.initCornerCutRadius(this,a,cornerCutRadiusIds);
        a.recycle();
    }



    // -------------------------------
    // shadow
    // -------------------------------
    private float elevation = 0;
    private float translationZ = 0;
    private ColorStateList ambientShadowColor, spotShadowColor;
    @Override
    public float getElevation() {
        return elevation;
    }

    @Override
    public void setElevation(float elevation) {
        if (Carbon.IS_PIE_OR_HIGHER) {
            super.setElevation(elevation);
            super.setTranslationZ(translationZ);
        } else if (Carbon.IS_LOLLIPOP_OR_HIGHER) {
            if (ambientShadowColor == null || spotShadowColor == null) {
                super.setElevation(elevation);
                super.setTranslationZ(translationZ);
            } else {
                super.setElevation(0);
                super.setTranslationZ(0);
            }
        } else if (elevation != this.elevation && getParent() != null) {
            ((View) getParent()).postInvalidate();
        }
        this.elevation = elevation;
    }

    @Override
    public float getTranslationZ() {
        return translationZ;
    }

    public void setTranslationZ(float translationZ) {
        if (translationZ == this.translationZ)
            return;
        if (Carbon.IS_PIE_OR_HIGHER) {
            super.setTranslationZ(translationZ);
        } else if (Carbon.IS_LOLLIPOP_OR_HIGHER) {
            if (ambientShadowColor == null || spotShadowColor == null) {
                super.setTranslationZ(translationZ);
            } else {
                super.setTranslationZ(0);
            }
        } else if (translationZ != this.translationZ && getParent() != null) {
            ((View) getParent()).postInvalidate();
        }
        this.translationZ = translationZ;
    }

    @Override
    public ColorStateList getElevationShadowColor() {
        return ambientShadowColor;
    }

    @Override
    public void setElevationShadowColor(ColorStateList shadowColor) {
        ambientShadowColor = spotShadowColor = shadowColor;
        setElevation(elevation);
        setTranslationZ(translationZ);
    }

    @Override
    public void setElevationShadowColor(int color) {
        ambientShadowColor = spotShadowColor = ColorStateList.valueOf(color);
        setElevation(elevation);
        setTranslationZ(translationZ);
    }

    @Override
    public void setOutlineAmbientShadowColor(ColorStateList color) {
        ambientShadowColor = color;
        if (Carbon.IS_PIE_OR_HIGHER) {
            super.setOutlineAmbientShadowColor(color.getColorForState(getDrawableState(), color.getDefaultColor()));
        } else {
            setElevation(elevation);
            setTranslationZ(translationZ);
        }
    }

    @Override
    public void setOutlineAmbientShadowColor(int color) {
        setOutlineAmbientShadowColor(ColorStateList.valueOf(color));
    }

    @Override
    public int getOutlineAmbientShadowColor() {
        return ambientShadowColor.getDefaultColor();
    }

    @Override
    public void setOutlineSpotShadowColor(int color) {
        setOutlineSpotShadowColor(ColorStateList.valueOf(color));
    }

    @Override
    public void setOutlineSpotShadowColor(ColorStateList color) {
        spotShadowColor = color;
        if (Carbon.IS_PIE_OR_HIGHER) {
            super.setOutlineSpotShadowColor(color.getColorForState(getDrawableState(), color.getDefaultColor()));
        } else {
            setElevation(elevation);
            setTranslationZ(translationZ);
        }

    }

    @Override
    public int getOutlineSpotShadowColor() {
        return ambientShadowColor.getDefaultColor();
    }

    @Override
    public void draw(Canvas canvas) {
        boolean c = !Carbon.isShapeRect(shapeModel, boundsRect);

        if (Carbon.IS_PIE_OR_HIGHER) {
            if (spotShadowColor != null)
                super.setOutlineSpotShadowColor(spotShadowColor.getColorForState(getDrawableState(), spotShadowColor.getDefaultColor()));
            if (ambientShadowColor != null)
                super.setOutlineAmbientShadowColor(ambientShadowColor.getColorForState(getDrawableState(), ambientShadowColor.getDefaultColor()));
        }

        // 判断如果不是圆角矩形,需要使用轮廓Path,绘制一下Path,不然显示会很奇怪
        if (getWidth() > 0 && getHeight() > 0 && ((c && !Carbon.IS_LOLLIPOP_OR_HIGHER) || !shapeModel.isRoundRect(boundsRect))) {
            int saveCount = canvas.saveLayer(0, 0, getWidth(), getHeight(), null, Canvas.ALL_SAVE_FLAG);
            super.draw(canvas);
            paint.setXfermode(Carbon.CLEAR_MODE);
            if (c) {
                cornersMask.setFillType(Path.FillType.INVERSE_WINDING);
                canvas.drawPath(cornersMask, paint);
            }
            canvas.restoreToCount(saveCount);
            paint.setXfermode(null);
        }else{
            super.draw(canvas);
        }
    }

    // -------------------------------
    // shape
    // -------------------------------
    private ShapeAppearanceModel shapeModel = new ShapeAppearanceModel();
    private MaterialShapeDrawable shadowDrawable = new MaterialShapeDrawable(shapeModel);
    @Override
    public void setShapeModel(ShapeAppearanceModel shapeModel) {
        this.shapeModel = shapeModel;
        shadowDrawable = new MaterialShapeDrawable(shapeModel);
        if (getWidth() > 0 && getHeight() > 0)
            updateCorners();
        if (!Carbon.IS_LOLLIPOP_OR_HIGHER)
            postInvalidate();
    }
    // View的轮廓形状
    private RectF boundsRect = new RectF();
    // View的轮廓形状形成的Path路径
    private Path cornersMask = new Path();

    /**
     * 更新圆角
     */
    private void updateCorners() {
        if (Carbon.IS_LOLLIPOP_OR_HIGHER) {
            // 如果不是矩形,裁剪View的轮廓
            if (!Carbon.isShapeRect(shapeModel, boundsRect)){
                setClipToOutline(true);
            }
            //该方法返回一个Outline对象，它描述了该视图的形状。
            setOutlineProvider(new ViewOutlineProvider() {
                @Override
                public void getOutline(View view, Outline outline) {
                    if (Carbon.isShapeRect(shapeModel, boundsRect)) {
                        outline.setRect(0, 0, getWidth(), getHeight());
                    } else {
                        shadowDrawable.setBounds(0, 0, getWidth(), getHeight());
                        shadowDrawable.setShadowCompatibilityMode(MaterialShapeDrawable.SHADOW_COMPAT_MODE_NEVER);
                        shadowDrawable.getOutline(outline);
                    }
                }
            });
        }
        // 拿到圆角矩形的形状
        boundsRect.set(shadowDrawable.getBounds());
        // 拿到圆角矩形的Path
        shadowDrawable.getPathForSize(getWidth(), getHeight(), cornersMask);
    }

    @Override
    public ShapeAppearanceModel getShapeModel() {
        return this.shapeModel;
    }

    @Override
    public void setCornerCut(float cornerCut) {
        shapeModel = ShapeAppearanceModel.builder().setAllCorners(new CutCornerTreatment(cornerCut)).build();
        setShapeModel(shapeModel);
    }

    @Override
    public void setCornerRadius(float cornerRadius) {
        shapeModel = ShapeAppearanceModel.builder().setAllCorners(new RoundedCornerTreatment(cornerRadius)).build();
        setShapeModel(shapeModel);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);

        if (!changed)
            return;

        if (getWidth() == 0 || getHeight() == 0)
            return;

        updateCorners();

    }
}