Button自定義樣式、水波紋、按壓效果詳解

文章目錄

• • • 預設按鈕樣式
    • Background設定顔色
    • Background設定Drawable檔案
    • • • 設定顔色、圓角
        • 設定按壓效果
    • 拓展
    • • • 水波紋效果
        • shape 标簽

預設按鈕樣式

按鈕用Button按鈕的時候我們會發現，預設的按鈕雖然是灰色的，但是它卻有一個體驗感不錯的按壓效果，如下圖

Background設定顔色

當我們設定按鈕 android:background="#2196F3" 屬性填入顔色時，會發現，這時按鈕顔色雖然比之前預設的灰色好看了些，但是點選時的按鈕和你的互動貌似就沒那麼好了，隻能輕微地感覺到好像有那麼一點小陰影出現，是以這也不是我們想要的效果

Background設定Drawable檔案

設定顔色、圓角

這裡我們先在 res 目錄下的 drawable 下建立一個Drawable檔案 btn_bg.xml ，那麼我們現在裡面寫點東西

1. 我們在drawable檔案自動生成的 selector 根标簽内，建立了一個 item 便簽（selector中隻能建立這個）
2. 然後在 item 标簽中建立 shape 标簽，也就是形狀标簽，這裡我們先不對 shape 标簽内進行任何設定
3. 在 shape 标簽内 建立 solid（顔色） 便簽 和 corners（圓角） 标簽

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    
    <item>
        <shape>
            <solid android:color="@color/colorPrimary"/>
            <corners android:radius="8dp"/>
        </shape>
    </item>

</selector>
           

那我們把這個背景用到Button上

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="@drawable/btn_bg"
        android:text="設定Drawable檔案" />
           

效果如圖，可以看到這裡我們的按鈕又變好看了一點（有顔色、有圓角），但是互動感還是不好

設定按壓效果

當你需要按壓效果或者選中效果的時候，selector标簽的作用就展現出來了

• selector 下建立兩個 item
• item 設定 android:state_pressed="" 屬性，這裡面傳入 true 或 false，代表一個是按壓時的樣子，一個是正常顯示的樣子（是以這裡你就可以天馬行空了，下文有拓展）
• 你在兩個 item 中設定不同的顔色或者樣式，應用到 Button 上時，就會有一個按壓效果

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape>
            <solid android:color="@color/colorAccent" />
            <corners android:radius="8dp" />
        </shape>
    </item>

</selector>
           

這裡可以看到，正常情況下是一個綠色，當我們點選按鈕的時候，按鈕變成了紅色

拓展

水波紋效果

可能有的小夥伴就會說，我就是喜歡那個預設的水波紋效果，那好，滿足你的小願望

隻需要在你的Button下加上一條前景色 android:foreground="?selectableItemBackground" 屬性即可（問号别丢了），這樣你可以設定按鈕的背景色，或者按壓效果（一起用不明顯），再加上這個水波紋效果

Tip：這條屬性在View上是有效的，是以說，幾乎所有的控件都有這條屬性，你甚至可以加在 LinearLayout上。

<Button
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="30dp"
        android:background="#2196F3"
        android:foreground="?selectableItemBackground"
        android:text="設定有水波紋效果" />
           

shape 标簽

先看一個效果圖，是不是覺得還挺炫酷？

這就是我之前在上文按壓效果說的，你可以設定成點選改變形狀，話不多說，直接上代碼

這裡相對于之前的按壓變色的那個drawable檔案隻在第二個item下的shape标簽裡，加了一條：android:shape=“oval” （圓），然後再了個 size （大小）标簽

這裡也簡單的說一下 shape （形狀）屬性，具體使用還是需要自己去學習，這裡隻簡單提一下

• oval 圓形
• rectangle 方形
• line 線
• ring 環狀

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_pressed="false">
        <shape>
            <solid android:color="@color/colorPrimary" />
            <corners android:radius="8dp" />
        </shape>
    </item>

    <item android:state_pressed="true">
        <shape android:shape="oval">
            <size android:width="10dp" android:height="10dp" />
            <solid android:color="@color/colorAccent" />
            <corners android:radius="10dp" />
        </shape>
    </item>
    
</selector>
           

如果覺得文章還不錯，點個贊呗！