《相对布局》

左手的ㄟ右手 2024-04-01 18:16 79阅读 0赞

#### 文章目录 ####

*  一、学习要点
 *  二、相对布局案例演示
 *   *  1、效果图
     *  2、创建安卓应用
     *  3、字符串资源文件
     *  4、图片素材
     *  5、主布据资源文件
 *  三、总结

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

## 一、学习要点 ##

1.  相对布局特点
2.  相对布局的继承关系
3.  相对布局常用属性
4.  线性布局嵌套相对布局

## 二、相对布局案例演示 ##

### 1、效果图 ###

![在这里插入图片描述][7e3917c7145249ab8bab906580871bdd.png]

### 2、创建安卓应用 ###

*  基于`Empty Activity`创建 - `RelativeLayoutDemo`应用  
    ![在这里插入图片描述][0875935d4e6e4090a9f1c6c1d63e2eb1.png]![在这里插入图片描述][722317178c1b409089f6d0f928887613.png]  
    ![在这里插入图片描述][422fd90d421a465a98a2e65158ecf49e.png]

### 3、字符串资源文件 ###

*  `strings.xml`  
    ![在这里插入图片描述][a1feac3b3c0e44b3860f413400c63bf9.png]

<resources>
        <string name="app_name">相对布局演示</string>
        <string name="upper_left_corener">左上角</string>
        <string name="upper_right_corener">右上角</string>
        <string name="lower_left_corener">左下角</string>
        <string name="lower_right_corener">右下角</string>
        <string name="center">中央</string>
        <string name="upper_left">左上</string>
        <string name="upper_right">右上</string>
        <string name="lower_left">左上</string>
        <string name="lower_right">右上</string>
        <string name="ok">确定</string>
        <string name="cancel">取消</string>
        <string name="left_center">左中</string>
        <string name="right_center">右中</string>
        <string name="upper_center">上中</string>
        <string name="lower_center">下中</string>
    </resources>

### 4、图片素材 ###

*  将图片background拷贝到drawable目录  
    ![在这里插入图片描述][85854c0d98cf4a23b930bf0cad293e0d.png]

### 5、主布据资源文件 ###

*  `activity_main.xml`  
    ![在这里插入图片描述][863ad65cee1443b78db97fbc534b8cc5.png]
 *  修改布局方式，删除多余标签，设置相关属性  
    ![在这里插入图片描述][19455931ed00494ea2b6503b5ed8818b.png]
 *  添加一个中央按钮  
    ![在这里插入图片描述][5817fb10f10b47b3a63a20b5cc3fa25e.png]
 *  预览效果  
    ![在这里插入图片描述][031f6bec73104987b4dba9a29547f42a.png]
 *  以【中央】按钮为参考点，在其左上角添加【左上】按钮  
    ![在这里插入图片描述][b2c22d811d764b69a148f093faf5ed20.png]
 *  预览效果  
    ![2c473bbc3f3946c8bdf77103c6b85226.png][]
 *  分别在【中央】周围添加【右上】、【左下】和【右下】按钮  
    ![在这里插入图片描述][dbd32b39994b443f8eb0faffb696c876.png]
 *  预览效果  
    ![在这里插入图片描述][477c57777ddb440c8d8f89297d25115b.png]
 *  在【左下】按钮下方添加【确定】按钮  
    ![在这里插入图片描述][4b5d60b1c62949b0bd678706a45b09d1.png]
 *  预览效果  
    ![在这里插入图片描述][2b45cfd685a04f9fb9985b8052fe44f9.png]
 *  在 【右下】按钮下方添加【取消】按钮  
    ![在这里插入图片描述][57181b9cfd9243719db115e8f62aee49.png]
 *  预览效果  
    ![在这里插入图片描述][dc8ecee655de41b98c052f563a83d199.png]
 *  在屏幕四个角添加【左上角】、【右上角】、【左下角】和【右下角】按钮  
    ![在这里插入图片描述][aca2166c192a4b3ea45f4edef6013a85.png]
 *  预览效果  
    ![在这里插入图片描述][2dbbb9dacc6c4f6e97511ad804ada7e9.png]
 *  添加【上中】、【左中】、【右中】和【下中】四个按钮  
    ![在这里插入图片描述][3277a8ac6c5641d4bdbb6d99687de046.png]
 *  查看效果  
    ![在这里插入图片描述][b1aab75de95c414fbd1f2be501a8c2f2.png]

