Android 設定主題實現點選波紋效果

一葉飄舟發表於2016-01-31
Android

開頭先說說大家都知道的Material Design。

這裡推薦大苞米的系列部落格，介紹的很全面。

http://blog.csdn.net/a396901990/article/category/2634371


Material Design：


Material Design是Google推出的一個全新的設計語言，它的特點就是擬物扁平化。


Material Design包含了很多內容，大致把它分為四部分：

主題和佈局——ANDROID L——Material Design詳解（主題和佈局）

檢視和陰影——ANDROID L——Material Design詳解（檢視和陰影）

UI控制元件——ANDROID L——Material Design詳解（UI控制元件）

動畫——ANDROID L——Material Design詳解（動畫篇）


首先說一下主題： 

<!-- res/values/styles.xml -->
<resources>
  <!-- your app's theme inherits from the Material theme -->
  <style name="AppTheme" parent="android:Theme.Material">
    <!-- theme customizations -->
  </style>
</resources>

在最新的5.0中，google似乎不推薦使用Material Design主題了，而是由AppCompat代替。 

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

</resources>


自定義狀態條和導航條：


material還允許你輕鬆的自定義狀態條和導航條的顏色。

可以使用如下屬性（參考下方圖片）：

android:statusBarColor，Window.setStatusBarColor





相容性：


由於Material Theme只可以在Android L Developer Preview中使用。

所以在低版本使用的話就需要為其另設一套主題：

在老版本使用一套主題 res/values/styles.xml，在新版本使用Material主題res/values-v21/styles.xml.


系統自帶點選事件的控制元件一般都具有預設的波紋效果，直接使用即可： 

<RelativeLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                >

                <Button
                    android:id="@+id/myBtn"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:drawablePadding="10dp"
                    android:gravity="center_vertical"
                    android:paddingBottom="15dip"
                    android:paddingLeft="15dip"
                    android:paddingRight="25dip"
                    android:paddingTop="15dip"
                    android:text="Click"
                    android:textColor="@color/common_black_text"
                    android:textSize="16sp" />
            </RelativeLayout>

怎麼為view新增點選波紋效果呢，先了解下面的東西。

觸控反饋：


在Android L5.0中加入了觸控反饋動畫。

其中最明顯，最具代表性的就是波紋動畫，比如當點選按鈕時會從點選的位置產生類似於波紋的擴散效果。


波紋效果（Ripple）：


當你使用了Material主題後，波紋動畫會自動應用在所有的控制元件上，我們當然可以來設定其屬性來調整到我們需要的效果。


可以通過如下程式碼設定波紋的背景：

android:background="?android:attr/selectableItemBackground"波紋有邊界

android:background="?android:attr/selectableItemBackgroundBorderless"波紋超出邊界


使用效果如下：

B1是不設任何背景的按鈕

B2設定了?android:attr/selectableItemBackground

B3設定了?android:attr/selectableItemBackgroundBorderless




設定顏色


我們也可以通過設定xml屬性來調節動畫顏色，從而可以適應不同的主題：

android:colorControlHighlight：設定波紋顏色

android:colorAccent：設定checkbox等控制元件的選中顏色


比如下面這個比較粉嫩的主題，就需要修改動畫顏色來匹配(上面已經有介紹)：



為view新增波紋效果：

<RelativeLayout
                android:id="@+id/user_info_layout"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:clickable="true"
                android:background="?android:attr/selectableItemBackground"
                android:layout_marginTop="10dp"
                android:paddingBottom="15dip"
                android:paddingTop="15dip">

                <TextView
                    android:id="@+id/user_info_text"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:drawablePadding="10dp"
                    android:gravity="center_vertical"
                    android:paddingLeft="15dip"
                    android:paddingRight="25dip"
                    android:text="我的資料"
                    android:textSize="16sp" />

                <ImageView
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_alignParentRight="true"
                    android:layout_centerInParent="true"
                    android:contentDescription="@null"
                    android:paddingRight="15dip"
                     />
            </RelativeLayout>



為Textview新增波紋效果：
<LinearLayout
                android:layout_width="match_parent"
                android:layout_height="68dp"
                android:weightSum="4"
                android:gravity="center_vertical">

                <TextView
                    android:id="@+id/user_unpaid"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="?android:attr/selectableItemBackgroundBorderless"
                    android:drawableTop="@mipmap/ic_user_paid"
                    android:drawablePadding="5dp"
                    android:gravity="center"
                    android:layout_weight="1"
                    android:text="待付款"
                    android:textSize="12sp"
                    android:clickable="true"/>
                <TextView
                    android:id="@+id/user_paid"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="?android:attr/selectableItemBackgroundBorderless"
                    android:drawableTop="@mipmap/ic_user_paid"
                    android:drawablePadding="5dp"
                    android:layout_weight="1"
                    android:gravity="center"
                    android:text="待發貨"
                    android:textColor="@color/common_black_text"
                    android:textSize="12sp"
                    android:clickable="true"/>
                <TextView
                    android:id="@+id/user_unreceived"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="?android:attr/selectableItemBackgroundBorderless"
                    android:drawableTop="@mipmap/ic_user_paid"
                    android:drawablePadding="5dp"
                    android:gravity="center"
                    android:layout_weight="1"
                    android:text="待收貨"
                    android:textColor="@color/common_black_text"
                    android:textSize="12sp"
                    android:clickable="true"/>
                <TextView
                    android:id="@+id/user_completed"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:background="?android:attr/selectableItemBackgroundBorderless"
                    android:drawableTop="@mipmap/ic_user_paid"
                    android:drawablePadding="5dp"
                    android:gravity="center"
                    android:layout_weight="1"
                    android:text="已完成"
                    android:textSize="12sp"
                    android:clickable="true"/>

            </LinearLayout>


這樣就可以實現波紋效果啦！

相關文章