Android知識點剖析系列：深入瞭解layout_weight屬性

標籤：

前言

 　　Android中layout_weight這個屬性對於經常搗鼓UI的我們來說，肯定不會陌生。但是我們在真正使用這個屬性時，經常會出現一些莫名奇妙的布局效果；如果僅僅知其然而不知其所以然，一些意外的布局效果一定讓我們頗為頭疼。在本文中，將對layout_weight這個屬性詳細剖析。 本文 從代碼講起：  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="vertical">    <Button         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button1"        />    <Button         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button2"        />    <Button         android:layout_width="match_parent"        android:layout_height="wrap_content"        android:text="button3"        /></LinearLayout>    我們可以發現這三個button並沒有將整個螢幕佔據，而是根據內容適配大小。 我們在button2裡面添加一個屬性  android:layout_weight="1" ，發現布局變成這樣了：   我們發現這次螢幕被三個button佔據了，而且第一個和第三個button還是保持與內容適配大小，而第二個button而佔據了剩餘螢幕空間。 我們對上面的情況進行講解： 1、我們只有在button2使用了layout_weight屬性，並賦值為1；但是button1和button2並沒有使用這個屬性，根據API可以知道，他們的layout_weight屬性等於0。 2、LinearLayout如果顯式包含layout_weight屬性時，會measure兩次；第一次將正常計算三個button的寬高，第二次將結合layout_weight的值分配剩餘的空間。 　　通俗點來總結：Android系統先按照你設定的3個Button高度Layout_height=wrap_content,給你分配好他們3個的高度，然後會把剩下來的螢幕空間全部賦給Button2,因為只有他的權重值是1，這也是為什麼Button2佔了那麼大的一塊空間。 這麼講解大概大家也對layout_weight屬性有了比較清晰的認識了吧。 再來看看下面的代碼：  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:orientation="horizontal">    <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="1"        android:text="1"        android:background="#ff0000"        />    <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="2"        android:text="2"        android:background="#00ff00"        />    <TextView         android:layout_width="wrap_content"        android:layout_height="wrap_content"        android:layout_weight="3"        android:text="3"        android:background="#0000ff"        /></LinearLayout> 在我們對這三個TextView的layout_width都設定為wrap_content時，我們會得到以下布局：   這個布局很符合我們上面的分析： 系統先給3個TextView分配他們的寬度值wrap_content（寬度足以包含他們的內容1,2,3即可），然後會把剩下來的螢幕空間按照1:2:3的比列分配給3個textview，所以就出現了上面的映像。 如果我們將上面三個TextView的layout_width都設定為match_parent，分別給三個TextView設定他們的Layout_weight為1、2、2的話，會出現一個相反的布局效果：   我們大概可以分辨出，他們所佔的寬的比例為3:1:1。這樣就出現一個另外一個效果：weight權重越大，控制項所佔的空間越小。 所以網上就有人這麼總結： 在layout_width設定為match_parent的時候，layout_weight所代表的是你的控制項要優先儘可能的大,但這個大是有限度的，即match_parent。在layout_width設定為wrap_content的時候，layout_weight所代表的是你的控制項要優先儘可能的小,但這個大是有限度的，即wrap_content。 這是對於這種僅僅記住怎麼用而不是為什麼這麼用的做法，作為一個有追求有理想的程式員是不會苟同的，因為說不定哪天，咱們又忘了口訣，所以我們要從原理上理解為啥是這個樣子的。   依照上面的理解，這個現象的出現在於layout_width="fill_parent"這個原因導致的；開始下面的分析： 1、系統先給3個TextView分配他們所要的寬度match_parent，也就指定了每一個TextView都是填滿他的父控制項，這裡就是整個螢幕的寬度。 2、由於如果包含layout_width這個屬性，LinearLayout將會進行第二次measure，此時將會根據權重分配剩餘的空間，在這裡剩餘空間=1個parent_width-3個parent_width=-2個parent_width (parent_width指的是螢幕寬度 )。 3、第一個TextView的實際所佔寬度=parent_width（match_parent的寬度） + 1/5(他所佔剩餘空間的權重比列） * 剩餘空間大小（-2 parent_width）=3/5parent_width 同理第二個TextView的實際所佔寬度=parent_width + 2/5*(-2parent_width)=1/5parent_width; 第三個TextView的實際所佔寬度=parent_width + 2/5*(-2parent_width)=1/5parent_width； 由此我們就可以知道為什麼是按3:1:1的這個比例顯示了。   如果我們將Layout_weight為1、2、3呢？第三個TextView直接消失了有木有！   我們可以按照上面的方法算一次就得出答案了： 1、系統先給3個TextView分配他們所要的寬度match_parent，也就指定了每一個TextView都是填滿他的父控制項，這裡就是整個螢幕的寬度。 2、由於如果包含layout_width這個屬性，LinearLayout將會進行第二次measure，此時將會根據權重分配剩餘的空間，在這裡剩餘空間=1個parent_width-3個parent_width=-2個parent_width (parent_width指的是螢幕寬度 )。 3、第一個TextView的實際所佔寬度=parent_width（match_parent的寬度） + 1/6(他所佔剩餘空間的權重比列） * 剩餘空間大小（-2 parent_width）=2/3parent_width 同理第二個TextView的實際所佔寬度=parent_width + 2/6*(-2parent_width)=1/3parent_width; 第三個TextView的實際所佔寬度=parent_width + 3/6*(-2parent_width)=0parent_width； 所以三個TextView的顯示比例應該為2:1:0，第三個TextView就消失了，因為根據計算，都沒有空間可以分配給他了。 看到這裡大家都清楚瞭解了這個計算原理，相信對於設計UI布局有所協助，對於match_parent和wrap_content混合使用的UI布局也可以通過這個方法進行計算設計。   接下來順帶著也給大家說另外一個跟Layout_weight相關的屬性：weightSum 顧名思義，就是制定權重的總值，如果不指定weightSum，系統會將各個Layout_weight的值相加得出的總數作為權重總值，當然我們也可以在這裡顯式指定，這裡也方便我們布局所用，我就在下面舉一個關於weightSum屬性的應用：  參見這樣一個效果，一個總是佔據一半螢幕的Button   其實XML代碼很簡單:  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    android:layout_width="match_parent"    android:layout_height="match_parent"    android:gravity="center"    android:weightSum="2"    android:orientation="horizontal">    <Button         android:layout_width="0dp"        android:layout_height="wrap_content"        android:layout_weight="1"        android:text="button"        /></LinearLayout> 　　開發文檔中對layout_weight屬性的有如下描述：定義weight總和的最大值。如果未指定該值，以所有子視圖的layout_weight屬性的累加值作為總和的最大值。一個典型的案例是：通過指定子視圖的layout_weight屬性為0.5，並設定LinearLayout的weightSum屬性為1.0，實現子視圖佔據可用寬度的50。 　　從上面的xml中我們可以知道我們設定了weightSum為2，而對於button設定了layout_width為0且layout_weight為1（也就是weightSum的一半），我們就可以得出上面一個效果，使得Button保持佔據螢幕的一半，而不用通過寫入程式碼去實現。 

結伴旅遊,一個免費的交友網站：www.jieberu.com

推推族，免費得門票，遊景區：www.tuituizu.com

Android知識點剖析系列：深入瞭解layout_weight屬性