5.0 蛋疼的阴影

ps：为啥写着篇文章，就是因为 5.0 上阴影以前用起来总是出问题，所以今天彻底给他搞搞

1. 阴影的 2个属性

在 5.0 以上系统 ，elevation 和 translationZ 都能实现 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 轴高度显得更高，阴影看起来更多，肯能图看不出来，但是大家真机试一下，多少还是能看出一点区别来的

然后我们来说道说道，在 Android API21，新添加了一个属性：android:elevation，用以在xml定义View的深度(高度)，也即z方向的值。

除了elevation之外，类似于已有的 translationX、translationY，也相对应地新增了一个translationZ，用以在属性动画中动态改变Z值（使用View.setTranslationZ()）

Z = elevation + translationZ

阴影会影响 View 相互阻挡顺序

拥有更大Z值的View会挡住Z值比较小的View——即更大Z值的View会在最上层。

譬如，在正常的FrameLayout中，子View的绘制顺序是从上到下，也就是说，最后一个子View会显示到最上面，如果位置跟前面的View有重合，则会盖住前面的View。

我们给

2. 阴影不显示

我们设置了 elevation 和 translationZ 之后，为啥阴影还是出不来呢，因为我们必须设置 background 才行，background 必须给颜色，不能是图片资源，而且颜色还必须重才行，颜色越浅，阴影越不明显，MD ~ 蛋疼不，一般这里没什么特殊需求的话用纯白色 #FFFFFFFF

3. 版本兼容

API 21 这个坎是迈不过去了，要想在 4.X 上实现类似效果，请自行用 shape 画阴影来模仿吧。我们既是使用 V7 兼容包里面的兼容控件设置 elevation 和 translationZ ，虽然能跑起来，但是没效果

并且代码上涉及到 elevation 和 translationZ 的部分，需要强制判断版本

4. Button 的问题

API > 21, Button 设置 elevation 没效果，是因为默认主题里，已经有了elevation设置，所以再设置就没用了

1. 可以用 android:stateListAnimator=”@null” 把默认动画置空，然后再设置elevation，还要设置背景颜色
2. 或者给 Button 一个样式 style=”@style/Widget.AppCompat.Button.Borderless”，再设置 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 样式里面已经把 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>

---

参考资料：

• Button设置elevation阴影
• android5.x中的阴影效果elevation和translationZ