你真的了解android:layout_weight吗？

Bertha 。 2022-07-27 11:54 187阅读 0赞

一直以来对android:layout\_weight 属性的理解停留在**对其相对于的View按权重（或者说是比例）平分**的概念中，因为之前学习时看的书上就是这么讲的。最近才发现原来不仅仅是按权重平分，是对当前**剩余空间按权重平分**。

## 初探 ##

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

![登录][20160412215324139]

可用如下方式实现

<?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可以很简洁的实现界面按“百分比”布局，当然这其中也有一些奥妙，这里就做一下记录。

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

*ps:代码高亮加粗不会弄呀*

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

![layout\_weight][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 比重为 ：  
6\*1/6 ，6\*2/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效果呢，想好了，看下面代码和实际效果图。

![layout\_weight][layout_weight 1]

应该和你想的一样吧。

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

--------------------

[20160412215324139]: /images/20220724/311bb75bc84143b2b2bff433fad2571c.png
[layout_weight]: /images/20220724/0ccc6b8bf2f840fdbbe6c93bc99c79e9.png
[layout_weight 1]: /images/20220724/db3ebc7c59d544a089bc1213b9013178.png