Android RelativeLayout 相对布局解析

痛定思痛。 2022-03-29 15:18 271阅读 0赞

## [Android RelativeLayout 属性][Android RelativeLayout] ##

// 相对于给定ID控件

android:layout\_above 将该控件的底部置于给定ID的控件之上;

android:layout\_below 将该控件的底部置于给定ID的控件之下;

android:layout\_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;

android:layout\_toRightOf 将该控件的左边缘与给定ID的控件右边缘对齐;

android:layout\_alignBaseline 将该控件的baseline与给定ID的baseline对齐;

android:layout\_alignTop 将该控件的顶部边缘与给定ID的顶部边缘对齐;

android:layout\_alignBottom 将该控件的底部边缘与给定ID的底部边缘对齐;

android:layout\_alignLeft 将该控件的左边缘与给定ID的左边缘对齐;

android:layout\_alignRight 将该控件的右边缘与给定ID的右边缘对齐;

// 相对于父组件

android:layout\_alignParentTop 如果为true,将该控件的顶部与其父控件的顶部对齐;

android:layout\_alignParentBottom 如果为true,将该控件的底部与其父控件的底部对齐;

android:layout\_alignParentLeft 如果为true,将该控件的左部与其父控件的左部对齐;

android:layout\_alignParentRight 如果为true,将该控件的右部与其父控件的右部对齐;

// 居中

android:layout\_centerHorizontal 如果为true,将该控件的置于水平居中;

android:layout\_centerVertical 如果为true,将该控件的置于垂直居中;

android:layout\_centerInParent 如果为true,将该控件的置于父控件的中央;

// 指定移动像素

android:layout\_marginTop 上偏移的值;

android:layout\_marginBottom 下偏移的值;

android:layout\_marginLeft 　　左偏移的值;

android:layout\_marginRight 　 右偏移的值;

example:

android:layout\_below = "@id/\*\*\*"

android:layout\_alignBaseline = "@id/\*\*\*"

android:layout\_alignParentTop = true

android:layout\_marginLeft = “10px”

[Android RelativeLayout 相对布局解析][Android RelativeLayout 1]

Android RelativeLayout 相对布局解析，使用相对布局，在容器中的子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。android 布局，android relativelayout ，android 相对布局，android layout ，android 水平居中，android 垂直居中，android 居中显示。

##### RelativeLayout #####

在这个容器中，其子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。

需要注意的是，不能在 RelativeLayout 容器本身与它的子元素之间产生循环依赖，比如将 RelativeLayout 的高设置成 wrap\_content 时将子元素设置为 ALIGN\_PARENT\_BOTTOM 。

##### 排列与对齐 #####

1、布局属性1

排列属性，值为其相关控件的 ID ，如 android:layout\_above = "@id/btn1" ，表示位于控件 btn1 的上面。

*  layout\_above 将该控件置于给定 ID 的控件之上
 *  layout\_below 将该控件置于给定 ID 的控件之下
 *  layout\_toLeftOf 将该控件置于给定 ID 的控件之左
 *  layout\_toRightOf 将该控件置于给定 ID 的控件之右

示例演示

![将该控件置于给定 ID 的控件之下][ID]  
图1

XML 布局文件

2、布局属性2

对齐属性，值为其相关控件的 ID ，如 android:layoutTop = "@id/btn1" ，表示与控件 btn1 的顶端对齐。

*  layout\_alignBaseline 基线对齐
 *  layout\_alignTop 顶对齐
 *  layout\_alignBottom 底对齐
 *  layout\_alignLeft 左对齐
 *  layout\_alignRight 右对齐

示例演示

![将该控件置于给定 ID 的右边对齐][ID 1]  
图2

XML 布局文件

以下为引用内容： 
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10px"
    >
    <TextView 
    android:id="@+id/text1"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Textview:"
    />
    <EditText 
    android:id="@+id/edit1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_below="@id/text1" 
    />
    <Button 
    android:id="@+id/button1"
    android:layout_width="60dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/edit1"
    android:layout_alignRight="@id/edit1"   // 与 edit1 控件右边对齐
    android:text="OK"
    /> 
    </RelativeLayout>

