基础布局之RelativeLayout相对布局

2024-03-31 19:04

本文主要是介绍基础布局之RelativeLayout相对布局,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

  • 概述
  • 一、属性分类
  • 二、父容器定位属性
    • 2.1 示例1
    • 2.2 示例2
  • 三、相对定位属性
    • 3.1 示例1
    • 3.2 示例2
    • 3.3 示例3


概述

相对布局(RelativeLayout)是一种根据父容器和兄弟控件作为参照来确定控件位置的布局方式。
使用相对布局,需要将布局节点改成RelativeLayout,基本格式如下:

<?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"></RelativeLayout>

一、属性分类

线性布局和相对布局是兼容的,在线性布局常用的属性外,最常用的属性如下:
与父容器定位相关属性

属性作用
android:layout_alignParentTop控件顶部与父布局的顶部对齐。
android:layout_alignParentBottom控件底部与父布局的底部对齐。
android:layout_alignParentLeft控件左边与父布局的左边对齐。
android:layout_alignParentRight控件右边与父布局的右边对齐。
android:layout_alignParentStart将控件的起始边(根据布局方向,可能是左边或右边)与父容器的起始边对齐。
android:layout_alignParentEnd将控件的结束边(根据布局方向,可能是右边或左边)与父容器的结束边对齐。
android:layout_centerHorizontal将控件水平居中对齐。
android:layout_centerVertical将控件垂直居中对齐。
android:layout_centerInParent水平垂直都居中

相对定位属性:

属性作用
android:layout_above控件放置在指定控件的上方。
android:layout_below控件放置在指定控件的下方。
android:layout_toLeftOf控件放置在指定控件的左边。
android:layout_toRightOf控件放置在指定控件的右边。
android:layout_alignTop控件的顶部与指定控件的顶部对齐。
android:layout_alignBottom控件的底部与指定控件的底部对齐。
android:layout_alignLeft控件的左边与指定控件的左边对齐。
android:layout_alignRight控件的右边与指定控件的右边对齐。
android:layout_alignStart将控件的起始边(根据布局方向,可能是左边或右边)与指定控件的起始边对齐。
android:layout_alignEnd将控件的结束边(根据布局方向,可能是右边或左边)与指定控件的结束边对齐。
android:layout_alignBaseline控件的基线与指定控件的基线对齐。

其中start、end相关的两个属性通常用于支持不同语言的布局需求,例如从右到左的阿拉伯语布局。在安卓开发中,可以通过设置这两个属性来实现适应不同语言布局方向的界面设计。


二、父容器定位属性

2.1 示例1

简单举例一下:

<?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"><Buttonandroid:layout_width="150dp"android:layout_height="150dp"android:layout_alignParentRight="true"android:layout_centerVertical="true"android:background="@color/green" /></RelativeLayout>

与父布局右边对齐,垂直居中
在这里插入图片描述

2.2 示例2

看一下 android:layout_centerInParent=“true”
在父布局中垂直、水平方向都居中。

<?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"><Buttonandroid:layout_width="150dp"android:layout_height="150dp"android:layout_centerInParent="true"android:background="@color/green" /></RelativeLayout>

在这里插入图片描述


三、相对定位属性

3.1 示例1

看一下
android:layout_above 控件放置在指定控件的上方。
android:layout_below 控件放置在指定控件的下方。
android:layout_toLeftOf 控件放置在指定控件的左边。
android:layout_toRightOf 控件放置在指定控件的右边。

<?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"><Buttonandroid:id="@+id/center"android:layout_width="150dp"android:layout_height="150dp"android:layout_centerInParent="true"android:background="@color/green" /><Buttonandroid:id="@+id/left"android:layout_width="100dp"android:layout_height="100dp"android:layout_toLeftOf="@+id/center"android:background="@color/pink" /><Buttonandroid:id="@+id/right"android:layout_width="100dp"android:layout_height="100dp"android:layout_toRightOf="@+id/center"android:background="@color/blue" /><Buttonandroid:id="@+id/top"android:layout_width="100dp"android:layout_height="100dp"android:layout_above="@+id/center"android:background="@color/red" /><Buttonandroid:id="@+id/below"android:layout_width="100dp"android:layout_height="100dp"android:layout_below="@+id/center"android:background="@color/yellow" />
</RelativeLayout>

在这里插入图片描述

3.2 示例2

在上面的基础上添加
android:layout_alignTop 控件的顶部与指定控件的顶部对齐。
android:layout_alignBottom 控件的底部与指定控件的底部对齐。
android:layout_alignLeft 控件的左边与指定控件的左边对齐。
android:layout_alignRight 控件的右边与指定控件的右边对齐。

分别与中心控件的顶部、底部、左边、右边对齐。

<?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"><Buttonandroid:id="@+id/center"android:layout_width="150dp"android:layout_height="150dp"android:layout_centerInParent="true"android:background="@color/green" /><Buttonandroid:id="@+id/left"android:layout_width="100dp"android:layout_height="100dp"android:layout_alignTop="@+id/center"android:layout_toLeftOf="@+id/center"android:background="@color/pink" /><Buttonandroid:id="@+id/right"android:layout_width="100dp"android:layout_height="100dp"android:layout_alignBottom="@id/center"android:layout_toRightOf="@+id/center"android:background="@color/blue" /><Buttonandroid:id="@+id/top"android:layout_width="100dp"android:layout_height="100dp"android:layout_above="@+id/center"android:layout_alignLeft="@+id/center"android:background="@color/red" /><Buttonandroid:id="@+id/below"android:layout_width="100dp"android:layout_height="100dp"android:layout_below="@+id/center"android:layout_alignRight="@+id/center"android:background="@color/yellow" />
</RelativeLayout>

