久久国产成人av_抖音国产毛片_a片网站免费观看_A片无码播放手机在线观看,色五月在线观看,亚洲精品m在线观看,女人自慰的免费网址,悠悠在线观看精品视频,一级日本片免费的,亚洲精品久,国产精品成人久久久久久久

搜索
分享

Android 設(shè)置主題實(shí)現(xiàn)點(diǎn)擊波紋效果

 一楠tech 2017-10-24

http://www.jianshu.com/p/cba46422de67


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

這里推薦大苞米的系列博客,，介紹的很全面。

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


Material Design：


Material Design是Google推出的一個(gè)全新的設(shè)計(jì)語(yǔ)言,，它的特點(diǎn)就是擬物扁平化,。


Material Design包含了很多內(nèi)容，大致把它分為四部分：

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

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

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

動(dòng)畫——ANDROID L——Material Design詳解（動(dòng)畫篇）


首先說一下主題：

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

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

  1. <resources>  
  2.   
  3.     <!-- Base application theme. -->  
  4.     <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">  
  5.         <!-- Customize your theme here. -->  
  6.         <item name="colorPrimary">@color/colorPrimary</item>  
  7.         <item name="colorPrimaryDark">@color/colorPrimaryDark</item>  
  8.         <item name="colorAccent">@color/colorAccent</item>  
  9.     </style>  
  10.   
  11. </resources>  


自定義狀態(tài)條和導(dǎo)航條：


material還允許你輕松的自定義狀態(tài)條和導(dǎo)航條的顏色,。

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

android:statusBarColor,，Window.setStatusBarColor





兼容性：


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

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

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


系統(tǒng)自帶點(diǎn)擊事件的控件一般都具有默認(rèn)的波紋效果,，直接使用即可：

  1. <RelativeLayout  
  2.                 android:layout_width="match_parent"  
  3.                 android:layout_height="wrap_content"  
  4.                 >  
  5.   
  6.                 <Button  
  7.                     android:id="@+id/myBtn"  
  8.                     android:layout_width="match_parent"  
  9.                     android:layout_height="wrap_content"  
  10.                     android:drawablePadding="10dp"  
  11.                     android:gravity="center_vertical"  
  12.                     android:paddingBottom="15dip"  
  13.                     android:paddingLeft="15dip"  
  14.                     android:paddingRight="25dip"  
  15.                     android:paddingTop="15dip"  
  16.                     android:text="Click"  
  17.                     android:textColor="@color/common_black_text"  
  18.                     android:textSize="16sp" />  
  19.             </RelativeLayout>  

怎么為view添加點(diǎn)擊波紋效果呢,，先了解下面的東西。

觸摸反饋：


在Android L5.0中加入了觸摸反饋動(dòng)畫,。

其中最明顯,，最具代表性的就是波紋動(dòng)畫，比如當(dāng)點(diǎn)擊按鈕時(shí)會(huì)從點(diǎn)擊的位置產(chǎn)生類似于波紋的擴(kuò)散效果,。


波紋效果（Ripple）：


當(dāng)你使用了Material主題后,，波紋動(dòng)畫會(huì)自動(dòng)應(yīng)用在所有的控件上，我們當(dāng)然可以來設(shè)置其屬性來調(diào)整到我們需要的效果,。


可以通過如下代碼設(shè)置波紋的背景：

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

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


使用效果如下：

B1是不設(shè)任何背景的按鈕

B2設(shè)置了?android:attr/selectableItemBackground

B3設(shè)置了?android:attr/selectableItemBackgroundBorderless




設(shè)置顏色


我們也可以通過設(shè)置xml屬性來調(diào)節(jié)動(dòng)畫顏色,，從而可以適應(yīng)不同的主題：

android:colorControlHighlight：設(shè)置波紋顏色

android:colorAccent：設(shè)置checkbox等控件的選中顏色


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



