Android layout_weight属性使用

移动开发 waitig 442℃ 百度已收录 0评论

在线性布局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属性使用,非常感谢大家的观看,希望能帮助到有需要的兄弟,也非常希望得到大家的批评意见或者更深入的补充!谢谢!^_^




本文由【waitig】发表在等英博客
本文固定链接:Android layout_weight属性使用
欢迎关注本站官方公众号,每日都有干货分享!
等英博客官方公众号
点赞 (0)分享 (0)