Android+物聯(lián)網(wǎng)培訓(xùn)實(shí)戰(zhàn)教程之權(quán)重

更新時(shí)間:2017-05-29 來(lái)源:黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院瀏覽量:

剖析Android 線性布局中的權(quán)重（layout_weight）

什么是權(quán)重（layout_weight）

通俗地講，權(quán)重（layout_weight）就是對(duì)線性布局指定方向（水平或垂直）上剩余空間分配的一個(gè)規(guī)則。

案例分析

為了便于大家更好地理解權(quán)重（layout_weight），接下來(lái)，通過(guò)幾個(gè)案例來(lái)分析如何使用權(quán)重（layout_weight）對(duì)線性布局中水平方向的剩余空間進(jìn)行分配。

注：以下案例中的測(cè)試手機(jī)分辨率為480*320，屏幕像素密度為mdpi，即1dp = 1px；

案例一

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    tools:context=".MainActivity" >

   <!--內(nèi)部控件水平排列-->

   <TextView

        android:layout_width="0dp"

        android:layout_height="120dp"

        android:layout_weight="3"

        android:background="@android:color/black"/>

    <TextView

        android:layout_width="0dp"

        android:layout_height="120dp"

        android:layout_weight="1"

        android:background="@android:color/holo_green_dark"/>

</LinearLayout>

當(dāng)前布局效果如圖1-1所示。

圖1-1 布局效果

從圖1-1可以看出，黑色部分的寬度是240像素，綠色部分的寬度是80像素，這兩部分所占區(qū)域?qū)挾鹊挠?jì)算方式如下所示：

當(dāng)前屏幕橫屏寬度：320dp

第一個(gè)子控件未分配權(quán)重前所占寬度：0dp

第二個(gè)子控件未分配權(quán)重前所占寬度：0dp

當(dāng)前屏幕剩余空間總數(shù)：320dp-0dp-0dp = 320dp，將當(dāng)前320dp按權(quán)重分配給兩個(gè)子控件，子控件一分配到四分之三，子控件二分配到四分之一

第一個(gè)子控件分配權(quán)重后寬度：0dp+（（320dp-0dp-0dp）*3）/4 = 240dp

第二個(gè)子控件分配權(quán)重后寬度：0dp+（320dp-0dp-0dp）/4 = 80dp

案例二

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    tools:context=".MainActivity" >

   <TextView

        android:layout_width="60dp"

        android:layout_height="120dp"

        android:layout_weight="3"

        android:background="@android:color/black"/>

    <TextView

        android:layout_width="60dp"

        android:layout_height="120dp"

        android:layout_weight="1"

        android:background="@android:color/holo_green_dark"/>

</LinearLayout>

當(dāng)前布局效果如圖1-2所示。

圖1-2 布局效果

從圖1-2可以看出，黑色部分的寬度是210像素，綠色部分的寬度是110像素，這兩部分所占區(qū)域?qū)挾鹊挠?jì)算方式如下所示：

當(dāng)前屏幕橫屏寬度：320dp

第一個(gè)子控件未分配權(quán)重前所占寬度：60dp

第二個(gè)子控件未分配權(quán)重前所占寬度：60dp

當(dāng)前屏幕剩余空間總數(shù)：320dp-60dp-60dp = 200dp，將當(dāng)前200dp按權(quán)重分配給兩個(gè)子控件，子控件一分配到四分之三，子控件二分配到四分之一

第一個(gè)子控件分配權(quán)重后寬度：60dp+（（320dp-60dp-60dp）*3）/4 = 210dp

第二個(gè)子控件分配權(quán)重后寬度：60dp+（320dp-60dp-60dp）/4 = 110dp

案例三

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    tools:context=".MainActivity" >

   <TextView

        android:layout_width="260dp"

        android:layout_height="120dp"

        android:layout_weight="3"

        android:background="@android:color/black"/>

    <TextView

        android:layout_width="260dp"

        android:layout_height="120dp"

        android:layout_weight="1"

        android:background="@android:color/holo_green_dark"/>

</LinearLayout>

當(dāng)前布局效果如圖1-3所示。

圖1-3 布局效果

從圖1-3可以看出，黑色部分的寬度是110像素，綠色部分的寬度是210像素，這兩部分所占區(qū)域?qū)挾鹊挠?jì)算方式如下所示：

