Android:实现按钮点击后高亮的效果

àì夳堔傛蜴生んèń 2021-11-11 03:56 937阅读 0赞

**未点击前:**

![20190804102024339.png][]

**点击后:**

![20190804102349562.png][]

可以看出点击后，颜色变得更加高亮了(你也可以设置为别的颜色，效果更加明显)

由于我们很多按钮都需要这种样式，所以我们把这种按钮的样式放在`styles.xml`中，方便重复使用

#### 第一步:在res/drawable文件夹下定义两种不同状态下的按钮的形状 ####

在文件夹上鼠标右键—>new drawable resource file—>RootElement选择Shape  
![20190804103117477.png][]  
`btn_n.xml`

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        
        <solid android:color="#D43433"></solid>
        
        <corners android:radius="4dp"></corners>
    </shape>

`btn_h.xml`

<?xml version="1.0" encoding="utf-8"?>
    <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
        <solid android:color="#C80F1F"></solid>
        <corners android:radius="4dp"></corners>
    </shape>

这两个xml主要的不同就在于btn\_h.xml的color更高亮一点

#### 第二步:在res/drawable文件夹下定义selector,来确定在哪些状态下使用什么drawable ####

在文件夹上鼠标右键—>new drawable resource file—>RootElement选择Selector  
`btn_selector.xml`

<?xml version="1.0" encoding="utf-8"?>
    <selector xmlns:android="http://schemas.android.com/apk/res/android">
        
        
        state_pressed:
        <item android:drawable="@drawable/btn_h" android:state_focused="true"></item>
        <item android:drawable="@drawable/btn_h" android:state_pressed="true"></item>
        <item android:drawable="@drawable/btn_h" android:state_selected="true"></item>
        
        <item android:drawable="@drawable/btn_n"></item>
    </selector>

#### 第三步:在values/styles.xml中定义按钮具体的样式，并将backgroud设置为我们上一步定义的selector ####

`styles.xml`

<style name="btn_submit"> <item name="android:layout_width">match_parent</item> <item name="android:layout_height">@dimen/btnHeight</item> <item name="android:textColor">@android:color/white</item> <item name="android:textSize">@dimen/textSize</item> <item name="android:gravity">center</item> <item name="android:layout_marginLeft">@dimen/marginSize</item> <item name="android:layout_marginRight">@dimen/marginSize</item> <item name="android:background">@drawable/btn_selector</item> </style>

#### 第四步:在layout文件中通过style调用就行了 ####

[20190804102024339.png]: /images/20211109/733bbdaaaaad402d9b0e4e1a784a791d.png
[20190804102349562.png]: /images/20211109/8fc22ad280494ed8a68ea9ffc610c8ab.png
[20190804103117477.png]: /images/20211109/1be84d57349e4243b0207d3c2a70c215.png