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保持占據屏幕的一半，而不用通過硬編碼去實現。