當(dāng)前屏幕橫屏寬度：320dp

第一個(gè)子控件未分配權(quán)重前所占寬度：260dp

第二個(gè)子控件未分配權(quán)重前所占寬度：260dp

當(dāng)前屏幕剩余空間總數(shù)：320dp-260dp-260dp = -200dp，將當(dāng)前-200dp按權(quán)重分配給兩個(gè)子控件，子控件一分配到四分之三，子控件二分配到四分之一

第一個(gè)子控件分配權(quán)重后寬度：260dp+（（320dp-260dp-260dp）*3）/4 = 110dp

第二個(gè)子控件分配權(quán)重后寬度：260dp+（320dp-260dp-260dp）/4 = 210dp

案例四

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    xmlns:tools="http://schemas.android.com/tools"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    tools:context=".MainActivity" >

   <TextView

        android:layout_width="fill_parent"

        android:layout_height="120dp"

        android:layout_weight="3"

        android:background="@android:color/black"/>

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="120dp"

        android:layout_weight="1"

        android:background="@android:color/holo_green_dark"/>

</LinearLayout>

當(dāng)前布局效果如圖1-4所示。

圖1-4 布局效果

從圖1-4可以看出，黑色部分的寬度是80像素，綠色部分的寬度是240像素，這兩部分所占區(qū)域?qū)挾鹊挠?jì)算方式如下所示：

當(dāng)前屏幕橫屏寬度：320dp

第一個(gè)子控件未分配權(quán)重前所占寬度：fill_parent 即為充滿橫屏

第二個(gè)子控件未分配權(quán)重前所占寬度：fill_parent 即為充滿橫屏

當(dāng)前屏幕剩余空間總數(shù)：320dp-320dp-320dp = -320dp，將當(dāng)前-320dp按權(quán)重分配給兩個(gè)子控件，子控件一分配到四分之三，子控件二分配到四分之一

第一個(gè)子控件分配權(quán)重后寬度：320dp+（（320dp-320dp-320dp）*3）/4 = 80dp

第二個(gè)子控件分配權(quán)重后寬度：320dp+（320dp-320dp-320dp）/4 = 240dp

案例總結(jié)

從上述案例可以看出，如果對(duì)線性布局中的控件設(shè)置了權(quán)重（layout_weight），那么控件占用的空間大小是可以計(jì)算出來(lái)的，計(jì)算公式如下：
線性布局中子控件最終占用寬度 = 原有寬度+剩余空間分配量
例如，在水平方向上的線性布局LinearLayout控件L中，包含兩個(gè)水平占用空間的控件A,B，其中：
L控件：L控件寬度layout_width = width_l
A控件：A控件寬度layout_width = width_a A控件權(quán)重layout_weight = weight_a
B控件：B控件寬度layout_width = width_b B控件權(quán)重layout_weight = weight_b
L中子控件最終占用寬度 = 原有寬度(width_a)+剩余空間分配量
A所占寬度 = width_a + (width_l-width_a-width_b)*weight_a/(weight_a+weight_b)
B所占寬度 = width_b + (width_l-width_a-width_b)*weight_b/(weight_a+weight_b)
由此可以推斷，當(dāng)使用權(quán)重（layout_weight）時(shí)，會(huì)遇到下列兩種情況：
情況1：當(dāng)L中內(nèi)部子控件(A,B)的寬度之和大于L的總寬度時(shí)，即(width_l-width_a-width_b)<0時(shí)，weight_a/(weight_a+weight_b)比例的值越大，當(dāng)前控件所占空間越小。
情況2：當(dāng)L中內(nèi)部子控件(A,B)的寬度之和小于L的總寬度時(shí)，即(width_l-width_a-width_b)>0時(shí)，weight_a/(weight_a+weight_b)

比例的值越大，當(dāng)前控件所占空間越大。



本文版權(quán)歸黑馬程序員Android培訓(xùn)學(xué)院所有，歡迎轉(zhuǎn)載，轉(zhuǎn)載請(qǐng)注明作者出處。謝謝！
作者：黑馬程序員Android+物聯(lián)網(wǎng)培訓(xùn)學(xué)院
首發(fā)：http://android.itheima.com