android:layout_weight屬性詳解

轉自:http://blog.sina.com.cn/s/blog_7cd0c0a80100zmfe.html

在android開發中LinearLayout很常用,LinearLayout的內控件的android:layout_weight在某些場景顯得非常重要,比如我們需要按比例顯示。android並沒用提供table這樣的控件,雖然有TableLayout,但是它並非是我們想象中的像html裏面的table那麼好用,我們常用ListView實現table的效果,但是列對齊確比較麻煩,現在用LinearLayout及屬性android:layout_weight能很好地解決。下面我們共同體驗下layout_weight這個屬性。

  一、LinearLayout內的控件的layout_width設置爲"wrap_content",請看一下xml配置:

 <LinearLayout

      android:orientation="horizontal"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      android:layout_weight="1"

     >

      <TextView

          android:layout_width="wrap_content"

          android:layout_height="fill_parent"

          android:layout_weight="1"

          android:background="#aa0000"

          android:gravity="center"

          android:text="1"/>

      <TextView

          android:layout_width="wrap_content"

          android:layout_height="fill_parent"

          android:layout_weight="2"

          android:background="#00aa00"

          android:gravity="center"

          android:text="1"/>

      <TextView

          android:layout_width="wrap_content"

          android:layout_height="fill_parent"

          android:layout_weight="3"

          android:background="#0000aa"

          android:gravity="center"

          android:text="1"/>

  </LinearLayout>

 效果如下:

可以看到這三個TextView是按照1:2:3的比例進行顯示的,這樣看來似乎可以實現按照比例顯示了,但是有個問題,如果TextView內的文本長度一同那麼較長文本的TextView會寬度會有所增加,見下面配置及效果:

配置:

 <LinearLayout

      android:orientation="horizontal"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      android:layout_weight="1">

      <TextView

          android:layout_width="wrap_content"

          android:layout_height="fill_parent"

          android:layout_weight="1"

          android:background="#aa0000"

          android:gravity="center"

          android:text="1111111111111111111111111111111111111111111"/>

      <TextView

          android:layout_width="wrap_content"

          android:layout_height="fill_parent"

          android:layout_weight="2"

          android:background="#00aa00"

          android:gravity="center"

          android:text="2"/>

      <TextView

          android:layout_width="wrap_content"

          android:layout_height="fill_parent"

          android:layout_weight="3"

          android:background="#0000aa"

          android:gravity="center"

          android:text="3"/>

  </LinearLayout>

效果:

這樣看來我們所需要的按比例又無法實現了,經過滿天地google終於找到了解決方案,就是設置layout_width設置爲"wrap_content"。配置及效果見下:

 <LinearLayout

      android:orientation="horizontal"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      android:layout_weight="1">

      <TextView

          android:layout_width="0dp"

          android:layout_height="fill_parent"

          android:layout_weight="1"

          android:background="#aa0000"

          android:gravity="center"

          android:text="1111111111111111111111111111111111111111111"/>

      <TextView

          android:layout_width="0dp"

          android:layout_height="fill_parent"

          android:layout_weight="2"

          android:background="#00aa00"

          android:gravity="center"

          android:text="2"/>

      <TextView

          android:layout_width="0dp"

          android:layout_height="fill_parent"

          android:layout_weight="3"

          android:background="#0000aa"

          android:gravity="center"

          android:text="3"/>

  </LinearLayout>

效果:

這樣終於達到我們的按比例顯示的效果了,感覺很是奇怪,android開發框架的大佬們有時候設計確實有點匪夷所思。

  二、LinearLayout內的控件的layout_width設置爲"fill_parent",請看一下xml配置:

 <LinearLayout

      android:orientation="horizontal"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      android:layout_weight="1">

      <TextView

          android:layout_width="fill_parent"

          android:layout_height="fill_parent"

          android:layout_weight="1"

          android:background="#aa0000"

          android:gravity="center"

          android:text="1"/>

      <TextView

          android:layout_width="fill_parent"

          android:layout_height="fill_parent"

          android:layout_weight="2"

          android:background="#00aa00"

          android:gravity="center"

          android:text="2"/>

  </LinearLayout>


效果如下:

奇怪吧,整個寬度平分3塊,第一個TextView佔了兩塊,這樣看來weight值越小的優先級越大。只有兩個TextView似乎看出些道理,那麼讓我們看看三個是什麼效果:

<LinearLayout

      android:orientation="horizontal"

      android:layout_width="fill_parent"

      android:layout_height="fill_parent"

      android:layout_weight="1">

      <TextView

          android:layout_width="fill_parent"

          android:layout_height="fill_parent"

          android:layout_weight="1"

          android:background="#aa0000"

          android:gravity="center"

          android:text="1"/>

      <TextView

          android:layout_width="fill_parent"

          android:layout_height="fill_parent"

          android:layout_weight="2"

          android:background="#00aa00"

          android:gravity="center"

          android:text="2"/>

      <TextView

          android:layout_width="fill_parent"

          android:layout_height="fill_parent"

          android:layout_weight="3"

          android:background="#0000aa"

          android:gravity="center"

          android:text="3"/>

  </LinearLayout>

效果:

什麼意思?第三個TextView丟掉了,很是奇怪,讓我們再試一個,把weight分別改爲2,3,4的看看效果:


雖然這個android:layout_weight屬性很怪異,但幸運的是我們達到了目標:

  按比例顯示LinearLayout內各個子控件,需設置android:layout_width="0dp",如果爲豎直方向的設置android:layout_height="0dp"。在這種情況下某子個控件佔用LinearLayout的比例爲:本控件weight值/ LinearLayout內所有控件的weight值的和。

計算公式爲:
linearLayout中包含有weight的child時,linearLayout會measure兩次:
設屏幕寬度爲X
第一次:textview1的measuredWidth爲X,textview2,textview3也爲X (因爲用了weight,所以linearLayout每次measure child時不考慮前一個已經佔用的大小),total_width爲3X
第二次:計算delta=x-total_width=-2x,
然後會將
textview1的寬度設爲x+delta*1/6=2/3x, 
textview2的寬度爲 x+delta*1/3=1/3x
textview3的寬度爲 x+delta*1/3=0x (即第三個textview3不顯示)

同理:
textview1的寬度設爲x+delta*2/9=5/9x, 
textview2的寬度爲 x+delta*3/9=3/9x
textview3的寬度爲 x+delta*4/9=1/9x 

如果需要將textview1:textview2:textview3 = 1:2:3(實際佔據屏幕的比例) 
可以這麼算:1/6:2/6:3/6 --> 分母-分子-->5:4:3(即 layout_weight值)

發佈了10 篇原創文章 · 獲贊 0 · 訪問量 4萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章