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

这个公式怎么得来的呢?

  1. 屏幕说,我的 n 个儿子啊,我只有一个屏幕,不够你们分啊,我还缺 (n-1) 个屏幕啊
  2. 要不就这样吧,我就先分这一个屏幕,剩下的打欠条,欠条的屏幕就是剩下 (n-1) 快中你们应该获得的比例
  3. 为了公平起见,先到先得,计算出为负数的就四舍五入为 0
  4. 所以啊,第一个儿子应该获得的比例就是 (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 基础教程

关于   |   FAQ   |   我们的愿景   |   广告投放   |  博客

  简单教程,简单编程 - IT 入门首选站

Copyright © 2013-2022 简单教程 twle.cn All Rights Reserved.