基础布局之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

相关文章

浅析Python中的绝对导入与相对导入

《浅析Python中的绝对导入与相对导入》这篇文章主要为大家详细介绍了Python中的绝对导入与相对导入的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录1 Imports快速介绍2 import语句的语法2.1 基本使用2.2 导入声明的样式3 绝对import和相对i

CSS3 最强二维布局系统之Grid 网格布局

《CSS3最强二维布局系统之Grid网格布局》CS3的Grid网格布局是目前最强的二维布局系统,可以同时对列和行进行处理,将网页划分成一个个网格,可以任意组合不同的网格,做出各种各样的布局,本文介... 深入学习 css3 目前最强大的布局系统 Grid 网格布局Grid 网格布局的基本认识Grid 网

0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型的操作流程

《0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeekR1模型的操作流程》DeepSeekR1模型凭借其强大的自然语言处理能力,在未来具有广阔的应用前景,有望在多个领域发... 目录0基础租个硬件玩deepseek,蓝耘元生代智算云|本地部署DeepSeek R1模型,3步搞定一个应

CSS弹性布局常用设置方式

《CSS弹性布局常用设置方式》文章总结了CSS布局与样式的常用属性和技巧,包括视口单位、弹性盒子布局、浮动元素、背景和边框样式、文本和阴影效果、溢出隐藏、定位以及背景渐变等,通过这些技巧,可以实现复杂... 一、单位元素vm 1vm 为视口的1%vh 视口高的1%vmin 参照长边vmax 参照长边re

CSS3中使用flex和grid实现等高元素布局的示例代码

《CSS3中使用flex和grid实现等高元素布局的示例代码》:本文主要介绍了使用CSS3中的Flexbox和Grid布局实现等高元素布局的方法,通过简单的两列实现、每行放置3列以及全部代码的展示,展示了这两种布局方式的实现细节和效果,详细内容请阅读本文,希望能对你有所帮助... 过往的实现方法是使用浮动加

MySQL中my.ini文件的基础配置和优化配置方式

《MySQL中my.ini文件的基础配置和优化配置方式》文章讨论了数据库异步同步的优化思路,包括三个主要方面:幂等性、时序和延迟,作者还分享了MySQL配置文件的优化经验,并鼓励读者提供支持... 目录mysql my.ini文件的配置和优化配置优化思路MySQL配置文件优化总结MySQL my.ini文件

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【Linux 从基础到进阶】Ansible自动化运维工具使用

Ansible自动化运维工具使用 Ansible 是一款开源的自动化运维工具,采用无代理架构(agentless),基于 SSH 连接进行管理,具有简单易用、灵活强大、可扩展性高等特点。它广泛用于服务器管理、应用部署、配置管理等任务。本文将介绍 Ansible 的安装、基本使用方法及一些实际运维场景中的应用,旨在帮助运维人员快速上手并熟练运用 Ansible。 1. Ansible的核心概念

AI基础 L9 Local Search II 局部搜索

Local Beam search 对于当前的所有k个状态,生成它们的所有可能后继状态。 检查生成的后继状态中是否有任何状态是解决方案。 如果所有后继状态都不是解决方案,则从所有后继状态中选择k个最佳状态。 当达到预设的迭代次数或满足某个终止条件时,算法停止。 — Choose k successors randomly, biased towards good ones — Close