在Android中實現陰影效果

本文轉載自查看原文 2017-05-27 11:55 16675 android/ 陰影

在Android L推出后，Google提出了全新的設計語言：材質設計。其中很重要的一點就是陰影效果的使用，你可以為每一個View設置一個elevation值，相當於除了x、y之外的z值，z值決定了陰影的大小，z值越大表示陰影越大。z值包含兩個成分：elevation和translation。elevation是一個靜態的成分，translation使用了動畫：Z = elevation + translationZ。

在layout中設置elevation，使用android:elevation屬性。在代碼中設置，使用View.setElevation()方法。設置一個View的translation，使用View.setTranslationZ()方法。ViewPropertyAnimator.z()和ViewPropertyAnimator.translationZ()能使你更輕易的推動Views的elevation。

因此，想要在5.0（API 21）以及以后想要設置陰影非常簡單我們只需要設置elevation屬性就可以了。比如我們想讓一張圖片顯示陰影：

<ImageView
 android:layout_width="100dp"
 android:layout_height="100dp"
 android:layout_marginTop="10dp"
 android:background="#fff"
 android:elevation="10dp"
 android:src="@drawable/ic_launcher" />

需要注意的一點是：必須要設置background並且不能設置是透明背景，這樣在真機上才能顯示出來，沒有設置的話預覽能顯示，但是真機並沒有效果，在ViewGroup中也是一樣。

那我們想在5.0之前也實現陰影效果怎么辦呢？有兩個辦法：第一種是自定義layer-list，第二種辦法是使用nine-patch圖片。

先來看看nine-patch方案：大概原理就是使用一張邊界是陰影效果的.9圖片，然后設置為背景，可以讓美工幫忙切一張，也可以使用系統自帶的，有個叫android:background="@android:drawable/dialog_holo_light_frame”，設置后的效果就是帶陰影的效果。

再來看看layer-list方案，如果我們需要一張矩形的陰影效果，則大概應該這么定義：

<?xmlversion="1.0"encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
 <!-- Drop Shadow Stack -->
 <item>
 <shape>
 <padding
 android:bottom="2dp"
 android:left="2dp"
 android:right="2dp"
 android:top="2dp" />
 <solid android:color="#10CCCCCC" />
 </shape>
 </item>
 <item>
 <shape>
 <padding
 android:bottom="2dp"
 android:left="2dp"
 android:right="2dp"
 android:top="2dp" />
 <solid android:color="#20CCCCCC" />
 </shape>
 </item>
 <item>
 <shape>
 <padding
 android:bottom="2dp"
 android:left="2dp"
 android:right="2dp"
 android:top="2dp" />
 <solid android:color="#40CCCCCC" />
 </shape>
 </item>
 <item>
 <shape>
 <padding
 android:bottom="2dp"
 android:left="2dp"
 android:right="2dp"
 android:top="2dp" />
 <solid android:color="#50CCCCCC" />
 </shape>
 </item>
 <item>
 <shape>
 <padding
 android:bottom="2dp"
 android:left="2dp"
 android:right="2dp"
 android:top="2dp" />
 <solid android:color="#60CCCCCC" />
 </shape>
 </item>
 <!-- Background -->
 <item>
 <shape>
 <solid android:color="#FFFFFF" />
 <corners android:radius="3dp" />
 </shape>
 </item></layer-list>

原理就是沿着邊界一層一層的繪制，顏色由深到淺。

同樣，如果需要實現像FAB（Floating ActionBar）一樣的陰影效果，也能這么定義，把矩形換做圓形即可：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231

<?xmlversion="1.0"encoding="utf-8"?>
<selectorxmlns:android="http://schemas.android.com/apk/res/android">
 <itemandroid:state_pressed="true">
 <layer-list>
 <!-- Shadow -->
 <itemandroid:top="1dp"android:right="1dp">
 <layer-list>
 <item>
 <shape android:shape="oval">
 <solid android:color="#08000000"/>
 <padding
 android:bottom="3px"
 android:left="3px"
 android:right="3px"
 android:top="3px"
 />
 </shape>
 </item>
 <item>
 <shape android:shape="oval">
 <solid android:color="#09000000"/>
 <padding
 android:bottom="2px"
 android:left="2px"
 android:right="2px"
 android:top="2px"
 />
 </shape>
 </item>
 <item>
 <shape android:shape="oval">
 <solid android:color="#10000000"/>
 <padding
 android:bottom="2px"
 android:left="2px"
 android:right="2px"
 android:top="2px"
 />
 </shape>
 </item>
 <item>
 <shape android:shape="oval">
 <solid android:color="#11000000"/>
 <padding
 android:bottom="1px"
 android:left="1px"
 android:right="1px"
 android:top="1px"
 />
 </shape>
 </item>
 <item>
 <shape android:shape="oval">
 <solid android:color="#12000000"/>
 <padding
 android:bottom="1px"
 android:left="1px"
 android:right="1px"
 android:top="1px"
 /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#13000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#14000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#15000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#16000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> </layer-list> </item> <!-- Blue button pressed --> <item> <shape android:shape="oval"> <solid android:color="#90CAF9"/> </shape> </item> </layer-list> </item> <item android:state_enabled="true"> <layer-list> <!-- Shadow --> <item android:top="2dp"android:right="1dp"> <layer-list> <item> <shape android:shape="oval"> <solid android:color="#08000000"/> <padding android:bottom="4px" android:left="4px" android:right="4px" android:top="4px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#09000000"/> <padding android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#10000000"/> <padding android:bottom="2px" android:left="2px" android:right="2px" android:top="2px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#11000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#12000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#13000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#14000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#15000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> <item> <shape android:shape="oval"> <solid android:color="#16000000"/> <padding android:bottom="1px" android:left="1px" android:right="1px" android:top="1px" /> </shape> </item> </layer-list> </item> <!-- Blue button --> <item> <shape android:shape="oval"> <solid android:color="#03A9F4"/> </shape> </item> </layer-list> </item></selector>

這樣就能實現通用平台的陰影效果了，還有一點不要被迷惑了，support-v4里面有個ViewCompat.setElevation(iv, 2.0f);方法，試驗證明是沒用的。

更多的學習大家可以參考API DEMO的ShadowCardDrag和ShadowCardStack兩個Demo。

最后來看看實現的效果圖：

第一個是使用的.9背景圖片，也就是之前提到的屬性，第二個和第三個是使用的layer-list，最后一個是使用的elevation屬性。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 android shape實現陰影或模糊邊效果 Android 按鍵按下實現陰影效果 iOS中的陰影效果 android中給TextView或者Button的文字添加陰影效果 Qt 窗口陰影效果的實現 CSS實現文字陰影的效果 android開發(46) 使用 textview實現文字的陰影效果，浮雕效果 React Native在Android上添加陰影效果 Android TextView 顯示文字陰影效果使用純 CSS 實現滾動陰影效果