UI位置与布局

news2024/9/23 13:29:00

UI位置与布局

请添加图片描述

引言

发现UGUI的RectTransform定位还是很复杂的,感觉有必要详细了解一下

RectTransform

继承自Transform。他的local position由其他几个变量控制。建议不要直接设置position

目的是为了实现UI自动布局。这套方法将绝对定位,相对定位,百分比定位等整合在一起,可以说非常灵活,不过同时增加了复杂度。

1.绝对定位

当anchors最大值与最小是相同时,为决定定位。

定位过程:以锚点确定起点,anchored position确定偏移量,根据pivot确定中心点,最后根据size delta决定大小

变量详解

  • anchors

    • 锚点

      • 决定起点

        • 0-1比例
  • anchored position

    • 偏移量

      • 坐标值
  • pivot

    • 决定中心点

      • 0-1比例
  • size delta

    • 框的宽和高

      • 坐标值

意义

  • 可以自行决定坐标的起点和终点,非常灵活。

    • 居中,靠左上角,靠右上角等等

    • 例:制作一排图片时起点终点都在左,制作镖耙时中心在中,不用考虑图片大小和父级物体位置。

2.相对定位

当anchors最大值与最小不相同时

定位过程:由锚框确定外框,left,right等设定边距

变量详解

  • anchors

    • 锚框

      • 范围在01之间

        • 划定一个范围,这个范围就是外框
  • left,right,top,bottom

    • 边距。

      • 范围是像素值

        • 可为负,此时会在外框外面

意义

  • 可以自行决定坐标的起点和终点,非常灵活。

  • 实现边距布局

    • 令锚框与父物体相同,此时大小完全由边距决定。如left=10,表示左边距为10。当父物体缩放时,始终保持左边有10的间距。

      • 设置弹窗始终与屏幕间隔固定距离。
  • 实现百分比布局

    • 令边距都是0,此时大小与锚框完全相同。因此调整锚框即可实现按照比例布局。

      • 如Xmin=0.5,Xmax=1,始终占据右半边

  • size delta和anchored position没用了

  • size delta

    • x是left与right之和的负数,y是top与bottom之和的负数
  • anchored position

    • 父物体中心到图片中心的偏移量(这里中心都由子物体pivot决定)
  • 获取和修改边框

    • offsetMax和offsetMin

    • left

      • offsetMin.x
    • right

      • -offsetMax.x
    • top

      • offsetMin.y
    • bottom

      • -offsetMax.y

推荐使用的属性

不受布局影响,通用

大小

  • rect.width

  • rect.height

位置

  • anchored position

  • offsetMax和offsetMin

RectTransform上一些特殊控件

Anchor Presets

  • 快速修改anchors到预设的几个常用布局。按住shift可同时设置pivot,按住alt可同时设置position。一般用到的布局就这几个。

右侧虚线框按钮

  • 蓝图模式。未开启时,包围框会放大来包含整个图片。开启时,包围框是无视缩放旋转的。运行时点击区域依然是旋转和缩放后的区域。

    • 好像没啥用?

右侧R按钮

  • Raw模式。修改pivot或者anchors后,不会自动调整令范围不变。

    • 好像也没啥用?

坐标换算

UGUI坐标系指的是没有经过自适应计算的位置。UGUI会自动根据屏幕分辨率不同,来决定缩放和移动,自动适应屏幕。

如果要实现一些点击位置或者实现拖拽控件会用到坐标转换,整理在下面了。

UGUI坐标

  • 屏幕坐标

    • 世界坐标

坐标转换

  • 世界坐标->屏幕坐标

    • RectTransformUtility.WorldToScreenPoint
  • 屏幕坐标->世界坐标

    • RectTransformUtility.ScreenPointToWorldPointInRectangle
  • 屏幕坐标->UGUI坐标

    • RectTransformUtility.ScreenPointToLocalPointInRectangle
  • UGUI坐标->世界坐标

    • transform.position
  • UGUI坐标->屏幕坐标

    • UGUI坐标->世界坐标->屏幕坐标
  • 世界坐标->UGUI坐标

    • 世界坐标->屏幕坐标-> UGUI坐标

