Android点击View改变字体颜色和边框背景

原創

2020-02-22 04:49

　　最近要做一个仿网易严选的底部弹出式菜单，在弹出的菜单中可以选择具体的要买的商品，比如规格和购买数量等等；做到这里时笔者想着给规格按钮选项设置点击后改变字体颜色和边框背景，用来显示已选定的商品规格；
　　
　　1、首先在values文件下新建一个style.xml，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="my_button_style" parent="@android:style/Widget.Button">

        <item name="android:background">@drawable/my_button_border</item>
        <item name="android:textColor">@drawable/text_color</item>

    </style>

</resources>

　　2、然后在drawable文件下新建my_button_border.xml和text_color.xml两个选择器，前者是在点击button时用来改变边框背景，后者是用来改变字体颜色；
　　my_button_border.xml代码如下：

<?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/border_selected" />  <!--点击后边框背景-->
    <item android:drawable="@drawable/border_normal" />  <!--默认边框背景-->

</selector>

　　text_color.xml代码如下：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="true" android:color="@color/red"></item>   <!--点击后字体颜色-->
    <item android:color="@color/black"></item>    <!--默认字体颜色-->

</selector>

　　3、在布局文件中使用我们自己定义的style.xml样式文件，方法如下代码所示：

    <Button
        style="@style/my_button_style"
        android:id="@+id/yuan_mu_se"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:text="原木色1400*820*750mm"
        android:gravity="center"
        android:padding="4dp"
        android:textSize="14dp" />

　　还可以这样使用我们设置的字体颜色和边框背景，方法如下代码所示：

　　<Button
        android:id="@+id/tao_mu_se"
        android:layout_width="wrap_content"
        android:layout_height="40dp"
        android:layout_marginTop="10dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="10dp"
        android:background="@drawable/my_button_border"
        android:text="桃木色1400*820*750mm"
        android:padding="4dp"
        android:textColor="@drawable/text_color"
        android:gravity="center"
        android:textSize="14dp" />

　　两种方法都可以实现我们所需要效果，点击文本框实现字体颜色和边框背景的改变；
　　4、上面的my_button_border.xml选择器是用改变边框背景图片的方式来实现改变边框背景的，这里最好使用.9图，从而可以做到自适应的效果；下面不使用.9图，使用shape来进行背景的绘制，新建button_border_focused.xml和button_border_normal.xml；
　　button_border_focused.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#FFFFFF" />
    <corners android:radius="3dip" />  <!--设置圆角的半径-->
    <stroke
        android:width="2dip"
        android:color="#ff0000" />

</shape>

　　button_border_normal.xml的代码如下：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">

    <solid android:color="#FFFFFF" />
    <corners android:radius="3dip" />
    <stroke
        android:width="2dip"
        android:color="#000000" />

</shape>

　　修改my_button_border.xml里面的代码如下：

<?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/button_border_focused" />  <!--点击后边框背景-->
    <item android:drawable="@drawable/button_border_normal" />  <!--默认边框背景-->

</selector>