在这里插入图片描述

3.3 示例3

看一下android:layout_alignBaseline的使用:

在安卓相对布局中,android:layout_alignBaseline 是用于将控件的基线与指定控件的基线对齐的属性。基线是文本行中字符底部对齐的虚拟线,通常用于对齐文本或文字相关的控件。

使用详解如下:

当一个控件设置了 android:layout_alignBaseline=“@id/otherView”,该控件的基线会与指定控件(@id/otherView)的基线对齐。
如果两个控件都设置了 android:layout_alignBaseline,则它们的基线会对齐。
如果指定的控件没有基线(比如非文本控件),则基线对齐的效果可能不明显。

没有添加layout_alignBaseline的效果:

<?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"><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/yellow"android:text="hello" /><TextViewandroid:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/text1"android:background="@color/pink"android:padding="20dp"android:text="world" />
</RelativeLayout>

在这里插入图片描述
添加layout_alignBaseline的效果:
给textview1添加

<?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"><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/yellow"android:layout_alignBaseline="@+id/text2"android:text="hello" /><TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/text1"android:background="@color/pink"android:padding="20dp"android:text="world"/>
</RelativeLayout>

在这里插入图片描述

给textview2添加

<?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"><TextViewandroid:id="@+id/text1"android:layout_width="wrap_content"android:layout_height="wrap_content"android:background="@color/yellow"android:text="hello" /><TextViewandroid:id="@+id/text2"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_toRightOf="@id/text1"android:background="@color/pink"android:padding="20dp"android:text="world"android:layout_alignBaseline="@+id/text1"/>
</RelativeLayout>

在这里插入图片描述


这篇关于基础布局之RelativeLayout相对布局的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/865086

相关文章

从基础到进阶详解Pandas时间数据处理指南

《从基础到进阶详解Pandas时间数据处理指南》Pandas构建了完整的时间数据处理生态,核心由四个基础类构成,Timestamp,DatetimeIndex,Period和Timedelta,下面我... 目录1. 时间数据类型与基础操作1.1 核心时间对象体系1.2 时间数据生成技巧2. 时间索引与数据

安装centos8设置基础软件仓库时出错的解决方案

《安装centos8设置基础软件仓库时出错的解决方案》:本文主要介绍安装centos8设置基础软件仓库时出错的解决方案,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录安装Centos8设置基础软件仓库时出错版本 8版本 8.2.200android4版本 javas

Linux基础命令@grep、wc、管道符的使用详解

《Linux基础命令@grep、wc、管道符的使用详解》:本文主要介绍Linux基础命令@grep、wc、管道符的使用,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐... 目录grep概念语法作用演示一演示二演示三,带选项 -nwc概念语法作用wc,不带选项-c,统计字节数-

python操作redis基础

《python操作redis基础》Redis(RemoteDictionaryServer)是一个开源的、基于内存的键值对(Key-Value)存储系统,它通常用作数据库、缓存和消息代理,这篇文章... 目录1. Redis 简介2. 前提条件3. 安装 python Redis 客户端库4. 连接到 Re

SpringBoot基础框架详解

《SpringBoot基础框架详解》SpringBoot开发目的是为了简化Spring应用的创建、运行、调试和部署等,使用SpringBoot可以不用或者只需要很少的Spring配置就可以让企业项目快... 目录SpringBoot基础 – 框架介绍1.SpringBoot介绍1.1 概述1.2 核心功能2

CSS3 布局样式及其应用举例

《CSS3布局样式及其应用举例》CSS3的布局特性为前端开发者提供了无限可能,无论是Flexbox的一维布局还是Grid的二维布局,它们都能够帮助开发者以更清晰、简洁的方式实现复杂的网页布局,本文给... 目录深入探讨 css3 布局样式及其应用引言一、CSS布局的历史与发展1.1 早期布局的局限性1.2

Spring Boot集成SLF4j从基础到高级实践(最新推荐)

《SpringBoot集成SLF4j从基础到高级实践(最新推荐)》SLF4j(SimpleLoggingFacadeforJava)是一个日志门面(Facade),不是具体的日志实现,这篇文章主要介... 目录一、日志框架概述与SLF4j简介1.1 为什么需要日志框架1.2 主流日志框架对比1.3 SLF4

Spring Boot集成Logback终极指南之从基础到高级配置实战指南

《SpringBoot集成Logback终极指南之从基础到高级配置实战指南》Logback是一个可靠、通用且快速的Java日志框架,作为Log4j的继承者,由Log4j创始人设计,:本文主要介绍... 目录一、Logback简介与Spring Boot集成基础1.1 Logback是什么?1.2 Sprin

MySQL复合查询从基础到多表关联与高级技巧全解析

《MySQL复合查询从基础到多表关联与高级技巧全解析》本文主要讲解了在MySQL中的复合查询,下面是关于本文章所需要数据的建表语句,感兴趣的朋友跟随小编一起看看吧... 目录前言:1.基本查询回顾:1.1.查询工资高于500或岗位为MANAGER的雇员,同时还要满足他们的姓名首字母为大写的J1.2.按照部门

html5的响应式布局的方法示例详解

《html5的响应式布局的方法示例详解》:本文主要介绍了HTML5中使用媒体查询和Flexbox进行响应式布局的方法,简要介绍了CSSGrid布局的基础知识和如何实现自动换行的网格布局,详细内容请阅读本文,希望能对你有所帮助... 一 使用媒体查询响应式布局        使用的参数@media这是常用的