相关的实用函数

rect

  • rect是RectTransform的区域信息,其中(x,y)是RectTransform左下角到Pivot(不是Anchors)的相对位置,(width,height)是RectTransform区域的大小。

SetSizeWithCurrentAnchors

  • 当Anchors不重合的时候,设置sizeDelta就不能正确控制RectTransform的大小,此时可以使用SetSizeWithCurrentAnchors(axis, size)来设置rect的width和height。

SetInsetAndSizeFromParentEdge

  • 可以根据父类的某个边,设置大小和间距(注意此方法会改变Anchors的位置)

RectTransformUtility

  • 提供了很多实用方法

offsetMax和offsetMin

  • offsetMin是Anchors左下角到RectTransform左下角的距离。

  • offsetMax是Anchors右上角到RectTransform右上角的距离。

参考文章

Unity3D RectTransform使用详解:布局、属性、方法

  • https://zhuanlan.zhihu.com/p/139252379

【Unity UGUI】屏幕坐标转换

  • https://blog.csdn.net/onelei1994/article/details/103065949

动态修改 RectTransform 的Left,Top,Right和Bottom值

  • https://it.cha138.com/python/show-5829124.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/931252.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

若依移动端Ruoyi-App 项目的后端项目入门

后端项目运行 运行报错 Error creating bean with name sysConfigServiceImpl: Invocation of init method failed 数据库创建了。 代码连接数据库地方了也匹配上了。但是还是报错。 分析 : 想起来我电脑从来没有安装过redis 下载安装redis到windows 链接&…

C++简单的检测内存泄漏的代码(visual studio)

看了网上很多都需要安装这个库那个库,就很无语,一个初学者,给段代码不好么,然后我偶然发现了微软官方给的代码,链接如下 使用 CRT 库查找内存泄漏 | Microsoft Learn 代码如下 // debug_malloc.cpp // compile by u…

量子非凡暴风去广告接口

>>>https://videos.centos.chat/lzffbf.php/?url 免费提供综合去广告接口,各位请友好调用

033 - date 和 time

date类型: 该DATE类型用于具有日期部分但没有时间部分的值。MySQL检索并DATE以 格式显示 值 。支持的范围是 到。 YYYY-MM-DD1000-01-019999-12-31 -- 创建表,字段类型是date: create table test_date01 (a date); -- 正确格式插入数据 in…

学习ts(十一)本地存储与发布订阅模式

localStorage实现过期时间 目录 准备 安装 npm i rollup typescript rollup-plugin-typescript2// tsconfig.json"module": "ESNext","moduleResolution": "node", "strict": false, // rollup.config.js import …

Python语言实现React框架

迷途小书童的 Note 读完需要 6分钟 速读仅需 2 分钟 1 reactpy 介绍 reactpy 是一个用 Python 语言实现的 ReactJS 框架。它可以让我们使用 Python 的方式来编写 React 的组件,构建用户界面。 reactpy 的目标是想要将 React 的优秀特性带入 Python 领域,…

元类(metaclass)

目录 一、引言 二、什么是元类 三、为什么用元类 四、内置函数exec(储备) 五、class创建类 5.1 type实现 六、自定义元类控制类的创建 6.1 应用 七、__call__(储备) 八、__new__(储备) 九、自定义元类控制类的实例化 一十、自定义元类后类的继承顺序 十一、练习 p…

mysql my.ini、登录、用户相关操作、密码管理、权限管理、权限表,角色管理

my.ini 配置文件格式 登录mysql mysql -h hostname | IP -P port -u username -p database -e “select 语句”; 创建用户、修改用户、删除用户 create user ‘zen’ identified by ‘密码’ ## host 默认是 % create user ‘zen’‘localhost’ identified by ‘密…

构建安全可信、稳定可靠的RISC-V安全体系

安全之安全(security)博客目录导读 2023 RISC-V中国峰会 安全相关议题汇总 说明:本文参考RISC-V 2023中国峰会如下议题,版权归原作者所有。

YARN资源管理框架论述

