Android中设置点击前后背景和颜色都变化的button

效果图

设置点击前后的背景的颜色变化

左边button未点击前（文件放在了res目录下的drawable文件夹下，文件名：logincode_left）

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置背景填充色 -->
    <!--<solid android:color="#5069ff" />-->
    <!-- 设置边框宽度为1dp，边框颜色 -->
    <stroke
        android:width="1dp"
        android:color="#F1F3FF" />
    <!-- 设置按钮圆角半径为25dp -->
    <corners android:bottomLeftRadius="25dp"
        android:topLeftRadius="25dp"/>

</shape>

点击后的文件（logincode_left_press）

<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- 设置背景填充色 -->
    <solid android:color="#5069ff" />
    <!-- 设置边框宽度为1dp，边框颜色 -->
    <stroke
        android:width="1dp"
        android:color="#F1F3FF" />
    <!-- 设置按钮圆角半径为25dp -->
    <corners android:bottomLeftRadius="25dp"
        android:topLeftRadius="25dp"/>

</shape>

设置点击前后的动作变化（logincode_left_selector）

<selector xmlns:android="http://schemas.android.com/apk/res/android" >
    <item android:drawable="@drawable/logincode_left_press" android:state_enabled="false"/>
    <item android:drawable="@drawable/logincode_left" android:state_enabled="true"/>
</selector>

然后在button的background中引用drawable目录下的logincode_left_selector

设置点击前后文字颜色的变化

同样在drawable目录下新建一个button_selector_color文件，设置代码为

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/black"
        android:state_enabled="true" />
    <item android:color="@color/white"
        android:state_enabled="false" />
</selector>

然后将button的textColor属性设置为上面的文件

button点击事件的逻辑设置

我想实现的效果是，上面图中，点击左边button，左边button显示选中的效果，其他button不显示选中的效果。所以设计一下点击事件的逻辑。

button_left = findViewById(R.id.button_selector_left);
button_right = findViewById(R.id.button_selector_right);
button_middle = findViewById(R.id.button_selector_middle);
button_left.setOnClickListener(this);
button_middle.setOnClickListener(this);
button_right.setOnClickListener(this);

然后在onClick方法中实现：

@Override
    public void onClick(View v) {
        switch (v.getId()){
            case R.id.button_selector_left:
                setEnable(button_left);
                break;
            case R.id.button_selector_middle:
                setEnable(button_middle);
                break;
            case R.id.button_selector_right:
                setEnable(button_right);
                break;
        }
    }

其中

    private void setEnable(Button button) {
        List<Button> buttonList=new ArrayList<>();
        if (buttonList.size()==0){
            buttonList.add(button_left);
            buttonList.add(button_right);
            buttonList.add(button_middle);
        }
        for (int i = 0; i <buttonList.size() ; i++) {
            buttonList.get(i).setEnabled(true);
        }
        button.setEnabled(false);
    }

这样就实现上面显示的效果了。

参考文章：
（1）：https://www.cnblogs.com/ldq2016/p/8866671.html
（2）：https://blog.youkuaiyun.com/ymszzu/article/details/82756655?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task
（3）：https://blog.youkuaiyun.com/qq_39326574/article/details/100582919