§2.2 七大布局------相对布局(RelativeLayout)

相对布局(RelativeLayout)的子控件位置总是相对于兄弟控件、父类容器来决定的。

比如,在“Hello World应用”中,布局文件layout/activity_main.xml的代码如下:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:id="@+id/activity_main"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     android:paddingBottom="18dp"
 8     android:paddingLeft="18dp"
 9     android:paddingRight="18dp"
10     android:paddingTop="18dp"
11     tools:context="com.rongma.helloworld.MainActivity">
12
13     <TextView
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="Hello World!" />
17 </RelativeLayout>

这个界面就是通过相对布局来实现的。 其中我们只需关注android开头的属性:

android:id、android:layout_width、android:layout_height在2.1章节已介绍过,不再赘述。

Android相对布局的属性有一个特点,就是大多数属性都是成堆出现的。比如:描述外边距的属性,就包括:marginTop、marginBottom、marginLeft、marginRight
描述内边距的属性 包括 paddingTop paddingBottom paddingLeft paddingRight
发现规律了没,我们只需要记住属性的前缀是代表什么意思的,那么在后面添加(上下左右)方向就可以了。

相对于父容器的属性

1 alignParent系列
android:layout_alignParentBottom控制该组件是否和布局管理器底端对齐
android:layout_alignParentEnd控制该组件是否和布局管理器末端对齐
android:layout_alignParentLeft 控制该组件是否和布局管理器左边对齐
android:layout_alignParentRight控制该组件是否和布局管理器右边对齐
android:layout_alignParentStart控制该组件是否和布局管理器开始对齐
android:layout_alignParentTop控制该组件是否和布局管理器顶部对齐
这个系列的属性通过true或false来控制组件相对布局管理器的对齐方式

2 center系列
android:layout_centerHorizontal 水平居中
android:layout_centerVertical 垂直居中
android:layout_centerInparent 相对于父容器完全居中
这个系列的属性通过true或false来控制组件相对父容器的居中方式

3 margin系列
android:layout_marginBottom 离父容器底边缘的距离
android:layout_marginLeft 离父容器左边缘的距离
android:layout_marginRight 离父容器右边缘的距离
android:layout_marginTop 离父容器上边缘的距离
这个系列的属性通过实际值来控制边距。



相对于兄弟容器的属性

1 align系列
android:layout_alignBaseline本组件和某组件的基线对齐。
android:layout_alignBottom 本组件的下边缘和某组件的的下边缘对齐
android:layout_alignEnd本组件的末端和某组件末端对齐
android:layout_alignRight 本组件的右边缘和某组件的的右边缘对齐
android:layout_alignLeft本组件左边缘和某组件左边缘对齐
android:layout_alignStart本组件的开始端和某组件开始端对齐
android:layout_alignTop 本组件的顶部和某组件的的顶部对齐
这个系列的属性通过@id/xxx,来确定相对于哪个组件进行对齐。

2 相对兄弟容器位置系列
android:layout_below 本组件在某组件的下方
android:layout_top 本组件在某组件的上方
android:layout_toLeftOf本组件在某组件的左边
android:layout_toRightOf本组件在某组件的右边
这个系列的属性通过@id/xxx,来确定相对于哪个组件的位置

3 margin系列
android:layout_marginBottom 离某元素底边缘的距离
android:layout_marginLeft 离某元素左边缘的距离
android:layout_marginRight 离某元素右边缘的距离
android:layout_marginTop 离某元素上边缘的距离
这个系列的属性,如果与“相对兄弟容器位置系列”的属性搭配使用,则可以通过它来设置相对于某组件的外边距。

例如:我们在一个相对布局中,有两个TextView,如果第二个TextView在第一个TextView的右侧,那么此时设置marginLeft属性,则为相对于第一个TextView的边距。
show you the code:

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     xmlns:tools="http://schemas.android.com/tools"
 4     android:id="@+id/activity_main"
 5     android:layout_width="match_parent"
 6     android:layout_height="match_parent"
 7     tools:context="com.rongma.helloworld.MainActivity">
 8     <TextView
 9         android:layout_width="wrap_content"
10         android:layout_height="wrap_content"
11         android:text="我在左侧"
12         android:background="#00ffff"
13         android:textSize="22sp"
14         android:id="@+id/tv_left"
15         />
16     <TextView
17         android:layout_width="wrap_content"
18         android:layout_height="wrap_content"
19         android:text="我在右侧"
20         android:background="#00ff00"
21         android:textSize="22sp"
22         android:id="@+id/tv_right"
23         android:layout_toRightOf="@id/tv_left"
24         android:layout_marginLeft="30dp"
25     />
26 </RelativeLayout>

通过 toRightOf属性,设置了第二个TextView位于第一个TextView的右侧。
此时,marginLeft属性,设置的是第二个TextView相对于第一个TextView的左边距。效果如图:

时间: 2024-12-29 12:02:09

