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

默認按鈕樣式

按鈕用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>

如果覺得文章還不錯,點個讚唄!在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章