11_Android的相对布局(RelativeLayout)

---

目录

1.什么是相对布局？

2.为什么要使用相对布局？

3.相对布局的两组常用属性 

4.与父控件有关的属性 

5.Relative布局的新属性 (Android 4.2 以上)

6.相对布局练习1（登陆界面）

7.相对布局练习2（小猪猜拳）

---

  1.什么是相对布局？

相对布局是一种控件摆放方式。

相对布局是通过指定当前控件与兄弟控件或者父控件之间的相对位置，从而达到控制控件的位置。

2.为什么要使用相对布局？

使用线性布局虽然简单，如果是一个复杂的界面，需要多个线性布局的嵌套就会形成很复杂的一个嵌套关系，软件性能就会降低，而且可读性低，根据不同的布局格式合理的使用相对布局，就可以简化程序。

3.相对布局的两组常用属性 

• 第一组属性：

1.andorid:layout_below

2.andorid:layout_above

3.android:layout_toLeftOf

4.android:layout_toRightOf

例子：

• 创建一个应用程序，命名为：S08_RelativeLayout

• 创建工程后默认为相对布局（RelativeLayout）,默认把控件放在父控件的左上角

• 由于两个TextXiew字体和字体长度一样长，而且默认放在左上角，所以第一个TextView被第一个TextView覆盖住了

• 演示属性android:layout_toRightOf的作用：把当前控件的左边缘对齐到指定控件的右边缘 

  

• 演示android:layout_toLeftOf:把当前控件的右边缘放置到指定控件的左边缘

• 演示android:layout_blew:把当前控件的上边缘对齐到指定控件的下边缘

• 演示android:layout_above:把当前控件下边缘对齐到指定控件的上边缘 

---

 

• 第二组属性：

1.android:layout_alignLeft

2.android:layout_alignRlight

3.android:layout_alignTop

4.android:layout_alignBottom

例子：

 

• 演示android:layout_alignRight:把当前控件右边缘对齐到指定控件的右边缘 

• 演示android:layout_alignLeft:把当前控件的左边缘对齐至当前控件左边缘 

• 演示：android:layout_alignTop:把当前控件的上边缘对齐到指定控件的上边缘 

• 演示android:layout_Bottom:把当前控件的下边缘对齐至指定控件的下边缘 

---

4.与父控件有关的属性 

1.对齐至控件基准线：

什么是基准线（baseline）?

基准线:为了保证印刷字母的整齐而划定的线,如下图所示，从上到下的第3条线就为基准线。  

例子：新建应用程序，命名为：S08_RelativeLayout1

• 首先让此控件的左边缘对齐至指定控件的右边缘，然后再基准线对齐： 

• 效果如下： 

• 修改一下TextView的字体看的明显一点：

---

与父控件边缘对齐的几个属性：

1 .android:layout_alignParentLeft  
2 .android:layout_alignParentRight  
3 .android:layout_alignParentTop  
4 .android:layout_alignParentBottom

 根据上面的字面意思大概知道，是和父控件进行对齐关系的几个属性，第一个是对齐到父控件左边，第二个对齐到父控件右边，第三个对齐父控件的顶边，第四个对齐父控件的底部（相对布局默认是对齐至父控件的坐上角）。

用代码演示几个属性的用法：

•  android:layout_alignParentRigh属性：

•  android:layout_alignParentRight 和android:layout_alignParentBottom属性结合

• 注意这几个属性是和父控件的关系，和爷爷控件没关系： 

---

 对齐至父控件的中央  
1  android:layout_centerInParent  
2  android:layout_centerHorizontal  
3  android:layout_centerVertica

 根据字面的意思，第一个是对齐父控件的中央，第二个是水平的中央位置，第三个是垂直的中央

例子：

• android:layout_centerInParent 属性：

• android:layout_centerHorizontal属性： 

• android:layout_centerVertica属性： 

---

5.Relative布局的新属性 (Android 4.2 以上)

---

相对布局的新属性：

1 android:layout_alignStart
2 android:layout_alignEnd
3 android:layout_alignParentStart
4 android:layout_alignParentEnd

 从字面上的意思，第一个是对齐到起始位置，第二个对齐到终止位置，第三个是父控件的起始位置，第四个对齐到父控件的终止位置。

例子：

新建一个应用程序，命名为S08_RelativeLayoutNew,我们需要把最低兼容版本调整到4.2，以看到最新属性的效果：

 android:layout_alignEnd属性：把当前控件的尾部，与指定控件的尾部对齐;

android:layout_alignStart属性：把当前控件的头部与指定控件的头部对齐； 

android:layout_alignParentStart属性：把当前尾部控件与父控件的尾部对齐，

注意：和父控件关系只有：true 和 false 

android:layout_alignParentStart属性：把当前控件头部和父控件头部对齐  

注意：和父控件关系只有：true 和 false 

---

6.相对布局练习1（登陆界面）

---

通过相对布局的方式制作这个界面：

 

例子:

• 新建一个应用程序，命名为：S08_RelativeLayoutPractice1

使用相对布局，一步步来做这个界面：

• 首先我们需要一个TextView来显示登陆界面这个词，而且是居中显示：

• 然后添加两个<EditText/>用来填写登陆账号和密码的，相对布局和线性布局不一样，相对布局，每一个空间你都需要去指定他的位置，所以每一个控件都需要生成一个Id ，和指定相对位置，在相对布局中，新生成的控件都是默认放置在左上角：

• 这样做了以后的到下面的效果： 

• 我们还需要添加两个<Button/>控件，来显示取消和确定。 

• 到这里我们已经完成了大部分，如下： 

• 接下来我们只需要增加登陆界面的一些提示信息和美化一下界面即可：

• 经过上面的更改，还增加了父控件的内边距，最后如下所示：

 

 

---

7.相对布局练习2（小猪猜拳）

---

我们前面做过一个下面这样的一个界面的例子，上次使用线性布局来做的，其中涉及到线性布局的嵌套，实现起来相对比较麻烦一点，那我们使用相对布局(RelativeLayout)来做一下：

• 新建应用程序，命名为：S08_RelativeLayoutPractice2

• 我们从上到下的顺序一步步来，定义三个TextView控件，来显示，猜拳游戏、甲猪、乙猪。

 效果如下：

• 接下增加两个ImageView标签显示图片，先把名为peppagpig.png的图片放置在工程的res——>drawable-dhpi文件夹下： 

提示：ImageView使用方法：点我查看

• 效果如下：

• 增加两组RadioGroup按钮，每组有三个Button控件：

提示：单选按钮（RadioButton）的用法 ：点我查看

• 效果如下：

增加一个Button控件，然后显示下面的两个TextView控件：

提示：Button控件的用法：点我查看

• 效果如下：

• 剩下两个TextView用来显示结果：

• 整体的相对布局就完成了，效果如下：

• 然后在MainActivity获取代表控件标签的对象，然后设定监听器等完成程序的设计，总体效果图如下： 

---

 附录： 

本博文Demo下载：https://github.com/zGuangYuan/Android- 

github的用法：点我查看