Android 设置子控件的宽度或高度为 match_parent来填充父控件中的剩余宽度或高度的方法

浏览数：50 / 时间：2015年06月11日

先上几张效果图, 如下:

上述四张图要实现的布局效果是: 假如父控件中包含两个子控件, 其中一个子控件(上图中为红色button)的宽度是固定数值, 而另一个子控件(上图中为绿色button)的宽度不固定, 要想让这两个子控件的总宽度刚好等于父控件的宽度.可以将宽度不固定的那个控件的宽度设置为match_parent来实现, 但有些细节需要注意, 否则即使设置了match_parent, 也不能出现如上的效果. 注意细节如下:

上述效果可以使用RelativeLayout实现. 但注意绿色button的水平位置必须相对于红色button来设置, 而不能相对于父控件来设置. 即: 绿色button只能设置为android:layout_toLeftOf="@id/red_button" 或 android:layout_toRightOf="@id/red_button", 而不能设置为 android:layout_alignParentLeft="true" 或 android:layout_alignParentRight="true". 否则两个button将会产生重叠.
上述效果如果使用LinearLayout实现, 将有一定局限性. 只有当宽度确定的控件都位于左边(或上边), 宽度不确定的控件位于右边(或下边)时, 才能使用LinearLayout. 也就是说, 使用LinearLayout只能实现前两个图的效果, 而不能实现后两个图的效果(如果用于后两个效果, 那么左边的button将占据整个屏幕的宽度, 而右边的button将会被挤到屏幕外了).

附上布局代码:

1. 图1的布局:

(1) 使用RelativeLayout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/red_button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#ff0000"
        android:text="1" />

    <Button
        android:id="@+id/green_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/red_button"
        android:background="#00ff00"
        android:text="222222" />

</RelativeLayout>

(2) 使用LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/red_button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:text="1" />

    <Button
        android:id="@+id/green_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        android:text="222222" />

</LinearLayout>

2. 图2的布局:

(1) 使用RelativeLayout:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/red_button"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:background="#ff0000"
        android:text="1" />

    <Button
        android:id="@+id/green_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toRightOf="@id/red_button"
        android:background="#00ff00"
        android:text="222222" />

</RelativeLayout>

(2) 使用LinearLayout:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >

    <Button
        android:id="@+id/red_button"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:background="#ff0000"
        android:text="1" />

    <Button
        android:id="@+id/green_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#00ff00"
        android:text="222222" />

</LinearLayout>

3. 图3的布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/red_button"
        android:layout_width="200dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#ff0000"
        android:text="1" />

    <Button
        android:id="@+id/green_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/red_button"
        android:background="#00ff00"
        android:text="222222" />

</RelativeLayout>

4. 图4的布局:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <Button
        android:id="@+id/red_button"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:background="#ff0000"
        android:text="1" />

    <Button
        android:id="@+id/green_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@id/red_button"
        android:background="#00ff00"
        android:text="222222" />

</RelativeLayout>