一对一直播源码，实现Button按下后颜色加深的效果

一、Android开发

在安卓中利用selector可以实现Button的点击效果，布局文件如下所示：

<Button<br>    android:id="@+id/btn_query"<br>    android:layout_width="match_parent"<br>    android:layout_height="48dp"<br>    android:layout_margin="10dp"<br>    android:background="@drawable/shape"<br>    android:text="查 询"<br>    android:textSize="18sp"/>

其中shape为：

<br><?xml version="1.0" encoding="UTF-8"?><br><shape xmlns:android="http://schemas.android.com/apk/res/android"<br>    android:shape="rectangle"><br>    <!-- 填充的颜色 --><br>    <solid android:color="@drawable/selector" /><br>    <!-- 设置按钮的四个角为弧形 --><br>    <!-- android:radius 弧形的半径 --><br>    <corners<br>        android:bottomLeftRadius="10dp"<br>        android:bottomRightRadius="10dp"<br>        android:topLeftRadius="10dp"<br>        android:topRightRadius="10dp" /><br>    <padding<br>        android:bottom="3dp"<br>        android:left="3dp"<br>        android:right="3dp"<br>        android:top="3dp" /><br></shape>

可以看到Button的形状为矩形，但是四个角通过corners可以设置为弧形，进而形成“胶囊”效果。

要实现Button“点击后颜色加深，释放后颜色恢复”的效果，重点在于solid的设置，即颜色的填充。

看一下颜色文件selector：

<?xml version="1.0" encoding="utf-8"?><br><selector xmlns:android="http://schemas.android.com/apk/res/android"><br>    <item android:color="#CCCCFF" android:state_pressed="true" /><br>    <item android:color="#FFFFFF" /><br></selector>

Android开发中利用selector可以实现一个控件两种不同的状态。在本例中，当按钮的state_pressed为true时，即按钮被按下时颜色为#CCCCFF，否则为#FFFFFF。

二、HarmonyOS开发

鸿蒙开发中并没有selector，但有一个类似的state-container，实现代码如下：

<br><Button<br>    ohos:id="$+id:btn_query"<br>    ohos:width="match_parent"<br>    ohos:height="48vp"<br>    ohos:margin="10vp"<br>    ohos:text="查 询"<br>    ohos:background_element="$graphic:selector"<br>    ohos:text_size="18fp"/>

其中selector为：

<?xml version="1.0" encoding="utf-8"?><br><state-container<br>    xmlns:ohos="http://schemas.huawei.com/res/ohos"<br>    ohos:shape="oval"><br>    <item<br>        ohos:element="$graphic:shape"<br>        ohos:state="component_state_pressed" /><br>    <item<br>        ohos:element="$graphic:shape_empty"<br>        ohos:state="component_state_empty"/><br></state-container>

可以看到，当Button状态为component_state_pressed时，Button的布局为shape；当其状态为component_state_empty时，Button的布局为shape_empty。

分别给出这两个布局文件：

shape:<br><?xml version="1.0" encoding="UTF-8"?><br><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"<br>       ohos:shape="rectangle"><br>    <!-- 填充的颜色，这里为按下后的颜色 --><br>    <solid<br>        ohos:color="#CCCCFF"/><br>    <!-- 设置按钮的四个角为弧形 --><br>    <!-- ohos:radius 弧形的半径 --><br>    <corners<br>        ohos:radius="100"/><br><!--     bounds：Button里面的文字与Button边界的间隔 --><br>    <bounds<br>        ohos:bottom="3vp"<br>        ohos:left="3vp"<br>        ohos:right="3vp"<br>        ohos:top="3vp" /><br></shape><br>  shape_empty：<br><?xml version="1.0" encoding="UTF-8"?><br><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"<br>       ohos:shape="rectangle"><br>    <!-- 填充的颜色 --><br>    <solid<br>        ohos:color="#cccccc"/><br>    <!-- 设置按钮的四个角为弧形 --><br>    <!-- ohos:radius 弧形的半径 --><br>    <corners<br>        ohos:radius="100"/><br>    <!--     bounds：Button里面的文字与Button边界的间隔 --><br>    <bounds<br>        ohos:bottom="3vp"<br>        ohos:left="3vp"<br>        ohos:right="3vp"<br>        ohos:top="3vp" /><br></shape>