5.0 蛋疼的阴影

2018-09-19  本文已影响58人  前行的乌龟

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>

参考资料:

上一篇下一篇

猜你喜欢

热点阅读