我的Android進階之旅------)關於android:layout_weight屬性的詳細解析

關於android:layout_weight屬性的詳細解析

效果一

圖1

上面的效果圖中三個文本框的寬度比為 1:2:3

圖2

代碼如下所示：

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
    <textview android:id="@+id/textView1" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="1">

    <textview android:id="@+id/textView2" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="2" android:background="#4400ff00" android:gravity="center" android:text="2">

    <textview android:id="@+id/textView3" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="3" android:background="#440000ff" android:gravity="center" android:text="3">

</textview></textview></textview></linearlayout>
</code>

三個TextView的layout_width都設置為0dp，layout_weight的值分別為1:2:3，所以展示的比例也為1:2:3

---

效果二

圖3

圖4

看到上面兩個圖片可以發現:
圖3中的第一個文本框與第二、第三個文本框是不對齊的
圖4中的第一個文本框與第二、第三個文本框是對齊的

圖3的布局代碼

下面來看圖3的布局代碼，如下所示

圖5

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent">
    <textview android:id="@+id/textView1" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">

    <textview android:id="@+id/textView2" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="2" android:background="#4400ff00" android:gravity="center" android:text="2">

    <textview android:id="@+id/textView3" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="3" android:background="#440000ff" android:gravity="center" android:text="3">

</textview></textview></textview></linearlayout>
</code>

圖4的布局代碼

下面來看圖4的布局代碼，如下所示

圖6

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:baselinealigned="false">
    <textview android:id="@+id/textView1" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">

    <textview android:id="@+id/textView2" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="2" android:background="#4400ff00" android:gravity="center" android:text="2">

    <textview android:id="@+id/textView3" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="3" android:background="#440000ff" android:gravity="center" android:text="3">

</textview></textview></textview></linearlayout>
</code>

可以發現圖3和圖4的布局文件的差別是在父布局LinearLayout中設置了android:baselineAligned=”false”

---

效果三

圖7

圖7代碼

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:baselinealigned="false">
    <textview android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">

    <textview android:id="@+id/textView2" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="2" android:background="#4400ff00" android:gravity="center" android:text="2">

    <textview android:id="@+id/textView3" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="3" android:background="#440000ff" android:gravity="center" android:text="3">

</textview></textview></textview></linearlayout>
</code>

圖8

圖8代碼

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:baselinealigned="false">
    <textview android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">

    <textview android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="48dp" android:layout_weight="2" android:background="#4400ff00" android:gravity="center" android:text="2">

    <textview android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="48dp" android:layout_weight="3" android:background="#440000ff" android:gravity="center" android:text="3">

</textview></textview></textview></linearlayout>
</code>

圖7和圖8看起來好像效果一樣。

圖7的代碼只是設置textView1的layout_width為“wrap_content”，textView2、textView3的layout_width都為“0dp” 圖8的代碼只是設置textView1、textView2、textView3的layout_width都為“wrap_content”

---

效果四

圖9

圖9代碼如下：

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:baselinealigned="false">
    <textview android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">

    <textview android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="48dp" android:layout_weight="2" android:background="#4400ff00" android:gravity="center" android:text="2">

    <textview android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="48dp" android:layout_weight="3" android:background="#440000ff" android:gravity="center" android:text="3">

</textview></textview></textview></linearlayout>
</code>

圖10

圖10代碼如下：<喎?http://www.Bkjia.com/kf/ware/vc/" target="_blank" class="keylink">vcD4NCjxwcmUgY2xhc3M9"brush:java;"> <code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E--> <linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:baselinealigned="false"> <textview android:id="@+id/textView1" android:layout_width="match_parent" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111"> <textview android:id="@+id/textView2" android:layout_width="match_parent" android:layout_height="48dp" android:layout_weight="2" android:background="#4400ff00" android:gravity="center" android:text="2"> <textview android:id="@+id/textView3" android:layout_width="match_parent" android:layout_height="48dp" android:layout_weight="2" android:background="#440000ff" android:gravity="center" android:text="3"> </textview></textview></textview></linearlayout> </code>

圖9和圖10的區別是：
圖9中沒有展示出TextView3，而圖10中展示出TextView3

而圖9和圖10的代碼區別只是TextView3的 android:layout_weight在圖9中為3，在圖10中為2

下面我們來弄清楚一下到底為什麼會這樣：

圖11

如圖11所示：假設外層的父布局LinearLayout的width為480dp,

參考：布局首先按照控件聲明的尺寸進行分配，然後再將剩下的尺寸按weight進行分配。

按上面的參考來計算一下三個TextView的具體width。

第一步：計算剩余的尺寸
由於三個TextView的width都設置為match_parent，即都是480dp,那麼剩余的尺寸為
restWidth=480-480*3=-480*2

第二步：計算TextView1的尺寸

參考：控件的最終寬度=控件聲明的寬度+父控件剩余的寬度*所占的比例

分析 如圖9：
按上面的參考來計算一下三個TextView的具體width。
即：TextView1的width1如下所示：
width1=480+（-480*2）（1/6）=480（4/6）
即：TextView2的width2如下所示：
width2=480+（-480*2）（2/6）=480（2/6）
即：TextView3的width3如下所示：
width3=480+（-480*2）（3/6）=480（0/6）
所以width1:width2:width3=2:1:0 如圖9所示

分析 如圖10：
按上面的參考來計算一下三個TextView的具體width。
即：TextView1的width1如下所示：
width1=480+（-480*2）（1/5）=480（3/5）
即：TextView2的width2如下所示：
width2=480+（-480*2）（2/5）=480（1/5）
即：TextView3的width3如下所示：
width3=480+（-480*2）（2/5）=480（1/5）
所以width1:width2:width3=3:1:1 如圖10所示

效果五

圖12

有時候需要展示如圖12所示的效果：子控件占據父布局寬度的1/2或者1/3等要求的時候，就需要設置父布局android:weightSum參數

圖12的代碼如下所示：

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:weightsum="2">
    <textview android:id="@+id/textView1" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">
</textview></linearlayout>
</code>

圖12

當父布局不設置android:weightSum參數的時候如下圖所示：

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<linearlayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="horizontal" android:weightsum="3">
    <textview android:id="@+id/textView1" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">
</textview></linearlayout>
</code>

分析一下圖12：
假設外層的父布局LinearLayout的width為480dp,

參考：布局首先按照控件聲明的尺寸進行分配，然後再將剩下的尺寸按weight進行分配。

按上面的參考來計算一下三個TextView的具體width。

第一步：計算剩余的尺寸
由於三個TextView的width都設置為match_parent，即都是480dp,那麼剩余的尺寸為
restWidth=480-0=480

第二步：計算TextView1的尺寸

參考：控件的最終寬度=控件聲明的寬度+父控件剩余的寬度*(weight/weightSum)

TextView的width=0+480*(1/3)=160

所以TextView的寬度為父布局控件LinearLayout的1/3

圖13

圖13的代碼如下：

<code class=" hljs xml"><!--{cke_protected}{C}%3C!%2D%2D%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%2D%2D%3E-->
<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:id="@+id/textView1" android:layout_width="0dp" android:layout_height="48dp" android:layout_weight="1" android:background="#44ff0000" android:gravity="center" android:text="111111111111111111">
</textview></linearlayout>
</code>