為控件添加陰影效果-最簡單的實(shí)現(xiàn)方法

• 我們知道Android5.0 引入了Z軸的概念，于是就有著這種風(fēng)格，也就是目前比較火的Material Design。
• 我們可以直接為控件設(shè)置android:elevation這個屬性，來讓他實(shí)現(xiàn)“漂浮”效果
• 可是，我們?nèi)粘３Ｓ玫囊恍┳罨镜腂utton這些東西卻是不支持這個屬性
• 那么，我們?nèi)绻胱屛覀兊目丶∑饋恚撛趺崔k呢？

實(shí)現(xiàn)

• 效果

  
  
  image
• 這里的東西其實(shí)只是一個Button而已，可是通過我們的設(shè)置之后就變成了一個擁有陰影的控件，是不是很高大上呢？
• 其實(shí)這里面的東西并不復(fù)雜
• 我們都知道，通過drawable的shape結(jié)點(diǎn)，可以設(shè)置圖形的圓角什么的屬性，關(guān)于介紹shape請移駕這里
• 不過shape這么用，好像沒有設(shè)置陰影啥的東西啊
• 這里，Android還為我們提供了一個layer-list結(jié)點(diǎn)，然后在它的內(nèi)部可以這樣用

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        
    </item>
    <item
        android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="5dp">
       
    </item>
</layer-list>

• 大家先不管別的，就是在layer-list節(jié)點(diǎn)下有一個Item屬性，這個屬性表示層，下面的Item會將上面的Item覆蓋
• 這里先來個例子簡單的說明這個Item的效果
• xml代碼如下

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:left="1dip"
        android:right="1dip"
        android:top="1dip"
        android:bottom="1dip">
        <shape>
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
    
    <item android:left="5dip"
        android:right="5dip"
        android:top="5dip"
        android:bottom="5dip">
        <shape>
            <solid android:color="@color/colorPrimary"/>
        </shape>
    </item>
    
    <item android:left="10dip"
        android:right="10dip"
        android:top="10dip"
        android:bottom="10dip">
        <shape>
            <solid android:color="#FF0"/>
        </shape>
    </item>
    
</layer-list>

• 這里我們在Item里面定義了三個Item，然后Item的左上右下的值分別遞增，然后在Item的內(nèi)部我們給每一個Item都設(shè)置不同的顏色
• 接下來，就是見證奇跡的時刻了

• 我給Button設(shè)置background屬性為這個xml文件，然后，效果看圖

  
  
  image
• 有沒有和你想象的一樣呢？
• 我們剛才說的Item的意思是層吧？這里明顯是分成了三層，那么為什么每一層的大小不一樣呢？
• 這里就要?dú)w功于我們給Item設(shè)置的那四個參數(shù)了，那四個參數(shù)分別表示在每個方向往內(nèi)的偏移量，所以我們給最后一個Item的四個偏移量設(shè)置到最大，不然，如果最上層的偏移量不夠的話，他會將下面的層（或者說寫在上面的item）給覆蓋掉
• 這就是簡單用法了，我們可以在Item里面是用shape屬性將這個控件設(shè)置的奇形怪狀（額，這里找不出什么詞修飾了，你們懂得）
• 那么接下來看看陰影效果怎么實(shí)現(xiàn)吧

• 先簡單分析一下，我們最上面的效果圖，我們其實(shí)可以這么理解，他也是分兩層，下層是陰影，上層是顏色，只不過相對下層來說，我們需要讓他的上層往內(nèi)偏移一定量
• 感覺就沒啥難理解的了吧，直接上代碼

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    
    <!--陰影層-->
    <item>
        <!--shape為陰影層的樣式-->
        <shape>

            <gradient
                android:angle="270"
                android:endColor="#0F000000"
                android:startColor="#0F000000" />
            <!--這里主要是四個角弧度-->
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>


    <!--上層-->
    <!--上層要向內(nèi)偏移一定的距離，才能有陰影的效果-->
    <item
        android:left="1dp"
        android:top="1dp"
        android:right="1dp"
        android:bottom="5dp">

        <!--shape為上層的樣式-->
        <shape>
            <!--這里雖然都寫的是漸變色，但是并沒有寫出色差，所以這里并沒有效果-->
            <gradient
                android:angle="270"
                android:endColor="#FFFFFF"
                android:startColor="#FFFFFF" />

            <!--這里主要是四個角弧度，要注意的是必須與
            陰影層的弧度相同，不然可就不符合大自然規(guī)律了-->
            <corners
                android:bottomLeftRadius="6dip"
                android:bottomRightRadius="6dip"
                android:topLeftRadius="6dip"
                android:topRightRadius="6dip" />
        </shape>
    </item>
    
</layer-list>

• 這里再也沒啥說的，要注意的是陰影層和上層的shape樣式要一樣，符合陰影的規(guī)律
• 當(dāng)然這里也可以是別的樣式，只要你做出來感覺好看，咋樣都成，重點(diǎn)是這里的layer-list的item分層思想