Android中你也許不知道的線性佈局Layout_weight屬性權重比例分配原理
也許你正在使用這個屬性Layout_weight權重,沒錯就是它,很多人問這有什麼可講的,不就是按照那樣用嗎?其實任何一東西的存在都有其原因。仔細研究你會有不同的感受,當然,肯定也會有很多大神知道,小菜鳥就班門弄斧了,但是對於Android初學者來說,你不妨看看,廢話不多說,直接上...
權重Layout_weight是Android中線性佈局特有的屬性,有時候我們為了讓排在一行的控制元件平均或者按照一定比例的螢幕寬度擺放在螢幕上,但是你知道它是怎麼分配寬度的嗎?可能你的權重一直都是1,一直都是相同比例,你可能理所應當認為這就是按照螢幕寬度比例分配,或者你一直都是以width為0dp和按照權重比例使用,你知道為什麼要這樣使用嗎?
就一句話:在Android中,權重是表示按比例分配剩餘的佔有螢幕的寬度或者高度,很多人會問什麼叫螢幕的剩餘寬度呢??
螢幕的剩餘寬度就是當系統給每個控制元件分配完初始化寬度(也即是我們在佈局檔案中寫Layout_Width或者Layout_height的值)後螢幕剩餘的寬度。
權重分配螢幕寬度或高度原理:因為系統是這樣分配螢幕空間的,首先給按照每個控制元件初始化的寬度,分配螢幕寬度,等每個控制元件的寬度都分配完後,此時螢幕的剩餘寬度再按權重的比例分配。
好明白這幾個概念後,接著來做一道小學生的數學題,你就明白其中的道理:
例如:有三個TextView,比如初始化的寬度都是10dp;,然後他們的權重比例是1:1:2;(很多人會認為前面兩個TextView寬度之和等於第三個的寬度之和,很容理解1:1嘛,但是事實是這樣的嗎)假設螢幕寬度是70dp;
系統首先會給初始化的寬度分配寬度(每個10dp,佔用了30dp,還剩下40dp),,然後這剩下的40dp按照1:2比例分配寬度,第一個TextView再分得10dp,第二個TextView再分得10dp,第三個分得20dp,最終第一個TextView寬度為:20dp,第二個為20dp,第三個為30dp;
原理圖如下:
最終結果表明:(20+20):30=4:3而不是1:1所以最終會發現第三個TextView寬度會稍微比前兩個之和短一點
最終建議:在使用權重的時候,特別是在權重比例不一致的時候,建議把控制元件的初始化寬度設為0dp,因為在系統分配寬度時,給每個控制元件分配初始化寬度都為0dp,最終剩下的還是整個螢幕寬度,然後整個螢幕寬度再按比例分配,這就是完美的按比例分配了。
執行程式碼:<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:padding="10dp"
>
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_weight="1"
android:gravity="center"
android:textColor="#FFF"
android:background="#FF0000"
android:text="第一個" />
<TextView
android:id="@+id/textView2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:layout_weight="1"
android:background="#F8FF00"
android:textColor="#FFF"
android:text="第二個" />
<TextView
android:id="@+id/textView3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center"
android:textColor="#FFF"
android:background="#0000FF"
android:layout_weight="2"
android:text="第三個" />
</LinearLayout>
執行結果: