2.4相对布局

一、相对布局

常用属性

(1)相对于父容器居中

属性含义
layout_centerInParent在父容器居中
layout_centerHorizontal在父容器水平居中(true / false)
layout_centerVertical在父容器垂直居中

(2)相对于父容器对齐

属性含义
layout_alignParentLeft与父容器左对齐
layout_alignParentRight与父容器右对齐
layout_alignParentTop与父容器顶对齐
layout_alignParentBottom与父容器底对齐

(3)相对于其它控件位置

属性含义
layout_toLeftOf在……左边
layout_toRightOf在……右边
layout_above在……上面
layout_below在……下面

(4)相对于其它控件对齐

属性含义
layout_alignLeft与……左对齐
layout_alignRight与……右对齐
layout_alignTop与……顶对齐
layout_alignBottom与……底对齐
layout_alignBaseLine与……基线对齐

(5)标识符问题

标识符含义
@+id/button创建新的id(建议使用)
@id/button引用已有的id

二、相对布局演示

1、创建安卓应用

  • 基于模板创建RelativeLayoutDemo
    在这里插入图片描述

2、准备图片素材

  • 将背景图片拷贝到drawable目录
    在这里插入图片描述

3、字符串资源文件

  • 字符串资源文件 - strings.xml
    在这里插入图片描述

4、主布局资源文件

  • 主布局资源文件 - 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:text="@string/upper_left"
        android:layout_toLeftOf="@id/btn_center"
        android:layout_above="@id/btn_center"/>
    // 右上
    <Button
        android:id="@+id/btn_upper_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/upper_right"
        android:layout_toRightOf="@id/btn_center"
        android:layout_above="@id/btn_center"/>
     //左下
    <Button
        android:id="@+id/btn_lower_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/lower_left"
        android:layout_toLeftOf="@id/btn_center"
        android:layout_below="@id/btn_center"/>
     //右下
    <Button
        android:id="@+id/btn_lower_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/lower_right"
        android:layout_toRightOf="@id/btn_center"
        android:layout_below="@id/btn_center"/>
  </RelativeLayout>
  • 效果预览
    在这里插入图片描述

  • 在【左下】按钮正下方添加【确定】按钮
    在这里插入图片描述

  • 预览
    在这里插入图片描述

  • 右下按钮下方的取消按钮也如此
    在这里插入图片描述

  • 添加左上角,右上角,左下角,右下角以及上中,下中,左中,右中按钮

<?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:text="@string/upper_left"
        android:layout_toLeftOf="@id/btn_center"
        android:layout_above="@id/btn_center"/>
    <Button
        android:id="@+id/btn_upper_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/upper_right"
        android:layout_toRightOf="@id/btn_center"
        android:layout_above="@id/btn_center"/>
    <Button
        android:id="@+id/btn_lower_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/lower_left"
        android:layout_toLeftOf="@id/btn_center"
        android:layout_below="@id/btn_center"/>
    <Button
        android:id="@+id/btn_lower_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/lower_right"
        android:layout_toRightOf="@id/btn_center"
        android:layout_below="@id/btn_center"/>
	//确定按钮
    <Button
        android:id="@+id/btn_ok"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btn_lower_left"
        //左对齐
        android:layout_alignLeft="@id/btn_lower_left"
        android:text="@string/ok" />
	//取消按钮
    <Button
        android:id="@+id/btn_cancel"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/cancel"
        android:layout_below="@id/btn_lower_right"
        //右对齐
        android:layout_alignRight="@id/btn_lower_right"
        />
     //左上角
    <Button
        android:id="@+id/btn_upper_left_corner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="@string/upper_left_corner"
        />
     //右上角
    <Button
        android:id="@+id/btn_upper_right_corner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="@string/upper_right_corner"
        />
     //左下角
    <Button
        android:id="@+id/btn_lower_left_corner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentBottom="true"
        android:text="@string/lower_left_corner"
        />
     //右下角
    <Button
        android:id="@+id/btn_lower_right_corner"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentBottom="true"
        android:text="@string/lower_right_corner"
        />
	//上中
    <Button
        android:id="@+id/center_top"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        //居中
        android:layout_centerInParent="true"
        android:text="@string/center_top" />
    <Button
        android:id="@+id/center_bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerInParent="true"
        android:text="@string/center_bottom" />
    <Button
        android:id="@+id/center_left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_centerInParent="true"
        android:text="@string/center_left" />

    <Button
        android:id="@+id/center_right"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_centerInParent="true"
        android:text="@string/center_right" />


</RelativeLayout>
  • 运行应用,查看最终效果
    在这里插入图片描述
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值