<?xml version="1.0" encoding="utf-8"?>
    <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"
        tools:context=".MainActivity"
        android:background="@drawable/background">
    
        <Button
            android:id="@+id/btn_center"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerInParent="true"
            android:text="@string/center" />
    
        <Button
            android:id="@+id/btn_upper_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/btn_center"
            android:layout_toLeftOf="@id/btn_center"
            android:text="@string/upper_left" />
    
        <Button
            android:id="@+id/btn_upper_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@id/btn_center"
            android:layout_toRightOf="@id/btn_center"
            android:text="@string/upper_right" />
    
        <Button
            android:id="@+id/lower_left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/btn_center"
            android:layout_toLeftOf="@id/btn_center"
            android:text="@string/lower_left_corener" />
    
        <Button
            android:id="@+id/lower_right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/btn_center"
            android:layout_toRightOf="@id/btn_center"
            android:text="@string/lower_left_corener" />
    
        <Button
            android:id="@+id/btn_ok"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/lower_left"
            android:layout_alignLeft="@id/lower_left"
            android:text="@string/ok" />
    
        <Button
            android:id="@+id/btn_cancel"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_below="@id/lower_left"
            android:layout_alignRight="@id/lower_right"
            android:text="@string/cancel" />
    
        <Button
            android:id="@+id/btn_upper_left_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:text="@string/upper_left_corener" />
    
        <Button
            android:id="@+id/btn_upper_right_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_alignParentRight="true"
            android:text="@string/upper_right_corener" />
        <Button
            android:id="@+id/btn_lower_left_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_alignParentBottom="true"
            android:text="@string/lower_left_corener" />
    
        <Button
            android:id="@+id/btn_lower_right_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_alignParentBottom="true"
            android:text="@string/lower_right_corener" />
    
        <Button
            android:id="@+id/btn_right_center_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:layout_centerVertical="true"
            android:text="@string/right_center" />
    
        <Button
            android:id="@+id/btn_left_center_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true"
            android:text="@string/left_center" />
    
        <Button
            android:id="@+id/btn_upper_center_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentTop="true"
            android:layout_centerHorizontal="true"
            android:text="@string/upper_center" />
        <Button
            android:id="@+id/btn_lower_center_corener"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true"
            android:text="@string/lower_center"/>
    </RelativeLayout>

## 三、总结 ##

熟悉相对布局常用属性以及线性布局嵌套相对布局。

[7e3917c7145249ab8bab906580871bdd.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ff33d02adeba49329e82f0d1205c0ebd.png
[0875935d4e6e4090a9f1c6c1d63e2eb1.png]: https://img-blog.csdnimg.cn/0875935d4e6e4090a9f1c6c1d63e2eb1.png
[722317178c1b409089f6d0f928887613.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ca96e99c47904558967d0b59ae0f5a31.png
[422fd90d421a465a98a2e65158ecf49e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a7742fe044454745896fb3403fe69d38.png
[a1feac3b3c0e44b3860f413400c63bf9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/10087cfb6f094c479046baec27dd25a5.png
[85854c0d98cf4a23b930bf0cad293e0d.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/ce80964a369b493293b03d055f7b0e10.png
[863ad65cee1443b78db97fbc534b8cc5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/1da416099495428a957b63621444e6b6.png
[19455931ed00494ea2b6503b5ed8818b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/65bf240bf59e4cf1b2a3edd0af48ad98.png
[5817fb10f10b47b3a63a20b5cc3fa25e.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4674d3d6a22645f1bf3951b1a1a5b608.png
[031f6bec73104987b4dba9a29547f42a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/7996ec7b9ca54f8585a3ab1b014db3fe.png
[b2c22d811d764b69a148f093faf5ed20.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/8233829838c340888cddaa5e5fa0c7c5.png
[2c473bbc3f3946c8bdf77103c6b85226.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/4790845c91c742c8a6c2f8f709023d78.png
[dbd32b39994b443f8eb0faffb696c876.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/fa7d9d3fa713484d80f962e451b6acf8.png
[477c57777ddb440c8d8f89297d25115b.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/0a0a1c8db88a4932984364a2546dcfb6.png
[4b5d60b1c62949b0bd678706a45b09d1.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/d5c2ef060b7f48838a26ee6ce7b36fd9.png
[2b45cfd685a04f9fb9985b8052fe44f9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/58089e2031ff46fa9e7006656ac3ca89.png
[57181b9cfd9243719db115e8f62aee49.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f7030a74c1b14f7c82024e309517b226.png
[dc8ecee655de41b98c052f563a83d199.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/3e9a0343b6e34f009665943272e324fe.png
[aca2166c192a4b3ea45f4edef6013a85.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/a66980f5b0b342c7b2a02a6944f648e5.png
[2dbbb9dacc6c4f6e97511ad804ada7e9.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/f4809bc9d38341b68ebb1bea3f34d431.png
[3277a8ac6c5641d4bdbb6d99687de046.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/00b88187a440445b9a847c644bef6f0b.png
[b1aab75de95c414fbd1f2be501a8c2f2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/01/b15471b5d79d4947b72dd5f89c2e9b15.png