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 相对布局解析，使用相对布局，在容器中的子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。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 的控件之右

示例演示

图1

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" // 位于 text1 控件的下面/> </RelativeLayout>

2、布局属性2

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

layout_alignBaseline 基线对齐
layout_alignTop 顶对齐
layout_alignBottom 底对齐
layout_alignLeft 左对齐
layout_alignRight 右对齐

示例演示

图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 与父控件右边对齐

示例演示

图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 水平与垂直方向居中

示例演示

图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 按钮的左边。

图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 属性

RelativeLayout

排列与对齐

综合实例

更多相关文章

随机推荐