Android Studio 中Button被按下后颜色变化并保持,等待下一次按下颜色翻转
Android Studio
在Android Studio中使用翻转按键ToggleButton来实现按键按下时案件颜色变化并保持,再次按下后按键颜色变回初始时的颜色。
为了美观,先给按键做了设计处理,所以分为3步去实现:
一、在drawable中新建两个xml文件,分别是shape_pressed.xml和shape_normal.xml
在shape_pressed.xml写上以下代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/color_yellow" />
<stroke android:width="1dip" android:color="@color/white"/>
<!-- 圆角 -->
<corners android:radius="10dp" />
<!-- 边距 -->
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
在shape_normal.xml写上以下代码:
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
<solid android:color="@color/color_green" />
<stroke android:width="1dip" android:color="@color/white"/>
<!-- 圆角 -->
<corners android:radius="10dp" />
<!-- 边距 -->
<padding
android:bottom="5dp"
android:left="5dp"
android:right="5dp"
android:top="5dp" />
</shape>
说明:以上两个xml文件只是给按键做一个简单的美化。shape_normal表示按键没被按下时的状态,shape_pressed表示在按键被按下后的状态显示。
二、新建一个selector.xml
button_selector.xml代码如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true"
android:drawable="@drawable/shape_pressed"/>
<item android:state_checked="false"
android:drawable="@drawable/shape_normal"/>
</selector>
选择器的代码完成后,就可以去布局文件中使用了
三、打开布局文件,选择ToggleButton,代码如下:
<ToggleButton
android:id="@+id/tv_auto"
android:layout_width="150dp"
android:layout_height="50dp"
android:textColor="#000000"
android:textOff="自动"
android:textOn="结束"
android:background="@drawable/button_selector"
android:textSize="23dp"/>
总结:经过以上三个步骤,就可以实现我们开头所说的功能,如果想要实现按键按下后颜色变深或者变浅,在松开后颜色变回来,则可以在第二个步骤里把state_checked改成state_pressed,代码如下:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_pressed="true"
android:drawable="@drawable/shape_pressed"/>
<item android:state_pressed="false"
android:drawable="@drawable/shape_normal"/>
</selector>
至此,已完成!