1. 程式人生 > >從原始碼分析 Android Button 點選效果

從原始碼分析 Android Button 點選效果

Android 點選效果

new.gif

我們平時在開發過程中都可能注意到,我們寫的預設的 Button 都是有點選效果的,而且大小也有預設規定的,而 TextView 就沒有。就想下面的圖片一樣。

GIF.gif

是有預設效果的。通過檢視 Button 的原始碼我們看到:

原始碼說明.jpg

每個 button 有系統預設的風格樣式,就是這裡的風格樣式,使得我們的 button 有了這種效果。下面我們來看看系統預設的 button 風格(注意不同的版本風格可能不同,但大體都是一樣的)

風格.jpg

通過這個建構函式,我們就可以找到 Button 的預設風格了。

button預設風格.jpg

這就是我們這裡使用的預設 Button 的風格(不知道怎麼找的看看我前面關於屬性的文章),看到這裡 Button 的最小高度,最小寬度都有了,這就解釋了為什麼預設的 Button 就那麼大了。當你自己給 Button 設定一個 background 後,你會發現,你的 button 沒有預設的那種波浪效果了。那麼我們就猜想到肯定和 background 有關。那麼我們來看看 button 的預設 background 是如何寫的。

預設背景.jpg

這個就是 background 的預設背景,這裡的 ripple標籤就是點選波浪效果的關鍵!然後我們仿照自己寫一個 background

<ripple xmlns:android="xxxxxxxxxxx"
        android:color="#fffea50b">
    <item android:drawable="@drawable/bcg" />
</ripple>


<inset xmlns:android="http://schemas.android.com/apk/res/android"
       android:insetLeft
="4dp" android:insetTop="6dp" android:insetRight="4dp" android:insetBottom="6dp">
<shape android:shape="rectangle"> <corners android:radius="@dimen/abc_control_corner_material" /> <solid android:color="@android:color/holo_blue_dark" /> <padding
android:left="@dimen/abc_button_padding_horizontal_material" android:top="@dimen/abc_button_padding_vertical_material" android:right="@dimen/abc_button_padding_horizontal_material" android:bottom="@dimen/abc_button_padding_vertical_material" />
</shape> </inset> 複製程式碼

效果圖:

GIF.gif

好了,這樣我們就實現自定義 background 了。其實關於波浪 ripple 的用法還有很多。這裡就不再說了,這裡只是教大家從原始碼上分析,藉助預設樣式,來寫出我們的自定義樣式。

還有一點,可能會有疑問,那就是 button 下面的陰影效果,其實這裡在 5.0 後 Material Design 設計風格。在 Android 5.0 後加入了新的屬性 stateListAnimator 使 button 有了陰影效果。具體官方文件:developer.android.google.cn/guide/topic…material.io/design/envi… 如果你想去掉這種效果最有效的辦法就是 stateListAnimator 的值設定為 @null 當然還有其他辦法比如:你可能觀察到了上面的 background 的 shape 最外面是 inset ,這樣的效果是,如果你設定了 button 的寬 100 高 100 的話,button 的可點選範圍是這麼大,但是背景是減去 inset 設定的值。這樣 button 就有了陰影的空間了。

同樣,如果你給你的 TextView 設定了這種風格,那麼你的 TextView 就和 button 的樣式一樣了。好了,現在你就可以完全定義自己的點選效果了!