Android教程網
  1. 首頁
  2. Android 技術
  3. Android 手機
  4. Android 系統教程
  5. Android 游戲
 Android教程網 >> Android技術 >> 關於Android編程 >> 我的Android進階之旅------)關於android:layout_weight屬性的詳細解析

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

編輯:關於Android編程

關於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代碼如下:<喎?/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>
  1. 上一頁:
  2. 下一頁:
熱門文章
閱讀排行版
Copyright © Android教程網 All Rights Reserved