HarmonyOS:实现Button按下后颜色加深的效果

目录

一、实现效果 二、Android开发 三、HarmonyOS开发 四、比较

一、实现效果

在这里插入图片描述

二、Android开发

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

<Button
    android:
    android:layout_
    android:layout_
    android:layout_margin="10dp"
    android:background="@drawable/shape"
    android:text="查 询"
    android:textSize="18sp"/>

  其中shape为:

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:andro
    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>

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

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:andro>
    <item android:color="#CCCCFF" android:state_pressed="true" />
    <item android:color="#FFFFFF" />
</selector>

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

三、HarmonyOS开发

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

<Button
    ohos:
    ohos:
    ohos:
    ohos:margin="10vp"
    ohos:text="查 询"
    ohos:background_element="$graphic:selector"
    ohos:text_size="18fp"/>

  其中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>

  可以看到,当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>

  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>

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

四、比较

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

来源url
栏目