ps:為啥寫著篇文章,就是因為 5.0 上陰影以前用起來總是出問題,所以今天徹底給他搞搞
1. 陰影的 2個屬性
在 5.0 以上系統(tǒng) ,elevation 和 translationZ 都能實現(xiàn) Z 軸陰影,先來看看例子:
<!--translationZ -->
<LinearLayout
android:id="@+id/view_02"
android:layout_width="260dp"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:background="@android:color/white"
android:orientation="vertical"
android:padding="10dp"
android:translationZ="10px"
app:layout_constraintBottom_toTopOf="@id/view_03"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/btn01">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="center_horizontal"
android:scaleType="centerCrop"
android:text="縮放點擊效果"/>
<ImageView
android:layout_width="260dp"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:scaleType="centerCrop"
android:src="@drawable/ic_dog"/>
</LinearLayout>
<!--elevation -->
<android.support.v7.widget.AppCompatImageView
android:id="@+id/view_03"
android:layout_width="260dp"
android:layout_height="150dp"
android:layout_marginTop="10dp"
android:background="#FFFFFFFF"
android:elevation="10px"
android:padding="10px"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="@id/view_02"
app:srcCompat="@drawable/ic_dog"/>
實際效果看起來,elevation 比 translationZ 效果更顯眼一點,Z 軸高度顯得更高,陰影看起來更多,肯能圖看不出來,但是大家真機試一下,多少還是能看出一點區(qū)別來的
然后我們來說道說道,在 Android API21,新添加了一個屬性:android:elevation,用以在xml定義View的深度(高度),也即z方向的值。
除了elevation之外,類似于已有的 translationX、translationY,也相對應(yīng)地新增了一個translationZ,用以在屬性動畫中動態(tài)改變Z值(使用View.setTranslationZ())
Z = elevation + translationZ

陰影會影響 View 相互阻擋順序
擁有更大Z值的View會擋住Z值比較小的View——即更大Z值的View會在最上層。
譬如,在正常的FrameLayout中,子View的繪制順序是從上到下,也就是說,最后一個子View會顯示到最上面,如果位置跟前面的View有重合,則會蓋住前面的View。
我們給
2. 陰影不顯示
我們設(shè)置了 elevation 和 translationZ 之后,為啥陰影還是出不來呢,因為我們必須設(shè)置 background 才行,background 必須給顏色,不能是圖片資源,而且顏色還必須重才行,顏色越淺,陰影越不明顯,MD ~ 蛋疼不,一般這里沒什么特殊需求的話用純白色 #FFFFFFFF
3. 版本兼容
API 21 這個坎是邁不過去了,要想在 4.X 上實現(xiàn)類似效果,請自行用 shape 畫陰影來模仿吧。我們既是使用 V7 兼容包里面的兼容控件設(shè)置 elevation 和 translationZ ,雖然能跑起來,但是沒效果
并且代碼上涉及到 elevation 和 translationZ 的部分,需要強制判斷版本
4. Button 的問題
API > 21, Button 設(shè)置 elevation 沒效果,是因為默認主題里,已經(jīng)有了elevation設(shè)置,所以再設(shè)置就沒用了
- 可以用 android:stateListAnimator=”@null” 把默認動畫置空,然后再設(shè)置elevation,還要設(shè)置背景顏色
- 或者給 Button 一個樣式 style=”@style/Widget.AppCompat.Button.Borderless”,再設(shè)置 elevation和背景色
<Button
style="@style/Widget.AppCompat.Button.Borderless"
android:elevation="10px"
android:background="#FFFFFFFF"
android:layout_width="match_parent"
android:layout_height="match_parent" />
Borderless 樣式里面已經(jīng)把 stateListAnimator = null 了
<!-- Borderless ink button -->
<style name="Widget.Material.Button.Borderless">
<item name="background">@drawable/btn_borderless_material</item>
<item name="stateListAnimator">@null</item>
</style>