5.0 蛋疼的陰影

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è)置就沒用了

  1. 可以用 android:stateListAnimator=”@null” 把默認動畫置空,然后再設(shè)置elevation,還要設(shè)置背景顏色
  2. 或者給 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>

參考資料:

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • ¥開啟¥ 【iAPP實現(xiàn)進入界面執(zhí)行逐一顯】 〖2017-08-25 15:22:14〗 《//首先開一個線程,因...
    小菜c閱讀 7,317評論 0 17
  • 當你的設(shè)計師要求你在某個 View 上增加陰影效果,那你只需要認真閱讀本文,陰影的問題就不再是問題。 一、前言 設(shè)...
    承香墨影閱讀 2,876評論 2 29
  • 一、CSS入門 1、css選擇器 選擇器的作用是“用于確定(選定)要進行樣式設(shè)定的標簽(元素)”。 有若干種形式的...
    寵辱不驚丶歲月靜好閱讀 1,719評論 0 6
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML標準。 注意:講述HT...
    kismetajun閱讀 28,797評論 1 45
  • 1、屬性選擇器:id選擇器 # 通過id 來選擇類名選擇器 . 通過類名來選擇屬性選擇器 ...
    Yuann閱讀 1,752評論 0 7

友情鏈接更多精彩內(nèi)容