UI位置与布局

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

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

vue和react学哪一个比较有助于以后发展?

前言 首先声明vue和react这两个框架都是很优秀的前端框架,使用的人群下载量上数量也是相当的庞大,这篇文章没有贬低或者攻击任何一个框架的意思,只在于根据答主的问题来对这两个框架做出对比,以方便大家更加清晰的了解到当下vue和…

设计模式--适配器模式(Adapter Pattern)

一、什么是适配器模式(Adapter Pattern) 适配器模式(Adapter Pattern)是一种结构型设计模式,它允许将一个类的接口转换成客户端所期望的另一个接口。适配器模式主要用于解决不兼容接口之间的问题,使得原本…

分析系统 - 使用Python爬虫

在竞争激烈的市场环境中,了解和分析竞争对手的销售策略和市场表现对于企业的成功至关重要。本文将介绍如何利用Python爬虫建立低成本的销售竞争对手分析系统,探索其方法、工具和好处,并同时解决可能出现的问题。 销售竞争对手分析的目标是获取…

React基础入门之虚拟Dom

React官方文档:https://react.docschina.org/ 说明 重要提示:本系列文章基础篇总结自尚硅谷课程,且采用类式写法!!最新的函数式组件写法见高级篇。 本系列文档旨在帮助vue同学更快速的学习react,如果你很…

Android 13 - Media框架(6)- NuPlayer

上一节我们通过 NuPlayerDriver 了解了 NuPlayer 的使用方式,这一节我们一起来学习 NuPlayer 的部分实现细节。 ps:之前用 NuPlayer 播放本地视频很多都无法播放,所以觉得它不太行,这两天重新阅读发现它的功能其实很全面&#xff…

【80天学习完《深入理解计算机系统》】第十天 3.3 条件码寄存器【CF ZF SF OF】【set】

专注 效率 记忆 预习 笔记 复习 做题 欢迎观看我的博客,如有问题交流,欢迎评论区留言,一定尽快回复!(大家可以去看我的专栏,是所有文章的目录)   文章字体风格: 红色文字表示&#…

第四方支付平台和聚合支付有什么区别?

第四方支付平台和聚合支付有什么区别? 聚合支付和第四方支付平台是移动支付领域的两种常见支付方式。它们在实际应用中有许多相似之处,给人们的生活带来了便利。然而,这两种支付方式也有本质的区别。我将从不同的角度对它们进行比较和分析。 …

聚类分析 | MATLAB实现基于LP拉普拉斯映射的聚类可视化

聚类分析 | MATLAB实现基于LP拉普拉斯映射的聚类可视化 目录 聚类分析 | MATLAB实现基于LP拉普拉斯映射的聚类可视化效果一览基本介绍程序设计参考资料 效果一览 基本介绍 聚类分析 | MATLAB实现基于LP拉普拉斯映射的聚类可视化,聚类结果可视化,MATLAB程…

MySQL不停重启问题

MySQL不停的自动杀掉自动重启 看一下log日志 my.cnf 里配置的 log_error /var/log/mysqld.log vim /var/log/mysqld.log 报的错误只是 [ERROR] Cant start server: Bind on TCP/IP port: Address already in use [ERROR] Do you already have another mysqld server …

“分布式”与“集群”初学者的技术总结

一、“分布式”与“集群”的解释: 分布式:把一个囊肿的系统分成无数个单独可运行的功能模块 集群: 把相同的项目复制进行多次部署(可以是一台服务器多次部署,例如使用8080部署一个,8081部署一个&#xff0c…

芯科科技宣布推出下一代暨第三代无线开发平台,打造更智能、更高效的物联网

第三代平台中的人工智能/机器学习引擎可将性能提升100倍以上 Simplicity Studio 6软件开发工具包通过新的开发环境将开发人员带向第三代平台 中国,北京 - 2023年8月22日 – 致力于以安全、智能无线连接技术,建立更互联世界的全球领导厂商Silicon Labs&…

MathType7MAC中文版数学公式编辑器下载安装教程

如今许多之前需要手写的内容都可以在计算机中完成了。以前我们可以通过word输入一些简单的数学公式,但现在通过数学公式编辑器便可以完成几乎所有数学公式的写作。许多简单的数学公式,我们可以使用输入法一个个找到特殊符号并输入,但是对于高…

6个主流的工业3D管道设计软件

3D 管道设计软件是大多数行业工程工作的主要部分,例如: 电力、石油和天然气、石化、炼油厂、纸浆和造纸、化学品和加工业。 全球各工程公司使用了近 50 种工厂或管道设计软件。 每个软件都有优点和缺点,包括价格点。 EPC 和业主部门当前的趋势…

C语言:指针和数组(看完拿捏指针和数组)

目录 数组名的理解: 一维数组: 解析: 字符数组: 解析: 解析: 字符串数组: 解析: 解析: 一级指针: 解析: 解析: 二维数组&a…

Docker(md版)

Docker 一、Docker二、更换apt源三、docker搭建四、停启管理五、配置加速器5.1、方法一5.2、方法二 六、使用docker运行漏洞靶场1、拉取tomcat8镜像2、拉取成功3、开启服务4、查看kali的IP地址5、访问靶场6、关闭漏洞靶场 七、vulapps靶场搭建 一、Docker Docker是一个开源的应…

pnpm安装包管理工具

pnpm安装包管理工具 pnpm代表performant npm(高性能的npm),同npm和Yarn,都属于Javascript包管理安装工具,它较npm和Yarn在性能上得到很大提升,被称为快速的,节省磁盘空间的包管理工具。 pnpm…

数字孪生:重塑制造、医疗和能源等领域的未来

数字孪生技术,作为虚拟仿真的重要领域,正以其强大的能力在各个行业中创造前所未有的创新。本文带大家一起深入探讨数字孪生技术在不同领域的广泛应用场景,展示其在实现效率、可靠性和智能化方面的积极影响。 制造业与工业领域 数字孪生技术在…

2023年 Java 面试八股文下(20w字)

目录 1.1 面试过程最关键的是什么? 1.2 面试时该怎么说? 1.3 面试技巧 1.3.1 六个常见问题 1.3.2 两个注意事项 1.3.3 自我介绍(控制在4分半以内,不超过5分钟) 手写代码 2.1 冒泡排序(Bubble Sort&…

sql:知识点记录二

(1)索引的优势劣势 (2)索引分类和建立索引命令语句 查看表中的索引: (3)索引的结构 (4)哪些情况适合建立索引 (5)哪些情况不适合建立索引 &#x…

服务器安全-禁止ping

1、临时禁ping #禁ping echo 1 > /proc/sys/net/ipv4/icmp_echo_ignore_all#启用ping echo 0 > /proc/sys/net/ipv4/icmp_echo_ignore_all 2.永久禁ping(如果有此配置就无需重复添加,仅更新值即可) #禁ping echo "net.ipv4.icmp_echo_ignore_all1" >>…