一、简介 为了实现一个Hadoop集群的集群共享、可伸缩性和可靠性,并消除早期MapReduce框架中的JobTracker性能瓶颈,开源社区引入了统一的资源管理框架YARN。 YARN是将JobTracker的两个主要功能(资源管理和作业调度/监控)分离&…

HarmonyOS/OpenHarmony(Stage模型)卡片开发应用上下文Context使用场景一

1.获取应用文件路径 基类Context提供了获取应用文件路径的能力,ApplicationContext、AbilityStageContext、UIAbilityContext和ExtensionContext均继承该能力。应用文件路径属于应用沙箱路径。上述各类Context获取的应用文件路径有所不同。 通过ApplicationContext…

VR法治警示教育:情景式课堂增强教育效果

VR法治警示教育平台是一款基于虚拟现实技术的在线教育平台,旨在通过模拟真实场景和互动体验,向公众普及法律知识,提高公民的法律意识和素养。该平台采用先进的虚拟现实技术,将用户带入一个逼真的仿真环境,让用户身临其…

【广州华锐互动】VR沉浸式体验红军长征路:追寻红色记忆,传承红色精神

在历史的长河中,长征无疑是一段充满艰辛和英勇的伟大征程。为了让更多的人了解这段历史,我们利用虚拟现实(VR)技术,为您带来一场沉浸式的体验,重温红军万里长征的壮丽篇章。 一、踏上长征之路 戴上VR眼镜&a…

RocketMQ教程-(6-5)-运维部署-Promethus Exporter

介绍​ Rocketmq-exporter 是用于监控 RocketMQ broker 端和客户端所有相关指标的系统,通过 mqAdmin 从 broker 端获取指标值后封装成 87 个 cache。 警告 过去版本曾是 87 个 concurrentHashMap,由于 Map 不会删除过期指标,所以一旦有 la…

南方CASS软件安装包分享

目录 一、软件简介 二、软件下载 一、软件简介 南方CASS软件是一款基于AutoCAD平台开发的测量和计算设计软件,广泛应用于水利、电力、市政、建筑、交通等领域。 南方CASS软件集成了地形测量、断面测量、土地勘测定界、水文水利和公路设计等功能,为测…

JS 数组中对象 某属性相同对某属性的值进行相加去重(支持多条件多个值判断相加)

/* delSameObjValue 数组对象相同值相加去重arr 需要处理的数组resultNum 最终计算结果的键名keyName 用于计算判断的键名 keyValue 用于计算结果的键名 --> 对应的键值为number类型 */function delSameObjValue(arr, resultNum, keyName, keyValue) {const warp new Map(…

微信开发之一键创建微信群聊的技术实现

创建微信群 本接口为敏感接口,请查阅调用规范手册创建后,手机上不会显示该群,往该群主动发条消息手机即可显示。 请求URL: http://域名地址/createChatroom 请求方式: POST 请求头Headers: Content-T…

Navisworks2020~2023安装包分享

目录 一、软件介绍 二、下载地址 一、软件介绍 Navisworks是一款专业的建筑、工厂、机械和设备设计软件工具,旨在帮助项目相关方可靠地整合、分享和审阅详细的三维设计模型。它提供了一系列功能强大的工具,使设计师、工程师和建筑师能够更好地协作、沟…

PB4引脚作GPIO上电高电平问题

问题说明 给旧项目debug,芯片是国民技术 N32G452VEL7 (用起来跟32没多大差 包括PB4在内有多个引脚作为输出,默认低电平,在状态机内先输出高电平再回到低电平,来模拟按键的状态(相当于按键按下松开后按键功…

Docker使用mysql:5.6和 owncloud 镜像,构建一个个人网盘,安装搭建私有仓库 Harbor

一、使用mysql:5.6和 owncloud 镜像,构建一个个人网盘。 [rootlocalhost ~]# docker pull mysql:5.6[rootlocalhost ~]# docker pull owncloud[rootlocalhost ~]# docker run -itd --name mysql --env MYSQL_ROOT_PASSWORD123456 mysql:5.6 d45cc5b95f00692881baaf…