Android RelativeLayout

分享到:

RelativeLayout是一种相对布局控件,控件的位置是按照相对位置来计算的,后一个控件在什么位置依赖于前一个控件的位置,是布局最常用,也是最灵活的一种布局。

RelativeLayout XML属性:

android:layout_above 将该控件的底部置于给定ID的控件之上;
android:layout_below 将该控件的顶部置于给定ID的控件之下;
android:layout_toLeftOf 将该控件的右边缘与给定ID的控件左边缘对齐;
android:layout_toRightOf 将该b控件的左边缘与a的控件右边缘对齐
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,控件置于父控件的中央

RelativeLayout 实例:

<?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">

<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_alignParentTop="true"
android:layout_alignParentRight="true" android:layout_toRightOf="@+id/tv_username"
android:id="@+id/txt_username">

</EditText>

<EditText android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="@+id/txt_username"
android:layout_alignLeft="@+id/txt_username"
android:layout_alignParentRight="true" android:id="@+id/txt_password"></EditText>

<TextView android:id="@+id/tv_username" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="用户名称"
android:layout_alignParentTop="true" android:layout_alignParentLeft="true"
android:layout_marginTop="14dp"></TextView>

<Button android:text="登录" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="@+id/txt_password"
android:layout_alignParentRight="true" android:layout_alignLeft="@+id/txt_password"
android:id="@+id/btn_login"></Button>

<Button android:text="取消" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:layout_below="@+id/txt_password"
android:layout_alignRight="@+id/tv_username" android:id="@+id/btn_cacel"></Button>

<TextView android:id="@+id/tv_password" android:layout_width="wrap_content"
android:layout_height="wrap_content" android:text="用户密码"
android:layout_centerVertical="true" android:layout_toLeftOf="@+id/txt_password"></TextView>
</RelativeLayout>

效果如下图:

RelativeLayout实例

简要分析一下这个实例:

首先在布局中放置一个RelativeLayout做为整个结构的大框架

第一行有两个控件,左边是一个TextView,ID属性为@+id/tv_username,右侧是EditText,ID属性为@+id/txt_username ,在EditText上分别有这样几个属性android:layout_alignParentTop="true" (和父框架顶部对齐)android:layout_alignParentRight="true"(右对齐) android:layout_toRightOf="@+id/tv_username"(放置在ID属性为tv_username控件的右侧),左侧的TextView设置了android:layout_alignParentLeft="true"(左对齐),因此形成两个控件一左一右的布局。

第二行放置了与第一行是相同的控件,布局也大致相同,唯一要注意的是第二行的控件设置了android:layout_below属性,表示放置在哪个控件的下面,这样就形成了第二行的控件布局,要注意的是在相对布局下摆放多行结构如果不设置android:layout_below属性,控件将会重叠在一行。

第三行逻辑和第二行雷同。

RelativeLayout与LinearLayout嵌套布局的实例:

通常APP的UI设计的都比较复杂,只用一种布局会开发效率并不高,这时就要考虑使用多种Layout进行嵌套布局。因为每种布局都有其便利性和局限性。

<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"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.my.androidtest.MainActivity" >

	<TextView
		android:id="@+id/textView1"
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_alignParentLeft="true"
		android:layout_alignParentTop="true"
		android:text="这里是相对布局" />

	<LinearLayout
		android:layout_width="wrap_content"
		android:layout_height="wrap_content"
		android:layout_centerHorizontal="true"
		android:layout_centerVertical="true"
		android:orientation="vertical" >

         <TextView
          android:id="@+id/textView3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="这里是线性布局" />
         <TextView
          android:id="@+id/textView2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="这里是线性布局" />
         <TextView
          android:id="@+id/textView4"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="这里是线性布局" />
         <TextView
          android:id="@+id/textView5"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="这里是线性布局" />

  </LinearLayout>
</RelativeLayout>

效果如下图:

(注:图中的箭头,以及蓝色和红色的框是为了更直观的说明问题后期加上的,代码本身并无此效果)上图中蓝色框内是RelativeLayout形成的相对布局,红色框内是LinearLayout形成的线性布局,同时LinearLayout也做为RelativeLayout的一个子控件与顶部的TextView进行相对布局。LinearLayout可以轻易将多个控件以列表形式排列出来,如果用RelativeLayout来做这个效果就要给除第一行外的所有控件都设置android:layout_below属性或者android:layout_marginTop之类的属性,这是很麻烦的一件事。RelativeLayout的优势在于可以通过几个简单的属性就能把控件定位到屏幕的任何位置,这种优势LinearLayout是不具备的。

总结:通过例子我们能看出来RelativeLayout这种相对布局非常灵活,只要想清楚每个控件的上下左右分别是什么就能随心所欲的进行布局开发了,最后说明一点,上述各种属性只能在父控件是RelativeLayout的情况下使用,如果换成LinearLayout或都其它布局都是无效的。

昵    称:
验证码:

相关文档:

Android控件
Android基础知识
Android组件
Android实例