Android 50行代码实现自带点击效果的Button

前言

Android中的Button虽然自带点击效果,但是一般我们都不会用默认的样式,以如下UI图为例:

正常绘制流程

1. 绘制默认状态shape背景 shape_button_normal.xml
2. 绘制按下状态shape背景 shape_button_pressed.xml
3. 新建select文件,将两个状态关联 select_button.xml
4. 给Button设置背景 android:background="@drawable/select_button.xml"

上面有两个Button,也就是我们需要6个xml文件才能实现,简直想骂人

XButton 思路解析(拦截Button内部事件,自动更换背景颜色)

• 自定义XButton继承Button,拦截点击事件
• 监听ACTION_DOWN事件 修改背景
• 监听ACTION_UP事件 恢复背景

上代码

public class XButton extends Button {
    private Drawable mDrawable; //保存自带的背景

    public XButton(Context context) {
        super(context);
        init();
    }

    public XButton(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        mDrawable = getBackground();
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(mDrawable!=null){
            switch (event.getAction()) {
                case MotionEvent.ACTION_DOWN: //按下 添加过滤器
                    mDrawable.setColorFilter(new PorterDuffColorFilter(0x11000000, PorterDuff.Mode.SRC_ATOP));
                    break;
                case MotionEvent.ACTION_UP: //松开或者取消 还原
                case MotionEvent.ACTION_CANCEL:
                    mDrawable.setColorFilter(null);
                    break;
            }
        }
        return super.onTouchEvent(event);
    }
}

使用

只需要把布局中的<Button控件改为<XButton就行了
现在只需要绘制一个UI图默认的背景就OK了,按下就会有点击效果 shape_button_normal.xml
上面的6个文件我们已经简化到了2个文件

<com.xxx.XButton
     android:id="@+id/cancelButton"
     style="?android:attr/borderlessButtonStyle"
     android:text="确定"
     android:background="@drawable/shape_button_normal.xml"
     android:layout_width="137dp"
     android:layout_height="44dp" />

效果

结尾

这里只是提供一个思路,TextView、ImageView等这些控件都同理,GitHub有很多优秀的开源控件,可以直接在xml布局中完成shape操作,感兴趣的可以去了解一下~