Android 5.x新特性之elevation(陰影),tinting（着色）以及clipping（剪裁）

快過年了，公司也沒事作了， 本身也閒了下來，一每天呆着真沒意思，閒來沒事本身研究研究了Google I/O 2014 發佈 Material Design設計，人性化的風格，豐富的色彩，令人機交互更完美。中文學習地址http://wiki.jikexueyuan.com/project/material-design/(這個好像是極客學院翻譯的)，固然若是你的引文OK的話，也能夠去看官方英文文檔http://www.google.com/design/spec/material-design/。

1。陰影以及高度--elevation

 一般狀況下，Android 的view設計之考慮到x,y2個方向，可是5.x之後Google又引出了一個z的屬性，咱們來看一下官方給的效果圖：

你們能夠看出來，上面的圖片看起來有陰影，好像2個圖片不在一個高度同樣，而他的側面圖，正好能夠解釋，怎麼能夠達到這種效果呢，咱們能夠再佈局空間裏面添加一個elevation的屬性，（用起來很簡單）

1 <TextView
2         android:layout_width="100dp"
3         android:layout_height="100dp"
4         android:layout_margin="10dp"
5         android:elevation="1dp" 
6         android:background="@mipmap/banner_pingan_default"/>

固然咱們也能夠用代碼來實現

view.setTranslationZ(100);

2.tinting

在Android 5.X後也引入了一個叫tint的屬性，意思叫"着色"，有兩種形式：

一、android:backgroundTint=""  二、android:tint=""

咱們先來看一下圖片：這個主要是在xml文件裏定義tint和tintMode2個屬性，其中tintMode有6個。

tintMode主要改變咱們着色的模式！！！！通常狀況默認的模式是 src_in;

按順序第一個是圖片原圖，其他的把tintMode屬性分別設置爲：add，multiply,screen,src_atop,src_in,src_over,

咱們能夠看出來，主要是給圖片上着上一層遮罩顏色。

　　

固然咱們也知道，這是5.x以上的新特性，若是咱們想讓他低版本也支持該怎麼辦呢？Goolge固然想到了，這個時候咱們須要引入support-V7jar包，

咱們須要吧須要的控件定義爲：android.support.v7.widget.AppCompat...

咱們以TextView爲例子:

 

1 <android.support.v7.widget.AppCompatTextView
2     android:id="@+id/t1"
3     android:layout_width="match_parent"
4     android:layout_height="50dp"
5     android:text="測試" />

可是注意了，這個時候，咱們不能在佈局裏面定義了咱們須要在代碼裏面設置

1 ViewCompat.setSupportBackgroundTintList(ColorStateList tint);
2 ViewCompat.setSupportBackgroundTintMode(PorterDuff.Mode tintMode);

 

 

注意：咱們能夠看到，第一行須要的參數是ColorStateList類型的，這個時候，咱們可使用getResource().getColorStateList(R.color.色值);來獲取

 

 

3.clipping

一半狀況下，咱們都把一個view改變一下外形，很常見的好比一個TextView帶圓角邊框的，咱們通常狀況下，都會用shape資源去化一個這樣的做爲TextView的背景。例以下圖

那麼咱們要怎麼樣去實現這樣的一個樣式，而不是用shape呢，很簡單，咱們先看一下xml文件怎麼佈局

 1     <TextView
 2         android:id="@+id/tv1"
 3         android:layout_width="200dp"
 4         android:layout_height="50dp"
 5         android:elevation="1dp"
 6         android:text="註冊"
 7         android:textSize="19sp"
 8         android:gravity="center"
 9         android:textColor="@color/colorPrimaryDark"
10         android:layout_margin="20dp"/>

能夠看出來，咱們只是加了一個elevation屬性，設置爲1dp的陰影，圖的主要的是要在代碼裏面實現，咱們看下怎麼去實現

        //獲取outLine，咱們須要使用ViewoutLineProvider
        ViewOutlineProvider viewOutlineProvider=new ViewOutlineProvider() {
            @Override
            public void getOutline(View view, Outline outline) {
                //修改outLine的形狀，這裏是設置分別設置左上右下，以及Radius
                outline.setRoundRect(0,0,view.getWidth(),view.getHeight(),30);
            }
        };
        //將須要控件重寫設置形狀
        tv1.setOutlineProvider(viewOutlineProvider);

so就這麼簡單，實際上就是利用陰影給人視覺上的錯覺。