我的Android进阶之旅------>关于android:layout_weight属性的详细解析

• 关于androidlayout_weight属性的详细解析
  • 效果一
  • 效果二
    • 图3的布局代码
    • 图4的布局代码
  • 效果三
    • 图7代码
    • 图8代码
  • 效果四
  • 效果五

关于android:layout_weight属性的详细解析

效果一

图1

图2



代码如下所示：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="1" />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#4400ff00"

        android:gravity="center"

        android:text="2" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="3"

        android:background="#440000ff"

        android:gravity="center"

        android:text="3" />

</LinearLayout>

---

效果二

图3

图4

图3的布局代码

下面来看图3的布局代码，如下所示

图5

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#4400ff00"

        android:gravity="center"

        android:text="2" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="3"

        android:background="#440000ff"

        android:gravity="center"

        android:text="3" />

</LinearLayout>

图4的布局代码

下面来看图4的布局代码，如下所示

图6

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:baselineAligned="false">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#4400ff00"

        android:gravity="center"

        android:text="2" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="3"

        android:background="#440000ff"

        android:gravity="center"

        android:text="3" />

</LinearLayout>

可以发现图3和图4的布局文件的差别是在父布局LinearLayout中设置了android:baselineAligned=”false”

---

效果三

图7

图7代码

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:baselineAligned="false">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#4400ff00"

        android:gravity="center"

        android:text="2" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="3"

        android:background="#440000ff"

        android:gravity="center"

        android:text="3" />

</LinearLayout>

图8

图8代码

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:baselineAligned="false">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="wrap_content"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="wrap_content"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#4400ff00"

        android:gravity="center"

        android:text="2" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="wrap_content"

        android:layout_height="48dp"

        android:layout_weight="3"

        android:background="#440000ff"

        android:gravity="center"

        android:text="3" />

</LinearLayout>

---

效果四

图9

图9代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:baselineAligned="false">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="match_parent"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="match_parent"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#4400ff00"

        android:gravity="center"

        android:text="2" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="match_parent"

        android:layout_height="48dp"

        android:layout_weight="3"

        android:background="#440000ff"

        android:gravity="center"

        android:text="3" />

</LinearLayout>

图10

图10代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:baselineAligned="false">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="match_parent"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

    <TextView

        android:id="@+id/textView2"

        android:layout_width="match_parent"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#4400ff00"

        android:gravity="center"

        android:text="2" />

    <TextView

        android:id="@+id/textView3"

        android:layout_width="match_parent"

        android:layout_height="48dp"

        android:layout_weight="2"

        android:background="#440000ff"

        android:gravity="center"

        android:text="3" />

</LinearLayout>

下面我们来弄清楚一下到底为什么会这样：

图11

如图11所示：假设外层的父布局LinearLayout的width为480dp,

按上面的参考来计算一下三个TextView的具体width。

第一步：计算剩余的尺寸

由于三个TextView的width都设置为match_parent，即都是480dp,那么剩余的尺寸为

restWidth=480-480*3=-480*2

第二步：计算TextView1的尺寸

分析 如图9：

按上面的参考来计算一下三个TextView的具体width。

即：TextView1的width1如下所示：

width1=480+（-480*2）（1/6）=480（4/6）

即：TextView2的width2如下所示：

width2=480+（-480*2）（2/6）=480（2/6）

即：TextView3的width3如下所示：

width3=480+（-480*2）（3/6）=480（0/6）

所以width1:width2:width3=2:1:0 如图9所示

分析 如图10：

按上面的参考来计算一下三个TextView的具体width。

即：TextView1的width1如下所示：

width1=480+（-480*2）（1/5）=480（3/5）

即：TextView2的width2如下所示：

width2=480+（-480*2）（2/5）=480（1/5）

即：TextView3的width3如下所示：

width3=480+（-480*2）（2/5）=480（1/5）

所以width1:width2:width3=3:1:1 如图10所示

效果五

图12

图12的代码如下所示：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    android:weightSum="2">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

</LinearLayout>

图12



当父布局不设置android:weightSum参数的时候如下图所示：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    android:weightSum="3">

    <TextView

        android:id="@+id/textView1"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

</LinearLayout>

分析一下图12：

假设外层的父布局LinearLayout的width为480dp,

按上面的参考来计算一下三个TextView的具体width。

第一步：计算剩余的尺寸

由于三个TextView的width都设置为match_parent，即都是480dp,那么剩余的尺寸为

restWidth=480-0=480

第二步：计算TextView1的尺寸

TextView的width=0+480*(1/3)=160

所以TextView的宽度为父布局控件LinearLayout的1/3

图13



图13的代码如下：

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:orientation="horizontal"

    >

    <TextView

        android:id="@+id/textView1"

        android:layout_width="0dp"

        android:layout_height="48dp"

        android:layout_weight="1"

        android:background="#44ff0000"

        android:gravity="center"

        android:text="111111111111111111" />

</LinearLayout>

---

关于android:layout_weight的更多介绍可以参考一下资源：

• 我的Android进阶之旅——>关于android:layout_weight属性的一个面试题
• http://www.cnblogs.com/angeldevil/archive/2012/04/08/2437747.html
• http://blog.csdn.net/softmanfly/article/details/7636510
• http://developer.android.com/guide/topics/ui/layout/linear.html#Weigh
• http://www.cnblogs.com/draem0507/archive/2013/05/11/3073508.html
• Android 对Layout_weight属性完全解析以及使用ListView来实现表格