你真的了解android:layout_weight 吗？

一直以来对android:layout_weight 属性的理解停留在对其相对于的View按权重（或者说是比例）平分的概念中，因为之前学习时看的书上就是这么讲的。最近才发现原来不仅仅是按权重平分那么简单（真是坑爹教材坑死人啊），严格的说法应该是对当前剩余空间按权重平分。

初探##

日常开发中，在LinearLayout中使用layout_weight可以很好的应对那些内容会动态变化的布局结构。比如表单填写，最常见的就是注册登录页面布局内容的实现，例如要实现下图布局

layout_weight

可用如下方式实现

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
    android:layout_marginTop="10dp"
    android:orientation="horizontal"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:padding="8dp"
        android:layout_width="0dp"
        android:layout_weight="1.5"
        android:layout_height="wrap_content"
        android:text="用戶名"
        android:gravity="center"
        android:id="@+id/textView2" />

    <EditText
        android:padding="8dp"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:inputType="textPersonName"
        android:text=""
        android:ems="10"
        android:id="@+id/editText"
        android:layout_weight="3" />
</LinearLayout>

    <LinearLayout
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_weight="1.5"
            android:layout_height="wrap_content"
            android:text="密码"
            android:gravity="center"
            />

        <EditText
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text=""
            android:ems="10"
            android:layout_weight="3" />
    </LinearLayout>
    <LinearLayout
        android:layout_marginTop="10dp"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_weight="1.5"
            android:layout_height="wrap_content"
            android:text="确认密码"
            android:gravity="center"
             />

        <EditText
            android:padding="8dp"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:inputType="textPersonName"
            android:text=""
            android:ems="10"
            android:layout_weight="3" />
    </LinearLayout>

</LinearLayout>

这里使TextView和EditText的宽度为0，让后使其权重分别为1.5和3，这样整体效果会看起来比较整齐，当然用RelativeLayout也是能实现的，但是这样更简单一些，也更高效。

进阶##

在Android没有推出android-percent-support-lib之前，甚至在其推出后，一直使用layout_weight实现“百分比”布局。相比于wrap_content和match_parent ,巧妙的使用layout_weight可以很简洁的实现界面按“百分比”布局，当然这其中也有一些奥妙，这里就做一下记录。

首先看一下下面的布局文件

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

    </LinearLayout>

这段代码实现的UI效果如下：

layout_weight

整个布局是个垂直的LinearLayout，里面有三个水平方向的LinearLayout，内部放置了三个TextView，三个TextView高度为wrap_content；其内容和背景色也不同（这里只是为了看起来方便），重点是其宽度：

第一行内三个TextView

layout_width="wrap_content"

第二行内三个TextView

android:layout_width="match_parent"

第三行内三个TextView

android:layout_width="0dp"

而每一个LinearLayout内部三个TextView的layout_weight分别1，2，3。由此，看见由于其wrap_content的不同，使其layout_weight的分配受到了影响。这里就来分析一下，按照之前所说，layout_weight会按屏幕剩余空间，按权重分配空间。

第一种情况（第一个LinearLayout）

系统先给3个TextView分配他们的宽度值wrap_content（宽度足以包含他们的内容1,2,3即可），然后会把剩下来的屏幕空间按照1:2:3的比列分配给3个textview，
上面的UI 比重为：
61/6 ，62/6，6*3/6 即1:2:3 ，如UI 第一行呈现的那样。

第二种情况（第二个LinearLayout）

系统先给3个textview分配他们所要的宽度match_parent，也就是说每一都是填满他的父控件，这里就是屏幕的宽度
那么这时候的剩余空间=
1个parent_width-3个parent_width=-2个parent_width (parent_width指的是屏幕宽度 )

那么第一个TextView的实际所占宽度应该=match_parent的宽度,
即parent_width + 他所占剩余空间的权重比列1/6 * 剩余空间大小（-2 parent_width）=2/3parent_width

同理第二个TextView的实际所占宽度=parent_width + 2/6*(-2parent_width)=1/3parent_width;

第三个TextView的实际所占宽度=parent_width + 3/6*(-2parent_width)=0parent_width；所以就是2:1:0的比列显示了。

即如UI第二行呈现的那样。

第三种情况

这种情况，其实和第一种是一样的。

看到这里，下次使用layout_weight时，如果放置的控件看不见了，就不会觉得奇怪了。

举一反三##

好了，接下来想想，如果把上面代码里三个TextView的权重依次改为3，2，1 又会是一种怎样的UI效果呢，想好了，看下面代码和实际效果图。

 <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="#FF424242"
        android:orientation="vertical">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:orientation="horizontal">

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="3"
                android:background="#77bc1f"
                android:text="AAA"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="2"
                android:background="#06d992"
                android:text="BBB"
                android:textColor="#fff"
                android:textSize="23sp" />

            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#EEA32E"
                android:text="CCC"
                android:textColor="#fff"
                android:textSize="23sp" />
        </LinearLayout>

    </LinearLayout>

layout_weight

应该和你想的一样吧。

好了，这里就是对android:layout_weight的学习笔记，虽然是一个很简单的属性，但是巧妙的设置后，很方便的实现一些布局。

ps:markdown 语法什么时候直接支持代码高亮，加粗就好了

最后编辑于：2017.12.03 04:08:35

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 218,451评论 6赞 506
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 93,172评论 3赞 394
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 164,782评论 0赞 354
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,709评论 1赞 294
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,733评论 6赞 392
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,578评论 1赞 305
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,320评论 3赞 418
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 39,241评论 0赞 276
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,686评论 1赞 314
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,878评论 3赞 336
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,992评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,715评论 5赞 346
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 41,336评论 3赞 330
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,912评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 33,040评论 1赞 270
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 48,173评论 3赞 370
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,947评论 2赞 355

你真的了解android:layout_weight 吗？

初探##

进阶##

举一反三##

推荐阅读更多精彩内容