详解android四种布局之RelativeLayout

小咪咪 2022-07-17 04:09 316阅读 0赞

# 第二种布局： RelativeLayout #

RelativeLayout又称作相对布局，也是一种非常常用的布局。，它可以通过相对定位的方式让控件出现在布局 的任何位置。也正因为如此，RelativeLayout中的属性非常多，不过这些属性都是有规律可 循的，其实并不难理解和记忆。

## 1. RelativeLayout相对父布局进行定位 ##

### 1.1 xml文件代码 ###

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >
    
        <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:text="Button 1" />
    
        <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentTop="true" android:text="Button 2" />
    
        <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button 3" />
    
        <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentLeft="true" android:text="Button 4" /> 
    
        <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:layout_alignParentRight="true" android:text="Button 5" /> 
    </RelativeLayout>

### 1.2 RelativeLayout布局时控件可使用的属性说明： ###

#### 1.2.1 android:layout\_centerInParent=”true” 在父布局的正中央 ####

#### 1.2.2 android:layout\_alignParentBottom=”true” 在父布局的底端 ####

#### 1.2.3 android:layout\_alignParentTop=”true” 在父布局的顶端 ####

#### 1.2.4 android:layout\_alignParentRight=”true” 在父布局的右端 ####

#### 1.2.5 android:layout\_alignParentLeft=”true” 在父布局的左端 ####

#### 注意：单一对齐方式出现时，Right和Left只在顶端出现，Botton和Top只在底端出现 ####

### 1.3 效果： ###

![这里写图片描述][20160830225510081]

--------------------

## 2. RelativeLayout相对其他控件布局 ##

### 2.1 以下为xml文件的代码： ###

<?xml version="1.0" encoding="utf-8"?>
    <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" >
        <Button android:id="@+id/button3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:text="Button 3" />
    
        <Button android:id="@+id/button1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" android:layout_toLeftOf="@id/button3" android:text="Button 1" />
    
        <Button android:id="@+id/button2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@id/button3" android:layout_toRightOf="@id/button3" android:text="Button 2" />
    
        <Button android:id="@+id/button4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" android:layout_toLeftOf="@id/button3" android:text="Button 4" />
    
        <Button android:id="@+id/button5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@id/button3" android:layout_toRightOf="@id/button3" android:text="Button 5" />
    </RelativeLayout>

### 2.2 RelativeLayout布局时，控件可使用属性说明： ###

#### 2.2.1 android:layout\_above=”@id/button3” 在button3控件上方 ####

#### 2.2.2 android:layout\_below=”@id/button3” 在button3控件下方 ####

#### 2.2.3 android:layout\_toRightOf=”@id/button3” 在button3控件右方 ####

#### 2.2.4 android:layout\_toLeftOf=”@id/button3” 在button3控件左方 ####

#### 2.2.5 注意：单一出现时，toLeftOf和toRightOf分别在button3左右两边的最上方，above和below分别在button3的上下两边的最左边 ####

### 2.3 效果： ###

#### 2.3.1 完整 ####

![完整][20160830231521248]

#### 2.3.1 单一左边：layout\_toLeftOf=”@id/button3” ####

![单一左边][20160830232339338]

### 2.3.3 单一上边：layout\_above=”@id/button3” ###

![单一上边][20160830232556857]

[20160830225510081]: /images/20220717/c7238a423b8b45d3b73f5f4d2f974a67.png
[20160830231521248]: /images/20220717/b7cbf2a97c824086867bc63d7b219794.png
[20160830232339338]: /images/20220717/d9e5abd910db4da9aac9a3bd4a903888.png
[20160830232556857]: /images/20220717/0240cbd83c554c6f88fdde88b9c1c704.png