1. 程式人生 > >在XML中為layout設定陰影

在XML中為layout設定陰影

1.寫在前面

因為有這個需求,所以搜很多資料,也看到了很多方法為layout新增陰影但是最好的方法我感覺是如下兩個
github地址,專案中使用
github地址,並沒有用它
我使用的是第一個,原因主要兩天:1.使用說明詳細 2.star比第二個多很多 。但是比較蛋疼的是這個使用指南全是英文,所以一些新增陰影的屬性不知道什麼意思。所以我寫了個demo測試了下這些屬性。所以寫這個部落格主要是熟悉這些屬性的含義還有希望幫到有同樣需求的人。

2.乾貨

<declare-styleable name="ShadowLayout">
    <attr name
="sl_cornerRadius" format="dimension"/>
<attr name="sl_shadowRadius" format="dimension"/> <attr name="sl_shadowColor" format="color"/> <attr name="sl_dx" format="dimension"/> <attr name="sl_dy" format="dimension"/> </declare-styleable>

這個庫的自定義屬性就這幾個,一個個來看
首先上demo的xml,不含陰影的,很簡單 就是個relativelayout

     <RelativeLayout
            android:background="@color/colorAccent"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            >
        </RelativeLayout>

這裡寫圖片描述

現在為這個layout新增陰影,程式碼如下

        <com.dd.ShadowLayout
            android:layout_width="match_parent"
android:layout_height="wrap_content"> <RelativeLayout android:background="@color/colorAccent" android:layout_width="match_parent" android:layout_height="80dp" > </RelativeLayout> </com.dd.ShadowLayout>

執行後如下
這裡寫圖片描述
可以看出來雖然我什麼屬性都沒加,就是用這個控制元件包括,就已經新增好了陰影,說明設定了預設的陰影顏色和其他距離。並且仔細看可知 這個陰影是四周都加了,因為這個有顏色的佈局左右縮進了 所以已經帶了陰影了。這上下兩條邊就不用說了 明顯帶了陰影了。

現在一個個設定屬性,為這個控制元件新增如下屬性

app:sl_shadowColor="@color/colorPrimary"

這個其實很明顯 是個設定陰影的顏色。至於我新增的這個顏色就是生成專案自帶的那個藍色橫條actionbar顏色。然後執行發現如下
這裡寫圖片描述
可以看到 雖然上下左右都縮進了,但是並沒有陰影的效果。然後看了下 發現這個顏色並沒有帶上透明度,現在我對這個顏色修改下,顏色不變 但是透明度設定50%,如下

  app:sl_shadowColor="#803F51B5"

注意這裡為什麼將顏色抽出來,沒有引用,因為 theme colorPrimary 不能使用帶有alpha的顏色值,不然會報錯。這不是重點。只要知道這個colorPrimary顏色就是#3F51B5就行了
這裡寫圖片描述
嗯 又帶陰影了 但是可以發現這顏色並沒有什麼用 起作用的還是透明度 因為不管什麼顏色 紅色 黑色 藍色 透明度為50%都是這樣的。

這個測試完了,我將顏色修改成這個庫使用指南中的顏色 測試第二個屬性,在新增如下

 app:sl_shadowRadius="4dp"

執行出來如下
這裡寫圖片描述
好像看不出什麼 數量大點,繼續修改這個屬性

    app:sl_shadowRadius="14dp"

執行結果如下
這裡寫圖片描述
可以看到四周上下左右縮進了很多 導致這個佈局大小面積小了很多。所以我認為這個屬性應該是設定陰影高度的。

將 app:sl_shadowRadius=”4dp”還原成4dp。並且新增如下兩個屬性

app:sl_dx="2dp"
app:sl_dy="2dp"

執行如下
這裡寫圖片描述
首先可以看出來 為下邊和右邊添加了陰影 並且整體看起來比上面的幾種效果好看多了。但是其實仔細看 會發現 左邊和上邊還是有陰影的 。
再修改 將下面這條屬性刪除,並且將sl_dx修改成6dp

app:sl_dy="2dp"

執行出來如圖
這裡寫圖片描述
這就是佈局陰影高度為2dp,佈局右邊陰影6dp
所以

sl_dx  
sl_dy

就是為佈局右邊和下邊設定陰影偏移的屬性。可能有人想問 要為上邊或者左邊設定陰影偏移怎麼辦 很簡單 設定偏移量帶上 - 就可以了 比如將程式碼修改如下

  app:sl_dx="-6dp"

這裡寫圖片描述


OK ,其實還有個屬性

app:sl_cornerRadius="xxxdp"

·但是我試了很久還是看不出這個是什麼意思。新增上去並沒有效果 所以如果有知道可以說一聲。最後再次感謝dai佬的這個庫
github地址