android:layout_weight屬性詳解

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

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

 
<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>

 效果以下:web

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

配置:google

 
 <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>

效果:spa

這樣看來咱們所須要的按比例又沒法實現了,通過滿天地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>

效果:code

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

  2、LinearLayout內的控件的layout_width設置爲"fill_parent",請看一下xml配置: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值的和。

相關文章
相關標籤/搜索