寫了那麼多Android布局,你知道elevation屬性嗎

來源:互聯網
上載者:User

標籤: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屬性嗎

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.