《相对布局》

---

一、学习要点

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

二、相对布局案例演示

1、效果图

2、创建安卓应用

• 基于Empty Activity创建 - RelativeLayoutDemo应用
  
  

3、字符串资源文件

• strings.xml
  

<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目录
  

5、主布据资源文件

• activity_main.xml
  
• 修改布局方式，删除多余标签，设置相关属性
  
• 添加一个中央按钮
  
• 预览效果
  
• 以【中央】按钮为参考点，在其左上角添加【左上】按钮
  
• 预览效果
  
• 分别在【中央】周围添加【右上】、【左下】和【右下】按钮
  
• 预览效果
  
• 在【左下】按钮下方添加【确定】按钮
  
• 预览效果
  
• 在 【右下】按钮下方添加【取消】按钮
  
• 预览效果
  
• 在屏幕四个角添加【左上角】、【右上角】、【左下角】和【右下角】按钮
  
• 预览效果
  
• 添加【上中】、【左中】、【右中】和【下中】四个按钮
  
• 查看效果
  

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

三、总结

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