為view添加波紋效果：

  1. <RelativeLayout  
  2.                 android:id="@+id/user_info_layout"  
  3.                 android:layout_width="match_parent"  
  4.                 android:layout_height="wrap_content"  
  5.                 android:clickable="true"  
  6.                 android:background="?android:attr/selectableItemBackground"  
  7.                 android:layout_marginTop="10dp"  
  8.                 android:paddingBottom="15dip"  
  9.                 android:paddingTop="15dip">  
  10.   
  11.                 <TextView  
  12.                     android:id="@+id/user_info_text"  
  13.                     android:layout_width="wrap_content"  
  14.                     android:layout_height="wrap_content"  
  15.                     android:drawablePadding="10dp"  
  16.                     android:gravity="center_vertical"  
  17.                     android:paddingLeft="15dip"  
  18.                     android:paddingRight="25dip"  
  19.                     android:text="我的資料"  
  20.                     android:textSize="16sp" />  
  21.   
  22.                 <ImageView  
  23.                     android:layout_width="wrap_content"  
  24.                     android:layout_height="wrap_content"  
  25.                     android:layout_alignParentRight="true"  
  26.                     android:layout_centerInParent="true"  
  27.                     android:contentDescription="@null"  
  28.                     android:paddingRight="15dip"  
  29.                      />  
  30.             </RelativeLayout>  



為Textview添加波紋效果：
  1. <LinearLayout  
  2.                 android:layout_width="match_parent"  
  3.                 android:layout_height="68dp"  
  4.                 android:weightSum="4"  
  5.                 android:gravity="center_vertical">  
  6.   
  7.                 <TextView  
  8.                     android:id="@+id/user_unpaid"  
  9.                     android:layout_width="0dp"  
  10.                     android:layout_height="wrap_content"  
  11.                     android:background="?android:attr/selectableItemBackgroundBorderless"  
  12.                     android:drawableTop="@mipmap/ic_user_paid"  
  13.                     android:drawablePadding="5dp"  
  14.                     android:gravity="center"  
  15.                     android:layout_weight="1"  
  16.                     android:text="待付款"  
  17.                     android:textSize="12sp"  
  18.                     android:clickable="true"/>  
  19.                 <TextView  
  20.                     android:id="@+id/user_paid"  
  21.                     android:layout_width="0dp"  
  22.                     android:layout_height="wrap_content"  
  23.                     android:background="?android:attr/selectableItemBackgroundBorderless"  
  24.                     android:drawableTop="@mipmap/ic_user_paid"  
  25.                     android:drawablePadding="5dp"  
  26.                     android:layout_weight="1"  
  27.                     android:gravity="center"  
  28.                     android:text="待發(fā)貨"  
  29.                     android:textColor="@color/common_black_text"  
  30.                     android:textSize="12sp"  
  31.                     android:clickable="true"/>  
  32.                 <TextView  
  33.                     android:id="@+id/user_unreceived"  
  34.                     android:layout_width="0dp"  
  35.                     android:layout_height="wrap_content"  
  36.                     android:background="?android:attr/selectableItemBackgroundBorderless"  
  37.                     android:drawableTop="@mipmap/ic_user_paid"  
  38.                     android:drawablePadding="5dp"  
  39.                     android:gravity="center"  
  40.                     android:layout_weight="1"  
  41.                     android:text="待收貨"  
  42.                     android:textColor="@color/common_black_text"  
  43.                     android:textSize="12sp"  
  44.                     android:clickable="true"/>  
  45.                 <TextView  
  46.                     android:id="@+id/user_completed"  
  47.                     android:layout_width="0dp"  
  48.                     android:layout_height="wrap_content"  
  49.                     android:background="?android:attr/selectableItemBackgroundBorderless"  
  50.                     android:drawableTop="@mipmap/ic_user_paid"  
  51.                     android:drawablePadding="5dp"  
  52.                     android:gravity="center"  
  53.                     android:layout_weight="1"  
  54.                     android:text="已完成"  
  55.                     android:textSize="12sp"  
  56.                     android:clickable="true"/>  
  57.   
  58.             </LinearLayout>  


這樣就可以實(shí)現(xiàn)波紋效果啦,！     

    本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間,，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn),。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式,、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙,。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容,，請(qǐng)點(diǎn)擊一鍵舉報(bào)。
    轉(zhuǎn)藏 分享 獻(xiàn)花（0）

    0條評(píng)論

    發(fā)表

    請(qǐng)遵守用戶 評(píng)論公約

    類似文章 更多