写了那么多Android布局,你知道elevation属性吗

引言:新建那么多xml,写了那么多布局文件,少年,你写过elevation属性吗?

一、elevation

我们知道,在RelativeLayout里面,或者更加纯净的FrameLayout里面,后写的View会覆盖之前写的View上面。

比如:



    
        

        
    

效果


写了那么多Android布局,你知道elevation属性吗_第1张图片
image.png

嗯,这很正常,vBlue现在vGeeen之上,一切很正常。
这时候,主角elevation登场。

我们稍加改动,给vBlue加上一行代码:android:elevation="1dp"
即现在代码变成:



    
        

        
    

在看看现在的效果:

写了那么多Android布局,你知道elevation属性吗_第2张图片
image.png

我的mBlue哪去啦,说好的最后出场的都是主角呢,mBlue居然不见啦!

我们知道,在css里面,我们经常会计算权重,在刚刚的实践里面,加了mGreen加了android:elevation="1dp",相当于在这些View里面他的权重提高了,升官啦!

在android的世界里面,elevation起到了权重的作用,而且,每一个View的默认权重都是0dp,但在Google说他是一个阴影的作用,但是实际上由于MD设计的高度Z造成的,后面我会说到

如果我们把上面的mGreen的把elevation设置为android:elevation="0dp",那么一切照旧,最后出场的mBlue依然会覆盖着mGreen。

原来,这个elevation是2014 年,Google 推出了Material Design新的 Android 支持库 v7之后才有的产物(但是过了这么久我都没用过elevation属性,惭愧)

那为什么elevation可以起到类似权重的作用呢?
因为,在MD设计里面,视图可以投射阴影, elevation 值决定了阴影的大小和顺序。要设定 elevation 值

我们来新建一个布局,给TextView设置android:elevation="30dp",看看会产生什么效果

写了那么多Android布局,你知道elevation属性吗_第3张图片
image.png

设置



    


通过上图已经很说明了情况。

二、Material Design 之高度视图高度 Z

在Material Design主题当中给UI元素引入了高度的概念,视图的高度由属性Z来表示,决定了阴影的视觉效果,Z越大,阴影就越大且越柔和。但是Z值并不会影响视图的大小。

视图的Z值由两个分量表示:

  • 1、Elevation:静态的分量
  • 2、Translation:用于动画的动态的分量

Z值的计算公式为:
Z=elevation+translationZ

elevation属性和translationZ是好朋友。

具体我们就不在这里细说了,具体了解可以查阅Material Design中的Elevation和shadows,写的挺好的。

三、缘从何时起

那么,这个elevation属性我是如何发现的。
一切都要从CardView说起。

我们经常会在CardView里面设置类似app:cardElevation="5dp"之类的代码。
然后就是我发现处于CardView底部一个View死活不出来,app:cardElevation就是
CardView独有的elevation,当然了,CardView也是可以设置elevation的。

小结一下:

MD设计中,视图有高度的概念,用Z来表示,Z受到Elevation和Translation两个量控制,因为这个高度的概念,导致了elevation属性产生了类似css中的权重的作用。

END,谢谢阅读。

你可能感兴趣的:(写了那么多Android布局,你知道elevation属性吗)