UI位置与布局

news/2024/5/18 12:24:43 标签: ui, unity, UGUI, 游戏程序

UI位置与布局

请添加图片描述

引言

UGUIRectTransform_5">发现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后,不会自动调整令范围不变。

    • 好像也没啥用?

坐标换算

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

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

UGUI_180">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.niftyadmin.cn/n/4973297.html

相关文章

freertos之任务调度算法

介绍 所谓调度算法,就是怎么确定哪个就绪态的任务可以切换为运行状态。 通过配置文件FreeRTOSConfig.h的三个配置项来配置调度算法:configUSE_PREEMPTION (是否抢占) configUSE_TIME_SLICING (是否轮转) c…

Mybatis-Plus如何进行时间日期的比较

获取数据库中跟当前日期相等的记录时&#xff0c;还是调用eq方法&#xff0c;所以实体类包括数据库中的类型是Date&#xff0c;而不是DateTime&#xff0c;否则只能获取相同时刻的数据。 pulbic void main(){LocalDate now LocalDate.now();LambdaQueryWrapper<Ebbinghaus…

多线程的创建与同步

目录 线程的创建 1.多线程的创建&#xff1a;方式一&#xff1a;继承于Thread类 2.多线程的创建&#xff1a;方式二&#xff1a;实现Runnable 3..线程创建方式三&#xff1a;实现Callable接口 线程的同步 1.同步的方式&#xff1a;方式一&#xff1a;同步代码块 2.…

机器学习实战之用 Scikit-Learn 正则化方法解决过拟合详解

你是不是在模型训练中遇到过这样的问题&#xff1a;在训练集上表现得极好&#xff0c;但在测试集上效果不佳&#xff1f;这就是过拟合的问题。 过拟合是模型在训练过程中学到了数据的“噪声”而非规律&#xff0c;导致在未知数据上表现不佳。那么怎么解决这个问题呢&#xff1…

DPU在东数西算背景下如何赋能下一代算力基础设施 中科驭数在未来网络发展大会论道

以ChatGPT为代表的人工智能大模型的快速发展&#xff0c;对网络信息技术创新发展提出了新的挑战&#xff0c;我国东数西算重大工程也在加速布局。以确定性网络、算力网络为代表的未来网络核心技术&#xff0c;正成为决定未来经济和产业发展的关键。 8月23日&#xff0c;第七届…

组件化开发之如何封装组件-react

组件化开发之如何封装组件-react 什么是组件为什么需要封装组件组件的分类函数组件&#xff08;Functional Components&#xff09;&#xff1a;展示型组件&#xff1a;容器型组件&#xff1a;知道组件分类的意义是&#xff1f; 如何拆分组件&#xff0c;需要遵循什么原则1.保证…

BDCC - 闲聊数据仓库的架构

文章目录 典型数据仓库架构图数据仓库ETL vs ELTETLELT区别联系 数据仓库分层&#xff08;1&#xff09;数据仓库ODS层&#xff08;2&#xff09;数据仓库CDM层DWD数据明细层DWS数据汇总层 &#xff08;3&#xff09;数据仓库ADS层 典型数据仓库架构图 按自下而上的顺序&#x…

# Go学习-Day7

文章目录 断言文件打开/关闭文件读取文件写入文件 命令行参数解析Argsflag包 JSON 个人博客&#xff1a;CSDN博客 断言 type Node struct {x inty int }func main() {var a interface{}var n Node Node{1, 2}a nvar b Nodeb a.(Node)fmt.Println(b) }此处我们有一个结构体…