自定义状态切换按钮

最近在做一个项目，一个界面的按钮UI给画成了这样（默认状态是蓝色的然后触摸后变成灰色的）

UI效果

然后本着给低版本系统APP适配的职业素养（其实是不想画这种按钮），想让UI兄弟给将图标改成整个按钮效果的图片，可是。。。人说人也很忙不给俺做咋办。。。。没办法只好自己写了一个满足这种需求的按钮了。。。

职业素养

整体流程如下

实现流程

下面说一下主要功能的实现代码

○动态的修改控件大小，这里没什么难处，主要是动态修改控件大小的代码要放在onLayout方法里，之前试了onMeasure方法里设置然并卵。

@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
    super.onLayout(changed, l, t, r, b);
    int width = getWidth();
    LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) imageView.getLayoutParams();
    layoutParams.width= (int) (width*0.5);
    layoutParams.height=(int) (width*0.5);
    layoutParams.topMargin=(int) (width*0.05);
    textView.setTextSize((float) (width*0.09));
}

○重写onTouchEvent，实现点击效果，这里是通过判断按下、抬起来动态的设置显示效果

 @Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:;
            if(pressImage!=0){
                imageView.setImageResource(pressImage);
            }
            break;
        case MotionEvent.ACTION_UP:
            textView.setTextColor(textcolorDefault);
            if(defaultImage!=0){
                imageView.setImageResource(defaultImage);
            }
            break;
    }
    return true;
}

○添加点击事件，这里选择在抬起的时候执行点击事件

//点击事件接口
public interface MyStateButtonClickListener {
    void onClick(View view);
}
 @Override
public boolean onTouchEvent(MotionEvent event) {
    switch (event.getAction()){
        case MotionEvent.ACTION_DOWN:;
            textView.setTextColor(textcolorPress);
            if(pressImage!=0){
                imageView.setImageResource(pressImage);
            }
            break;
        case MotionEvent.ACTION_UP:
            textView.setTextColor(textcolorDefault);
            if(defaultImage!=0){
                imageView.setImageResource(defaultImage);
            }
            //抬起时执行点击事件
            if(myStateButtonClickListener!=null){
                myStateButtonClickListener.onClick(view);
            }
            break;
    }
    return true;
}

○通过代码添加边框，并添加自定义属性（默认图片、点击图片、默认文字颜色、点击文字颜色、边框宽度、边框圆角大小、默认边框颜色、点击边框颜色）

○attrs文件

<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="MyStateButton">
    <attr name="defaultImage" format="reference"/>
    <attr name="pressImage" format="reference"/>
    <attr name="text" format="string"/>
    <attr name="defaultTextColor" format="color"/>
    <attr name="pressTextColor" format="color"/>
    <attr name="defaultBorderColor" format="color"/>
    <attr name="pressBorderColor" format="color"/>
    <attr name="cornerRadius" format="float"/>
    <attr name="borderWidth" format="integer"/>
</declare-styleable>
</resources>

○获取属性值

//        初始化GradientDrawable用于显示边框
    defaultDrawable = new GradientDrawable();
    pressDrawable = new GradientDrawable();
    TypedArray typedArray = context.obtainStyledAttributes(attrs, R.styleable.MyStateButton);
    if(typedArray!=null){
//            默认图片
        defaultImage = typedArray.getResourceId(R.styleable.MyStateButton_defaultImage, R.mipmap.one);
//            点击图片
        pressImage = typedArray.getResourceId(R.styleable.MyStateButton_pressImage, R.mipmap.one_press);
//            设置文字
        String text = typedArray.getString(R.styleable.MyStateButton_text);
//            默认文字颜色
        textcolorDefault = typedArray.getColor(R.styleable.MyStateButton_defaultTextColor, Color.parseColor("#567DBF"));
//            点击文字颜色
        textcolorPress = typedArray.getColor(R.styleable.MyStateButton_pressTextColor, Color.parseColor("#BFBFBF"));
        imageView.setImageResource(defaultImage);
        textView.setTextColor(textcolorDefault);
        textView.setText(text);
//            默认边框颜色
        borderColorDefault = typedArray.getColor(R.styleable.MyStateButton_defaultBorderColor, Color.parseColor("#567DBF"));
//            点击边框颜色
        borderColorPress = typedArray.getColor(R.styleable.MyStateButton_pressBorderColor, Color.parseColor("#BFBFBF"));
//            边框宽度
        borderWidth = typedArray.getInteger(R.styleable.MyStateButton_borderWidth, 2);
//            边框圆角大小
        cornerRadius = typedArray.getFloat(R.styleable.MyStateButton_cornerRadius, 8);
        defaultDrawable.setStroke(borderWidth,borderColorDefault);
        pressDrawable.setStroke(borderWidth,borderColorPress);
        defaultDrawable.setCornerRadius(cornerRadius);
        pressDrawable.setCornerRadius(cornerRadius);
        setBackground(defaultDrawable);
    }

最终效果

最终效果

附上源码地址https://github.com/myml666/MyStateButton

个人博客https://myml666.github.io