3、布局属性3

相对父控件的对齐属性，值为 true ，如 android:layout\_alignParentTop = "true" ，表示该控件与父控件的顶端对齐。

*  layout\_alignParentTop 与父控件顶部对齐
 *  layout\_alignParentBottom 与父控件底部对齐
 *  layout\_alignParentLeft 与父控件左边对齐
 *  layout\_alignParentRight 与父控件右边对齐

示例演示

![与父控件左边对齐][0707112108384_2108.jpg]  
图3

XML 布局文件

以下为引用内容： 
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10px"
    >
    <TextView 
    android:id="@+id/text1"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Textview:"
    />
    <EditText 
    android:id="@+id/edit1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_below="@id/text1" 
    />
    <Button 
    android:id="@+id/button1"
    android:layout_width="60dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/edit1"
    android:layout_alignParentLeft="true"   // 对齐到父控件 RelativeLayout 容器的左边
    android:text="OK"
    /> 
    </RelativeLayout>

4、布局属性4

居中对齐属性，控件在父控件中的居中对齐方式，值为 true ，如 android:layout\_centerInparent = "true" ，表示该控件在父控件容器的水平与垂直方向居中。

*  layout\_centerHorztal 水平方向居中
 *  layout\_centerVertical 垂直方向居中
 *  layout\_centerInparent 水平与垂直方向居中

示例演示

![水平方向居中][0707112109531_2109.jpg]  
图4

XML 布局文件

以下为引用内容： 
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:padding="10px"
    >
    <TextView 
    android:id="@+id/text1"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Textview:"
    />
    <EditText 
    android:id="@+id/edit1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_below="@id/text1" 
    />
    <Button 
    android:id="@+id/button1"
    android:layout_width="60dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/edit1"
    android:layout_centerHorizontal="true"  // 水平方向居中
    android:text="OK"
    /> 
    </RelativeLayout>

##### 综合实例 #####

白色背景区域为 RelativeLayout 容器，内容与边框间距 padding 为10px ，EditText 位于 textView 的下面，Canel 、OK 按钮又位于 EditText 的下面，OK 按钮与父控件 RelativeLayout 容器右边对齐，Canel 按钮位于 OK 按钮的左边。

![RelativeLayout 相对布局][RelativeLayout]  
图5

XML 布局文件

以下为引用内容： 
    <?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="138dp"
    android:background="#f3f3f3"
    android:padding="10px"
    >
    <TextView 
    android:id="@+id/text1"
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content" 
    android:text="Textview:"
    />
    <EditText 
    android:id="@+id/edit1"
    android:layout_width="fill_parent" 
    android:layout_height="wrap_content"
    android:layout_below="@id/text1" 
    />
    <Button 
    android:id="@+id/button1"
    android:layout_width="60dp"
    android:layout_height="wrap_content"
    android:layout_below="@id/edit1"
    android:layout_alignParentRight="true"
    android:text="OK"
    />
    <Button 
    android:id="@+id/button2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_below="@id/edit1"
    android:layout_toLeftOf="@id/button1"
    android:text="Canel"
    /> 
    </RelativeLayout>

[Android RelativeLayout]: http://www.cnblogs.com/sevenyuan/archive/2010/09/16/1827940.html
[Android RelativeLayout 1]: http://www.desteps.com/application/mobile/0100256.html
[ID]: http://www.desteps.com/uploadfile/2012/0707/0707112107908_2107.jpg
[ID 1]: http://www.desteps.com/uploadfile/2012/0707/0707112108358_2108.jpg
[0707112108384_2108.jpg]: http://www.desteps.com/uploadfile/2012/0707/0707112108384_2108.jpg
[0707112109531_2109.jpg]: http://www.desteps.com/uploadfile/2012/0707/0707112109531_2109.jpg
[RelativeLayout]: http://www.desteps.com/uploadfile/2012/0707/0707112109185_2109.jpg