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 <TextView2         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的屬性，意思叫"著色"，有兩種形式：

1、android:backgroundTint=""  2、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.AppCompatTextView2     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就這麼簡單，實際上就是利用陰影給人視覺上的錯覺。

 

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