§2.2 七大布局------相对布局(RelativeLayout)的相关文章

RelativeLayout相对布局 安卓布局技巧

http://blog.csdn.net/nieweiking/article/details/38417317 RelativeLayout相对布局 相对布局 RelativeLayout 允许子元素指定它们相对于其父元素或兄弟元素的位置,这是实际布局中最常用的布局方式之一.它灵活性大很多,当然属性也多,操作难度也大,属性之间产生冲突的的可能性也大,使用相对布局时要多做些测试. 下面是常用的一些属性 第一类:属性值为true或false android:layout_centerHrizont

布局Layouts之RelativeLayout相对布局

RelativeLayout相对布局 RelativeLayout是一种相对布局,控件的位置是按照相对位置来计算的,后一个控件在什么位置依赖于前一个控件的基本位置,是布局最常用,也是最灵活的一种布局. 我们下面通过XML布局和Java代码布局两种方式分别举例: 一.XML方式布局 1.创建一个空白Activity 2.打开“res/layout/activity_main.xml”文件,修改成以下代码. (1)第①部分 <?xml version="1.0" encoding=&

布局Layouts之RelativeLayout相对布局(转)

RelativeLayout相对布局 RelativeLayout是一种相对布局,控件的位置是按照相对位置来计算的,后一个控件在什么位置依赖于前一个控件的基本位置,是布局最常用,也是最灵活的一种布局. 我们下面通过XML布局和Java代码布局两种方式分别举例: 一.XML方式布局 1.创建一个空白Activity 2.打开“res/layout/activity_main.xml”文件,修改成以下代码. (1)第①部分 <?xml version="1.0" encoding=&

第13章、布局Layouts之RelativeLayout相对布局(从零開始学Android)

RelativeLayout相对布局 RelativeLayout是一种相对布局,控件的位置是依照相对位置来计算的,后一个控件在什么位置依赖于前一个控件的基本位置,是布局最经常使用,也是最灵活的一种布局. 我们以下通过XML布局和Java代码布局两种方式分别举例: 一.XML方式布局 1.创建一个空白Activity 2.打开"res/layout/activity_main.xml"文件,改动成下面代码. (1)第①部分 <?xml version="1.0"

Android五大布局——LinearLayout、RelativeLayout

Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLayout(线性布局).FrameLayout(单帧布局).RelativeLayout(相对布局).AbsoluteLayout(绝对布局)和TableLayout(表格布局). LinearLayout: LinearLayout按照垂直或者水平的顺序依次排列子元素,每一个子元素都位于前一个元素之后

Android 布局学习之——Layout(布局)具体解释二(常见布局和布局參数)

 [Android布局学习系列]   1.Android 布局学习之--Layout(布局)具体解释一   2.Android 布局学习之--Layout(布局)具体解释二(常见布局和布局參数)   3.Android 布局学习之--LinearLayout的layout_weight属性   4.Android 布局学习之--LinearLayout属性baselineAligned的作用及baseline    Layout Parameters(布局參数): 在XML文件里,我们常常看到类

Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)

[Android布局学习系列]   1.Android 布局学习之——Layout(布局)详解一   2.Android 布局学习之——Layout(布局)详解二(常见布局和布局参数)   3.Android 布局学习之——LinearLayout的layout_weight属性   4.Android 布局学习之——LinearLayout属性baselineAligned的作用及baseline    Layout Parameters(布局参数): 在XML文件中,我们经常看到类似与lay

UI布局 自定义布局

今天学习了UI布局当中的自定义的布局的部分,在开始的时候先动手写了一个跟随手指移动的小兔子的实例,初步的了解了布局管理器的概念之后开始正式进行布局管理器,其中包括相对布局,线性布局,帧布局,表格布局,网格布局,嵌套布局,但是今天只学习了前三 个,相对布局,线性布局,帧布局,并且做了三个相关的实例   ,  注意的是: 所有的布局全都是relativeLayout. 下面是对这三个布局的总结: 1.相对布局  RelativeLayout gravity(控制组件)   ignoreGravity

CSS布局-圣杯布局

圣杯布局 圣杯布局很完美(兼容所有浏览器,包括IE6),但是使用了相对定位,布局有局限性,宽度控制要改的地方也多. 第一种方法公用部分: .lgyz, .lzrg, .lrzcg, .lcgrz, .lzcrg {margin:10px 0; min-width:400px;text-align: center;color:#ffffff; } .left {background-color: #4DBCB0; padding:20px 0;} .aside, .center, .right {

IOS开发UI篇--UITableView的自定义布局==xib布局

利用Xib进行实现 应用场景:像团购网站的列表数据显示,新闻列表显示等(由于该类的显示的数据单元格内容格式相同) (1)主控制器文件,在文件中实现了自己自定义的代理,加载数据, 1 #import "SLViewController.h" 2 #import "SLTgDatas.h" 3 #import "SLTableViewCell.h" 4 #import "SLFooterView.h" 5 #import &quo