Android RelativeLayout 相对布局解析

时间：2022-04-26 05:25:40

Android RelativeLayout 属性


// 相对于给定ID控件

android:layout_above 将该控件的底部置于给定ID的控件之上;

android:layout_below 将该控件的底部置于给定ID的控件之下;

android:layout_toLeftOf    将该控件的右边缘与给定ID的控件左边缘对齐;

android:layout_toRightOf  将该控件的左边缘与给定ID的控件右边缘对齐;

 

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,将该控件的置于父控件的*;

// 指定移动像素

android:layout_marginTop      上偏移的值;

android:layout_marginBottom 下偏移的值;

android:layout_marginLeft 　　左偏移的值;

android:layout_marginRight 　 右偏移的值;

 

example:

android:layout_below = "@id/***"

android:layout_alignBaseline = "@id/***"

android:layout_alignParentTop = true

android:layout_marginLeft = “10px”

Android RelativeLayout 相对布局解析

Android RelativeLayout 相对布局解析，使用相对布局，在容器中的子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。android 布局，android relativelayout ，android 相对布局，android layout ，android 水平居中，android 垂直居中，android 居中显示。

RelativeLayout

在这个容器中，其子元素可以使用彼此之间的相对位置或者与容器之间的相对位置进行定位。

需要注意的是，不能在 RelativeLayout 容器本身与它的子元素之间产生循环依赖，比如将 RelativeLayout 的高设置成 wrap_content 时将子元素设置为 ALIGN_PARENT_BOTTOM 。

排列与对齐

1、布局属性1

排列属性，值为其相关控件的 ID ，如 android:layout_above = "@id/btn1" ，表示位于控件 btn1 的上面。

  • layout_above   将该控件置于给定 ID 的控件之上
  • layout_below   将该控件置于给定 ID 的控件之下
  • layout_toLeftOf   将该控件置于给定 ID 的控件之左
  • layout_toRightOf   将该控件置于给定 ID 的控件之右

示例演示

Android RelativeLayout 相对布局解析
图1

XML 布局文件

以下为引用内容： 
<?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"
android:padding="10px"
>
<TextView 
android:id="@+id/text1"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="Textview:"
/>
<EditText 
android:id="@+id/edit1"
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:layout_below="@id/text1"   // 位于 text1 控件的下面
/> 
</RelativeLayout>

2、布局属性2

对齐属性，值为其相关控件的 ID ，如 android:layoutTop = "@id/btn1" ，表示与控件 btn1 的顶端对齐。

  • layout_alignBaseline   基线对齐
  • layout_alignTop   顶对齐 
  • layout_alignBottom   底对齐 
  • layout_alignLeft   左对齐
  • layout_alignRight   右对齐

示例演示

Android RelativeLayout 相对布局解析
图2

XML 布局文件

以下为引用内容： 
<?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"
android:padding="10px"
>
<TextView 
android:id="@+id/text1"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="Textview:"
/>
<EditText 
android:id="@+id/edit1"
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:layout_below="@id/text1" 
/>
<Button 
android:id="@+id/button1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_below="@id/edit1"
android:layout_alignRight="@id/edit1"   // 与 edit1 控件右边对齐
android:text="OK"
/> 
</RelativeLayout>

3、布局属性3

相对父控件的对齐属性，值为 true ，如 android:layout_alignParentTop = "true" ，表示该控件与父控件的顶端对齐。

  • layout_alignParentTop   与父控件顶部对齐
  • layout_alignParentBottom   与父控件底部对齐
  • layout_alignParentLeft   与父控件左边对齐
  • layout_alignParentRight   与父控件右边对齐

示例演示

Android RelativeLayout 相对布局解析
图3

XML 布局文件

以下为引用内容： 
<?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"
android:padding="10px"
>
<TextView 
android:id="@+id/text1"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="Textview:"
/>
<EditText 
android:id="@+id/edit1"
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:layout_below="@id/text1" 
/>
<Button 
android:id="@+id/button1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_below="@id/edit1"
android:layout_alignParentLeft="true"   // 对齐到父控件 RelativeLayout 容器的左边
android:text="OK"
/> 
</RelativeLayout>

4、布局属性4

居中对齐属性，控件在父控件中的居中对齐方式，值为 true ，如 android:layout_centerInparent = "true" ，表示该控件在父控件容器的水平与垂直方向居中。

  • layout_centerHorztal   水平方向居中
  • layout_centerVertical   垂直方向居中
  • layout_centerInparent   水平与垂直方向居中

示例演示

Android RelativeLayout 相对布局解析
图4

XML 布局文件

以下为引用内容： 
<?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"
android:padding="10px"
>
<TextView 
android:id="@+id/text1"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="Textview:"
/>
<EditText 
android:id="@+id/edit1"
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:layout_below="@id/text1" 
/>
<Button 
android:id="@+id/button1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_below="@id/edit1"
android:layout_centerHorizontal="true"  // 水平方向居中
android:text="OK"
/> 
</RelativeLayout>
综合实例

白色背景区域为 RelativeLayout 容器，内容与边框间距 padding 为10px ，EditText 位于 textView 的下面，Canel 、OK 按钮又位于 EditText 的下面，OK 按钮与父控件 RelativeLayout 容器右边对齐，Canel 按钮位于 OK 按钮的左边。

Android RelativeLayout 相对布局解析
图5

XML 布局文件

以下为引用内容： 
<?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="138dp"
android:background="#f3f3f3"
android:padding="10px"
>
<TextView 
android:id="@+id/text1"
android:layout_width="wrap_content" 
android:layout_height="wrap_content" 
android:text="Textview:"
/>
<EditText 
android:id="@+id/edit1"
android:layout_width="fill_parent" 
android:layout_height="wrap_content"
android:layout_below="@id/text1" 
/>
<Button 
android:id="@+id/button1"
android:layout_width="60dp"
android:layout_height="wrap_content"
android:layout_below="@id/edit1"
android:layout_alignParentRight="true"
android:text="OK"
/>
<Button 
android:id="@+id/button2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@id/edit1"
android:layout_toLeftOf="@id/button1"
android:text="Canel"
/> 
</RelativeLayout>

标签：

相关文章