2. 程式人生 > >在Android中實現陰影效果

在Android中實現陰影效果

阿新 • • 發佈：2017-05-27
sta 技術 wid 語言 mat floating 大表 ado sch

在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屬性就可以了。比如我們想讓一張圖片顯示陰影：

1
2
3
4
5
6
7
 
<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方案，如果我們需要一張矩形的陰影效果，則大概應該這麽定義：

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
 
<?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屬性。

在Android中實現陰影效果

相關推薦

在Android中實現陰影效果

sta 技術 wid 語言 mat floating 大表 ado sch 在Android L推出後，Google提出了全新的設計語言：材質設計。其中很重要的一點就是陰影效果的使用，你可以為每一個View設置一個elevation值，相當於除了x、y之外的z值，z值決定

android中實現毛筆效果(View 中畫圖)

方法 繪畫 object android中 validate 滑動 一個 lineto 效果 近期有一個項目設計一個APP實現通過觸摸屏實現毛筆寫字效果。傳統的繪畫板程序直接通過Path的moveTo和LineTo便可實現簡單的線條繪畫程序。然而要達到毛筆的筆鋒效果

Android Textview實現陰影效果

TextView控制元件有一個方法是控制陰影的加入的： mTextView.setShadowLayer(10F, 11F,5F, Color.YELLOW); 第一個引數為模糊半徑，越大越模糊。 第二個引數是陰影離開文字的x橫向距離。 第三個引數是陰影離開文字的Y橫向

Android 按鍵按下實現陰影效果

nal turn view font .cn ges activity rda als final Button btn_gallery=(Button)findViewById(R.id.btn_gallery);btn_gallery.setOnClickListene

刮刮樂實現android中刮牆效果

// 等面積點陣圖 topBitmap = Bitmap.createBitmap(1000, 800, Bitmap.Config.ARGB_8888); Resources res = getResources(); // 將塗層點陣圖載入到塗層畫板 topCanvas = new Can

android中跑馬燈效果的實現

android中常見的跑馬燈效果實現的程式碼以及思路分析 有些童鞋想用TextView實現跑馬燈的效果 , 程式碼如下: <TextView android:layout_width="wrap_content" a

Android中實現雙擊點贊動畫效果

iv_easy_like.getBackground().setAlpha(0); rlLike.setOnTouchListener(new OnDoubleClickListener(new OnDoubleClickListener.DoubleClickCallb

Android探索之旅（第十四篇）Android中實現炫酷效果的Demo（持續收錄中......）

浪起來！使用 drawBitmapMesh 實現模擬水波紋效果 簡書傳送門 三十秒實現QQ首頁動畫特效 BMoveView為RadioGroup新增移動的特

Android中實現波浪球效果

波浪球的效果一直都是想模仿的物件，在最近一段時間裡模仿了這一介面，其實所用知識並不多。 1>波浪的效果是利用三角函式來實現的，在自定義view中建立容量為width的陣列，由y=Asin(Kx+T)+H得到每個x相對應的y值，然後存入數組裡面。 2>利用A

Android中實現類似探探中圖片左右滑動切換效果

      偶然之間發現探探的左右滑動的圖片挺好玩，試著去做了下，再到後來，看到許多大神也推出了同樣仿探探效果的部落格，從頭到尾閱讀下來，寫得通俗易懂，基本上沒什麼問題。於是，實現仿探探效果的想法再次出現在腦海中。那麼，還猶豫什麼，趁熱來一發吧!就這麼愉快地決定了。

Android中實現延遲載入效果

主要是分兩步實現，一是在xml佈局中使用ViewStub控制元件，再在java程式碼中實現。 1） 首先，只要是要將Android頁面中要進行延遲載入，那麼都要將該部分佈局載入到ViewStub中。 <FrameLayoutandroid:layout_width="

android中實現透明懸浮的PopupWindow效果

最近做的android專案中經常用到PopupWindow,今天就來總結一下如何實現透明懸浮的PopupWindow效果，廢話不多說，先上圖和程式碼。 下面是PopupWindow的佈局檔案XML： <?xml version="1.0" encoding="ut

徹底理解 Android 中的陰影

eight 是什麽 tin 角度 閱讀 ron 深入 public 空白 如果我們想創造更好的 Android App，我相信我們需要遵循 Material Design 的設計規範。一般而言，Material Design 是一個包含光線，材質和投影的三維環境。如果我們想

Android中 實現隊列方式處理優先級信息

div fragment als eth lean @override 需要 一個 原理 需求：當界面在處理消息A時，突然接收到消息B，需要立馬顯示B的信息，然後再繼續顯示消息A，或者接收到消息C，再顯示完消息A後再顯示消息C； 原理很簡單 在一個輪詢中，查詢消息列表中的元

在Android中實現一個簡易的Http服務器

.get json data ESS public 瀏覽器 顯示 getmethod blank 最近遇到一個需求需要在App中創建一個Http服務器供供瀏覽器調用,用了下開源的微型Htpp服務器框架:NanoHttpd,項目地址:https://github.com/Na

ajax-簡單參數方法實現陰影效果

abs ces append 簡單 osi fun ready one off 註： 簡單參數 （按照參數的數量和位置傳遞參數） 使用時按照位置、數量傳遞 shadow.js函數//簡單參數實現方式/** slices:陰影* opacity:透明度*

Android中實現短音訊和震動的一些總結

好長時間沒有寫部落格了，因為最近事情比較多。所以好長時間沒有寫部落格了。堅持是一件很辛苦的事情。但還需要努力。。。好了，閒話不扯了。因為最近專案中用到了相應的短音訊和震動的功能，所以這裡總結一下相應的內容！ 本文知識點: 音訊中的一些知識和常用的API介紹；

Android中實現藍芽錄放音

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

Android中實現震動的方法

實現手機震動其實很簡單，手機震動使用是Vibrator類，然後震動也是需要許可權的，在使用之前在AndroidManifest.xml檔案中新增 <uses-permission android:name="android.permission.VIBRATE"/>

在android中實現CardView

android在 5.0中添加了陰影效果主要通過CardView來實現，在低版本中通過android.support.v7.widget.CardView來實現。 <RelativeLayout xmlns:android="http://schemas.android.com/a