標籤:XML tps 順序 元素 陰影 back enc nal www
轉自: https://www.jianshu.com/p/c1d17a39bc09
一、elevation
我們知道,在RelativeLayout裡面,或者更加純淨的FrameLayout裡面,後寫的View會覆蓋之前寫的View上面。
比如:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:layout_width="match_parent" android:layout_height="300dp" android:background="#ff0000" > <View android:id="@+id/vGeeen" android:layout_width="200dp" android:layout_height="200dp" android:background="#00ff00"/> <TextView android:id="@+id/vBlue" android:layout_width="100dp" android:layout_height="100dp" android:background="#0000ff"/> </RelativeLayout></RelativeLayout>
效果
image.png
嗯,這很正常,vBlue現在vGeeen之上,一切很正常。
這時候,主角elevation登場。
我們稍加改動,給vBlue加上一行代碼:android:elevation="1dp"
即現在代碼變成:
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <RelativeLayout android:layout_width="match_parent" android:layout_height="300dp" android:background="#ff0000" > <View android:id="@+id/vGeeen" android:layout_width="200dp" android:layout_height="200dp" android:elevation="1dp" android:background="#00ff00"/> <TextView android:id="@+id/vBlue" android:layout_width="100dp" android:layout_height="100dp" android:background="#0000ff"/> </RelativeLayout></RelativeLayout>
在看看現在的效果:
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",看看會產生什麼效果
image.png
設定
<?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" > <TextView android:layout_width="100dp" android:layout_height="100dp" android:background="#000000" android:layout_centerInParent="true" android:elevation="30dp" /></RelativeLayout>
通過已經很說明了情況。
二、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中的權重的作用。
寫了那麼多Android布局,你知道elevation屬性嗎