一對一直播原始碼，實現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"/>

​

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

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

  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"/>

  其中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的顏色。

以上就是一對一直播原始碼，實現Button按下後顏色加深的效果， 更多內容歡迎關注之後的文章