HarmonyOS：实现Button按下后颜色加深的效果_鸿蒙 按的时候 背景颜色

一、实现效果

二、Android开发

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

<Button
    android:id="@+id/btn_query"
    android:layout_width="match_parent"
    android:layout_height="48dp"
    android:layout_margin="10dp"
    android:background="@drawable/shape"
    android:text="查 询"
    android:textSize="18sp"/>
1
2
3
4
5
6
7
8

  其中shape为：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <!-- 填充的颜色 -->
    <solid android:color="@drawable/selector" />
    <!-- 设置按钮的四个角为弧形 -->
    <!-- android:radius 弧形的半径 -->
    <corners
        android:bottomLeftRadius="10dp"
        android:bottomRightRadius="10dp"
        android:topLeftRadius="10dp"
        android:topRightRadius="10dp" />
    <padding
        android:bottom="3dp"
        android:left="3dp"
        android:right="3dp"
        android:top="3dp" />
</shape>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  可以看到Button的形状为矩形，但是四个角通过corners可以设置为弧形，进而形成“胶囊”效果。
  要实现Button“点击后颜色加深，释放后颜色恢复”的效果，重点在于solid的设置，即颜色的填充。
  看一下颜色文件selector：

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

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

三、HarmonyOS开发

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

<Button
    ohos:id="$+id:btn_query"
    ohos:width="match_parent"
    ohos:height="48vp"
    ohos:margin="10vp"
    ohos:text="查 询"
    ohos:background_element="$graphic:selector"
    ohos:text_size="18fp"/>
1
2
3
4
5
6
7
8

  其中selector为：

<?xml version="1.0" encoding="utf-8"?>
<state-container
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:shape="oval">
    <item
        ohos:element="$graphic:shape"
        ohos:state="component_state_pressed" />
    <item
        ohos:element="$graphic:shape_empty"
        ohos:state="component_state_empty"/>
</state-container>
1
2
3
4
5
6
7
8
9
10
11

  可以看到，当Button状态为component_state_pressed时，Button的布局为shape；当其状态为component_state_empty时，Button的布局为shape_empty。
  分别给出这两个布局文件：
  shape:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <!-- 填充的颜色，这里为按下后的颜色 -->
    <solid
        ohos:color="#CCCCFF"/>
    <!-- 设置按钮的四个角为弧形 -->
    <!-- ohos:radius 弧形的半径 -->
    <corners
        ohos:radius="100"/>

<!--     bounds：Button里面的文字与Button边界的间隔 -->
    <bounds
        ohos:bottom="3vp"
        ohos:left="3vp"
        ohos:right="3vp"
        ohos:top="3vp" />
</shape>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  shape_empty：

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <!-- 填充的颜色 -->
    <solid
        ohos:color="#cccccc"/>
    <!-- 设置按钮的四个角为弧形 -->
    <!-- ohos:radius 弧形的半径 -->
    <corners
        ohos:radius="100"/>

    <!--     bounds：Button里面的文字与Button边界的间隔 -->
    <bounds
        ohos:bottom="3vp"
        ohos:left="3vp"
        ohos:right="3vp"
        ohos:top="3vp" />

</shape>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

  可以发现二者只是填充颜色不同，而这两种颜色分别就是按下与不按下时button的颜色。

四、比较

  安卓开发和鸿蒙开发实现的方式类似，但感觉安卓开发中实现的效果要流畅一点，用户体验更好！