Android layout_weight属性使用

在线性布局LinearLayout中，子view经常会用到layout_weight这个属性用于界面的自适应。那使用这个属性的时候布局中的子view的宽高是如何计算的？怎么正确使用这个属性？这里介绍下一条公式：（假设LinearLayout的android:orientation="horizontal"）：

L = l' + s * (w / W);

L:最终宽度

l':layout_width的值

s:LinearLayout布局中的剩余宽度

w:layout_weight的值

W:LinearLayout布局中所有子view的layout_weight的值的总和

这个公式中s：LinearLayout布局中的剩余宽度是如何计算的？当使用layout_weight这个属性的时候，加载布局会调用两次onMeasure()方法，来计算布局中子view的宽度，第一次根据子view的layout_width确定子view的宽度，那剩余宽度=LinearLayout的宽度 - 布局中所有子view的width之和。所以在使用这个属性的时候layout_width设为0dp，这样可以这样准确计算子view宽度，然后按weight比例显示子view。

下面是一个正确使用的例子：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="1"
        android:textColor="@android:color/black"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="2"
        android:textColor="@android:color/holo_red_dark"/>
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="2"
        android:textColor="@android:color/holo_blue_dark"/>
</LinearLayout>

这个最终3个TextView会水平按1：1：1比例显示。

然后举一个错误使用的例子：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:text="1"
        android:textColor="@android:color/black"
        android:background="@android:color/holo_red_dark"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="2"
        android:gravity="center"
        android:text="2"
        android:textColor="@android:color/holo_red_dark"
        android:background="@android:color/holo_blue_dark"/>
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="3"
        android:gravity="center"
        android:text="3"
        android:textColor="@android:color/holo_blue_dark"
        android:background="@android:color/black"/>
</LinearLayout>

这个代码里只看layout_weight属性，目的是想让3个textView按1:2:3的比例显示，但最终结果是这样的

这个现象是由子view的layout_width属性造成的。3个TextView的layout_width属性都为match_parent，我们使用开头提到的这条公式计算下3个TextView的宽度。

LinearLayout布局的宽度我们假设为1，3个TextView的宽度由于layout_width属性为match_parent，在没有使用weight属性计算子View宽度的时候，初始宽度都为1，所以剩余宽度 = LinearLayout布局的宽度 - 子view的总宽度 = 1 - 3 * 1 = -2。

这时再用weight属性按照公式：L = l' + s * (w / W)计算子view宽度时，3个子view宽度分别是：

第一个TextView：L = 1 + ( -2) * （1 / 6） = 2 / 3;

第二个TextView：L = 1 + ( -2) * （2 / 6） = 1 / 3;

第二个TextView：L = 1 + ( -2) * （3 / 6） = 0；

所以看到的现象是第一个TextView的宽度是第二个TextView的两倍，第三个TextView宽度为0看不到。

以上是layout_weight属性使用，非常感谢大家的观看，希望能帮助到有需要的兄弟，也非常希望得到大家的批评意见或者更深入的补充！谢谢！^_^

Android layout_weight属性使用

猜你喜欢