Android相对布局(RelativeLayout)

昵称41202797 2017-09-09

展开全文

备注：这里的视图和元素是等同的概念。

RelativeLayout是一个允许子视图相对于其他兄弟视图或是父视图显示的视图组(通过ID指定)。每个视图的位置能够指定它相对于兄弟(比如在其他视图的左边或是下边)或是父视图(这里是指相对布局容器，比如底部对齐、中间偏左)的位置。

图1

RelativeLayou是一个用于设计用户界面的强大工具，因为它能消除嵌套视图组和保持我们布局为扁平结构，这可以提高运行时性能。如果我们采用了多个嵌套的LinearLayout组，我们应该采用一个单独的RelativeLayout来替代。

1. 配置视图(positioning views)

我们能够通过右边界对其两个元素，或是使一个元素位于两一个下面，居中在显示屏上、左居中、等等。默认情况下，所有的子视图在布局的左上角显示，所以我们必须使用RelavieLayout.LayoutParams中多种多样的布局属性来定义每个视图的位置。

每个布局属性值既可以是一个确定相对于父容器RelativeLayout布局位置的boolean类型，也可以是某个子视图的ID，即此视图相对于其他视图的位置。

在我们的XML布局文件中，可以以任何顺序来声明布局中相对于其他视图的关系。比如，我们可以声明view1在view2的下面，尽管view2在布局层次的最后申明。

2. 相对布局常用的属性

分为几类：

(1) 布局容器中通用的，不管是相对布局、线性布局等布局容器。

Android:gravity设置该布局容器内个子组件的对齐方式，比如button组件中内容在button中的对齐方式，比如：

Button

android:id='@+id/button1'

android:layout_width='120dp'

android:layout_height='wrap_content'

android:text='确认'

如果没有社会自gravity属性值，button的内容默认是在button组件居中显示的，而且可以看到button是位于左上角的，如下图：

图2

我们增加android:gravity='left'，让“确认”在button的左边显示，如下图：

图3

Android:ignoreGravity设置哪个组件不受gravity属性的影响。

(2) 属性值为具体像素值的属性，如30dip，40px

android:layout_marginBottom 离某元素底边缘的距离

android:layout_marginLeft 离某元素左边缘的距离

android:layout_marginRight 离某元素右边缘的距离

android:layout_marginTop 离某元素上边缘的距离

下面两种属性是由RelavieLayout.LayoutParams定义。

(3) 属性值为true或是false的属性

android:layout_alignParentBottom控制该组件是否和布局管理器底端对齐。

android:layout_alignParentEnd控制该组件是否和布局管理器末端对齐。

android:layout_alignParentLeft 控制该组件是否和布局管理器左边对齐

android:layout_alignParentRight控制该组件是否和布局管理器右边对齐

android:layout_alignParentStart控制该组件是否和布局管理器开始对齐

android:layout_alignParentTop控制该组件是否和布局管理器顶部对齐

android:layout_alignWithParentIfMissing 如果对应的兄弟元素找不到的话就以父元素做参照物

先来看下面内容

Button

android:id='@+id/button2'

android:layout_width='wrap_content'

android:layout_height='wrap_content'

android:text='按键2'

的布局界面：

图4

我们增加android:layout_alignParentTop='true'，还是和图4一样，是因为这里只是让按键2和其父容器顶部对齐，如果要让按键2水平居中且和顶部对齐，需要增加android:layout_centerHorizontal='true'，效果图如下：

图5

当然了，如果没有android:layout_alignParentTop='true'，也可以达到图5的效果，因为默认就是顶部对齐的，这里只是说明它们的作用而已。

Button

android:id='@+id/button2'

android:layout_width='wrap_content'

android:layout_height='wrap_content'

android:text='按键2'

android:layout_alignParentTop='true'

android:layout_centerHorizontal='true'

这里尤其要注意android:layout_alignParentBottom和android:layout_alignParentEnd的差别，前者是指底部对齐，后者指末端对齐，如下图：

图6

图6是指按键2的底部和父容器底部对齐。

图7

图7表示按键2和父容器末端对齐，相关的XML控制代码如下：

Button

android:id='@+id/button2'

android:layout_width='80dp'

android:layout_height='60dp'

android:text='按键2'

android:layout_alignParentEnd='true'

android:layout_centerHorizontal 水平居中

android:layout_centerVertical 垂直居中

android:layout_centerInparent 相对于父容器完全居中

(4) 属性值为其他组件ID的属性

android:layout_above本组件在某组件的上方

android:layout_alignBaseline本组件和某组件的基线对齐。

android:layout_alignBottom 本组件的下边缘和某组件的的下边缘对齐

android:layout_alignEnd本组件的末端和某组件末端对齐

android:layout_alignRight 本组件的右边缘和某组件的的右边缘对齐

android:layout_alignLeft本组件左边缘和某组件左边缘对齐

android:layout_alignStart本组件的开始端和某组件开始端对齐

android:layout_alignTop 本组件的顶部和某组件的的顶部对齐

android:layout_below 本组件在某组件的下方

android:layout_toEndOf本组件在某组件末端

android:layout_toLeftOf本组件在某组件的左边

android:layout_toRightOf本组件在某组件的右边

android:layout_alignLeft 本组件在某组件开始端

这里基线概念很重要，参考http://blog.csdn.net/kehrwang/article/details/9041847。

基线解释：书写英语单词时为了规范书写会设有四条线，从上至下第三条就是基线。基线对齐主要是为了两个控件中显示的英文单词的基线对齐。

四、第四组：中心对齐。值为true/false

3. 综合的例子

<>xml version='1.0' encoding='utf-8'?>
<> xmlns:android='http://schemas./apk/res/android'
android:layout_width='fill_parent'
android:layout_height='fill_parent'
android:paddingLeft='16dp'
android:paddingRight='16dp'>
<>
android:id='@+id/name'
android:layout_width='fill_parent'
android:layout_height='wrap_content'
android:hint='@string/reminder'/>
<>
android:id='@+id/dates'
android:layout_width='0dp'
android:layout_height='wrap_content'
android:layout_below='@id/name'
android:layout_alignParentLeft='true'
android:layout_toLeftOf='@+id/times'/>
<>
android:id='@id/times'
android:layout_width='96dp'
android:layout_height='wrap_content'
android:layout_below='@id/name'
android:layout_alignParentRight='true'/>
<>
android:layout_width='96dp'
android:layout_height='wrap_content'
android:layout_below='@id/times'
android:layout_alignParentRight='true'
android:text='@string/done'/>