自定义View-圆角,边框,水波纹Button

效果图

场景

UI设计图上有很多类似圆角按钮,但是他们都各有一点不同。像五六种圆角大小和几种颜色相互搭配,
这时候如果用drawable创建shape会显得麻烦。下面用自定义View的封装这些按钮。

---

新建declare-styleable

    <declare-styleable name="MyButton">
        <attr name="borderWidth" format="dimension" />
        <attr name="borderRadius" format="dimension" />
        <attr name="borderColor" format="color" />
        <attr name="defaultBackgroundColor" format="color" />
        <attr name="pressColor" format="color" />
    </declare-styleable>

新建MyButton类

/**
 * Author: jVen
 * Time: 2020/8/25 11:53
 * Description:自定义圆角,边框,水波纹Button
 */
public class MyButton extends AppCompatButton {

    private GradientDrawable defaultDrawable;
    private int themeColor;
    //边框宽度
    private float borderWidth;
    //边框圆角
    private float borderRadius;
    //边框颜色
    private int borderColor;
    //背景色
    private int defaultBackgroundColor;
    //按压颜色
    private int pressColor;

    public MyButton(@NonNull Context context) {
        super(context);
    }

    public MyButton(@NonNull Context context, @Nullable AttributeSet attrs) {
        super(context, attrs, R.attr.buttonStyle);
        initData(context);


        TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyButton);
        borderWidth = typedArray.getDimension(R.styleable.MyButton_borderWidth, 4);
        borderRadius = typedArray.getDimension(R.styleable.MyButton_borderRadius, 8);
        borderColor = typedArray.getColor(R.styleable.MyButton_borderColor, themeColor);
        defaultBackgroundColor = typedArray.getColor(R.styleable.MyButton_defaultBackgroundColor, ContextCompat.getColor(context, R.color.colorAccent));
        pressColor = typedArray.getColor(R.styleable.MyButton_pressColor, Color.parseColor("#cccccc"));
        typedArray.recycle();

        //设置边框
        defaultDrawable.setStroke((int) borderWidth, borderColor);
        //设置背景
        defaultDrawable.setColor(defaultBackgroundColor);
        //设置圆角
        defaultDrawable.setCornerRadius(borderRadius);

        ColorStateList colorStateList = getColorStateList();

        RippleDrawable rippleDrawable = new RippleDrawable(colorStateList, defaultDrawable, null);
        setBackgroundDrawable(rippleDrawable);
    }

    private ColorStateList getColorStateList() {
        //点击颜色
        int[][] stateList = new int[][]{
                new int[]{android.R.attr.state_pressed},
        };

        int[] stateColorList = new int[]{
                pressColor
        };
        return new ColorStateList(stateList, stateColorList);
    }

    private void initData(Context context) {
        //去除阴影
        setStateListAnimator(null);

        defaultDrawable = new GradientDrawable();
        //获取主题颜色
        themeColor = ContextCompat.getColor(context, R.color.colorPrimary);
    }

    /**
     * 设置圆角
     *
     * @param leftTop
     * @param rightTop
     * @param rightBottom
     * @param leftBottom
     */
    public void setBorderRadius(float leftTop, float rightTop, float rightBottom, float leftBottom) {
        float[] ints = {
                leftTop, leftTop,
                rightTop, rightTop,
                rightBottom, rightBottom,
                leftBottom, leftBottom
        };
        defaultDrawable.setCornerRadii(ints);
    }

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


}

使用

    <com.weiou.mydemo.button.MyButton
        android:id="@+id/btn"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textColor="@color/colorPrimary"
        android:text="123456"
        app:defaultBackgroundColor="#fff" />

属性说明

borderWidth 边框

borderRadius 圆角

borderColor 边框颜色

defaultBackgroundColor 默认背景颜色

pressColor 按压水波纹颜色