← Android LinearLayout 线性布局 Android LinearLayout 线性布局 3 →

Android LinearLayout 线性布局 2

LinearLayout 线性布局，将容器里的组件一个挨一个地排列起来，LinearLayout 不会自动换行，到末尾后剩余的组件将不会被显示出来

在 Android LinearLayout 线性布局如果提到，如果将 wrap_content 改成 match_parent|fill_content又会怎么样呢？

首先创建一个空的 Android 项目 cn.twle.android.linearlayout

然后修改 activity_main.xml 创建一个三列一二三开布局 ( 使用 fill_content )

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">    

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#ff0000"     
        android:layout_weight="1"/>    


    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#00ff00"     
        android:layout_weight="2"/>

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#0000ff"     
        android:layout_weight="3"/>
</LinearLayout>

运行结果如下

哎呀，第三列去哪里了，不是一二三布局么？这个比例看起来就是二一零布局啊，怎么会这样呢?

原来我们以为设置了 android:layout_weight 会忽略 android:orientation 方向上的 android:layout_(width|height) ，其实大部分是这样的，除了设置为 match_parent|fill_parent

在这种情况下，每个元素都是 match_parent，都想占据所有的屏幕，但屏幕只有一个，怎么办呢？

这里有一个计算公式，就是

每一个控件的大小 = 1 - (控件数量-1) x 控件权重比例

所以按照这个公式

red   = 1 - (3-1) x 1/6 = 1 - 1/3 = 2/3
green = 1 - (3-1) x 2/6 = 1 - 2/3 = 1/3
blue  = 1 - (3-1) x 3/6 = 1 - 1   = 0

这个公式怎么得来的呢？

屏幕说，我的 n 个儿子啊，我只有一个屏幕，不够你们分啊，我还缺 (n-1) 个屏幕啊
要不就这样吧，我就先分这一个屏幕，剩下的打欠条，欠条的屏幕就是剩下 (n-1) 快中你们应该获得的比例
为了公平起见，先到先得，计算出为负数的就四舍五入为 0
所以啊，第一个儿子应该获得的比例就是 (1-(3-1) x 1/6) = 2/3

范例

三列一一一开布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">    

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#ff0000"     
        android:layout_weight="1"/>    


    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#00ff00"     
        android:layout_weight="1"/>

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#0000ff"     
        android:layout_weight="1"/>
</LinearLayout>

运行结果如下

按照上面的计算方法算一次,结果是: 1/3 1/3 1/3 , 没错

三列二三四开布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">    

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#ff0000"     
        android:layout_weight="2"/>    


    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#00ff00"     
        android:layout_weight="3"/>

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#0000ff"     
        android:layout_weight="4"/>
</LinearLayout>

运行结果如下

计算结果: 5/9 3/9 1/9 , 对比效果图,5:3:1,也没错

四列十三一四布局

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"    
    xmlns:tools="http://schemas.android.com/tools"    
    android:id="@+id/LinearLayout1"    
    android:layout_width="match_parent"    
    android:layout_height="match_parent"    
    android:orientation="horizontal">    

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#ff0000"     
        android:layout_weight="10"/>    

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#00ff00"     
        android:layout_weight="3"/>

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#00ffff"     
        android:layout_weight="1"/>

    <LinearLayout    
        android:layout_width="match_content"    
        android:layout_height="fill_parent"    
        android:background="#0000ff"     
        android:layout_weight="4"/>
</LinearLayout>

运行结果如下

计算结果:

1.  1 - 3 x (10/18) = -12/18
2.  1 - 3 x (3/18 ) = 3/6
3.  1 - 3 x (1/18)  = 5/6
4.  1 - 3 x (4/18)  = 1/3

所以，第一列不会显示，第二列显示一半，第三列也只显示一半，结果没错

← Android LinearLayout 线性布局 Android LinearLayout 线性布局 3 →

简单教程

Android LinearLayout 线性布局 2

范例

三列一一一开布局

三列二三四开布局

四列十三一四布局

Android 基础教程