文章目录
一、相对布局
常用属性
(1)相对于父容器居中
属性 | 含义 |
---|---|
layout_centerInParent | 在父容器居中 |
layout_centerHorizontal | 在父容器水平居中(true / false) |
layout_centerVertical | 在父容器垂直居中 |
(2)相对于父容器对齐
属性 | 含义 |
---|---|
layout_alignParentLeft | 与父容器左对齐 |
layout_alignParentRight | 与父容器右对齐 |
layout_alignParentTop | 与父容器顶对齐 |
layout_alignParentBottom | 与父容器底对齐 |
(3)相对于其它控件位置
属性 | 含义 |
---|---|
layout_toLeftOf | 在……左边 |
layout_toRightOf | 在……右边 |
layout_above | 在……上面 |
layout_below | 在……下面 |
(4)相对于其它控件对齐
属性 | 含义 |
---|---|
layout_alignLeft | 与……左对齐 |
layout_alignRight | 与……右对齐 |
layout_alignTop | 与……顶对齐 |
layout_alignBottom | 与……底对齐 |
layout_alignBaseLine | 与……基线对齐 |
(5)标识符问题
标识符 | 含义 |
---|---|
@+id/button | 创建新的id(建议使用) |
@id/button | 引用已有的id |
二、相对布局演示
1、创建安卓应用
- 基于模板创建RelativeLayoutDemo
2、准备图片素材
- 将背景图片拷贝到drawable目录
3、字符串资源文件
- 字符串资源文件 - strings.xml
4、主布局资源文件
- 主布局资源文件 - activity_main.xml
- 分析界面:首先确定【中央】按钮,然后其它按钮可以根据与它的相对位置关系来定位。【左上角】按钮、【右上角】按钮、【左下角】按钮与【右下角】按钮可以根据它与父容器的对齐方式来确定。
添加中央按钮,以及左上,左下,右上,右下按钮
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="@drawable/background">
//中央
<Button
android:id="@+id/btn_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/center" />
//左上
<Button
android:id="@+id/btn_upper_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/upper_left"
android:layout_toLeftOf="@id/btn_center"
android:layout_above="@id/btn_center"/>
// 右上
<Button
android:id="@+id/btn_upper_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/upper_right"
android:layout_toRightOf="@id/btn_center"
android:layout_above="@id/btn_center"/>
//左下
<Button
android:id="@+id/btn_lower_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lower_left"
android:layout_toLeftOf="@id/btn_center"
android:layout_below="@id/btn_center"/>
//右下
<Button
android:id="@+id/btn_lower_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lower_right"
android:layout_toRightOf="@id/btn_center"
android:layout_below="@id/btn_center"/>
</RelativeLayout>
-
效果预览
-
在【左下】按钮正下方添加【确定】按钮
-
预览
-
右下按钮下方的取消按钮也如此
-
添加左上角,右上角,左下角,右下角以及上中,下中,左中,右中按钮
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity"
android:background="@drawable/background">
<Button
android:id="@+id/btn_center"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
android:text="@string/center" />
<Button
android:id="@+id/btn_upper_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/upper_left"
android:layout_toLeftOf="@id/btn_center"
android:layout_above="@id/btn_center"/>
<Button
android:id="@+id/btn_upper_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/upper_right"
android:layout_toRightOf="@id/btn_center"
android:layout_above="@id/btn_center"/>
<Button
android:id="@+id/btn_lower_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lower_left"
android:layout_toLeftOf="@id/btn_center"
android:layout_below="@id/btn_center"/>
<Button
android:id="@+id/btn_lower_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/lower_right"
android:layout_toRightOf="@id/btn_center"
android:layout_below="@id/btn_center"/>
//确定按钮
<Button
android:id="@+id/btn_ok"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/btn_lower_left"
//左对齐
android:layout_alignLeft="@id/btn_lower_left"
android:text="@string/ok" />
//取消按钮
<Button
android:id="@+id/btn_cancel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/cancel"
android:layout_below="@id/btn_lower_right"
//右对齐
android:layout_alignRight="@id/btn_lower_right"
/>
//左上角
<Button
android:id="@+id/btn_upper_left_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:text="@string/upper_left_corner"
/>
//右上角
<Button
android:id="@+id/btn_upper_right_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentTop="true"
android:text="@string/upper_right_corner"
/>
//左下角
<Button
android:id="@+id/btn_lower_left_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentBottom="true"
android:text="@string/lower_left_corner"
/>
//右下角
<Button
android:id="@+id/btn_lower_right_corner"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:text="@string/lower_right_corner"
/>
//上中
<Button
android:id="@+id/center_top"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
//居中
android:layout_centerInParent="true"
android:text="@string/center_top" />
<Button
android:id="@+id/center_bottom"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:layout_centerInParent="true"
android:text="@string/center_bottom" />
<Button
android:id="@+id/center_left"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerInParent="true"
android:text="@string/center_left" />
<Button
android:id="@+id/center_right"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_centerInParent="true"
android:text="@string/center_right" />
</RelativeLayout>
- 运行应用,查看最终效果