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

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

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

相关文章

CH02_重构的原则(什么是重构、为什么重构、何时重构)

什么是重构 重构(名词):对软件内部结构的一种调整,目的是在不改变软件可观察行为的前提下,提高其可理解性,降低其修改成本。 重构(动词):使用一系列重构手法&#xff0…

VScode的PHP远程调试模式Xdebug

目录 第一步、安装VScode中相应插件 remote-ssh的原理 ssh插件: PHP相关插件: 第二步、安装对应PHP版本的xdebug 查看PHP具体配置信息的phpinfo页面 1、首先,打开php编辑器,新建一个php文件,例如:inde…

iOS App签名与重签名:从开发者证书到重新安装运行

前文回顾: iOS脱壳技术(二):深入探讨dumpdecrypted工具的高级使用方法 iOS逆向:越狱及相关概念的介绍 在本文中,我们将详细介绍iOS应用的签名过程,包括开发者证书的种类、证书与App ID、Provisi…

一种IDEA疑难杂症的解决办法

解决办法 重启IDEA 针对于IDEA各种解析,运行时问题,但是无法通过搜索引擎得到答案的问题请试试此方法。 删除根目录下[.idea]文件夹后重启 此文件夹为idea首次导入项目时根据项目情况自动生成的配置文件。方便idea下次更快的解析项目。但是某些情况&a…

用MFC打开外部程序

在MFC(Microsoft Foundation Classes)中,你可以使用ShellExecute函数来打开Notepad并加载指定的文件。ShellExecute函数是Windows API的一部分,它可以执行与操作系统相关的操作,例如打开文件、运行程序等。 以下是在M…

牛客练习赛 114

C.Kevin的七彩旗 思路:贪心和dp均可以解决。 贪心:我们可以发现,最终想要获得合法的序列,我们必须是通过把几段连续的序列拼凑起来,但序列之间可能有重合,因此我们就转化为了,记录每一段最大的…

【C++】4、Preprocessor 预处理:条件编译、源文件包含、宏替换、重定义行号、错误信息、编译器预留指令

文章目录 一、概述二、格式2.1 条件编译2.2 源文件包含2.3 宏替换2.3.1 语法2.3.2 C标准内置的预定义宏 2.4 重定义行号和文件名2.5 错误信息2.6 编译器预留指令 三、应用场景 C的 Build 可分为4个步骤:预处理、编译、汇编、链接。 预处理就是本文要详细说的宏替换…

基于Red Hat Enterprise Linux 7操作系统的PostgresSql15的备份恢复(实践笔记)

零、前言 本文是基于阿里云ECS服务器进行的实践操作,操作系统版本:Red Hat Enterprise Linux 7 PG数据库版本:PostgresSql 15 PG安装方式:yum 由于本人新接触pg数据,本次也是出于好奇,就对pg数据库的pg_du…

C#,《小白学程序》第五课:队列(Queue)

1 文本格式 /// <summary> /// 《小白学程序》第五课&#xff1a;队列&#xff08;Queue&#xff09; /// 日常生活中常见的排队&#xff0c;软件怎么体现呢&#xff1f; /// 排队的基本原则是&#xff1a;先到先得&#xff0c;先到先吃&#xff0c;先进先出 /// </su…

深度学习8:详解生成对抗网络原理

目录 大纲 生成随机变量 可以伪随机生成均匀随机变量 随机变量表示为操作或过程的结果 逆变换方法 生成模型 我们试图生成非常复杂的随机变量…… …所以让我们使用神经网络的变换方法作为函数&#xff01; 生成匹配网络 培养生成模型 比较基于样本的两个概率分布 …

CSS 属性值计算过程

目录 例子1&#xff0c;确定声明值2&#xff0c;层叠冲突2.1&#xff0c;比较源重要性2.2&#xff0c;比较优先级2.3&#xff0c;比较源次序 3&#xff0c;使用继承4&#xff0c;使用默认值其他 例子 我们来举例说明<h1> 标签最终的样式&#xff1a; <div><h1…

记录一个诡异的bug

将对接oa跳转到会议转写的项目oa/meetingtranslate项目发布到天宫&#xff0c;结果跳转到successPage后报错 这一看就是successPage接口名没对上啊&#xff0c;查了一下代码&#xff0c;没问题啊。 小心起见&#xff0c;我就把successPage的方法请求方式从Post改为Get和POST都…

Linux(基础篇二)

Linux基础篇 Linux基础篇二5. 系统管理5.1 Linux中的进程和服务5.3 systemctl5.4 运行级别CentOS 6CentOS 7 5.5 关机重启命令 Linux基础篇二 5. 系统管理 5.1 Linux中的进程和服务 计算机中&#xff0c;一个正在执行的程序或命令&#xff0c;被叫做“进程”(process) 启动之…

金融客户敏感信息的“精细化管控”新范式

目 录 01 客户信息保护三箭齐发&#xff0c;金融IT亟需把握四个原则‍ 02 制度制约阻碍信息保护的精细化管控 ‍‍‍‍‍‍‍ 03 敏感信息精细化管控范式的6个关键设计 04 分阶段实施&#xff0c;形成敏感信息管控的长效运营的机制 05 未来&#xff0c;新挑战与新机遇并存 …

【无标题】jenkins消息模板(飞书)

这里写目录标题 Jenkins 安装的插件 发送消息到飞书预览 1 &#xff08;单Job&#xff09;预览 2 &#xff08;多Job&#xff0c;概览&#xff09; Jenkins 安装的插件 插件名称作用Rebuilder Rebuilder。 官方地址&#xff1a;https://plugins.jenkins.io/rebuild 安装方式&a…

vue组装模板(侧边栏+顶部+主体)--项目阶段4

目录 一、前言介绍 二、结构解析 三、页面拆分 &#xff08;一&#xff09;页面拆分 1.侧边栏页面&#xff08;固定&#xff09;--Aside.vue 2.顶部页面&#xff08;固定&#xff09;--Header.vue 3.主体页面&#xff08;不固定的&#xff09;--示例用UserView…

【位运算进阶之----左移(<<)】

今天我们来谈谈左移这件事。 ❤️简单来说&#xff0c;对一个数左移就是在其的二进制表达末尾添0。左移一位添一个0&#xff0c;结果就是乘以2&#xff1b;左移两位添两个0&#xff0c;结果就乘以2 ^ 2&#xff1b;左移n位添n个0&#xff0c;结果就是乘以2 ^ n&#xff0c;小心…

小白到运维工程师自学之路 第七十九集 (基于Jenkins自动打包并部署Tomcat环境)2

紧接上文 4、新建Maven项目 clean package -Dmaven.test.skiptrue 用于构建项目并跳过执行测试 拉到最后选择构建后操作 SSH server webExec command scp 192.168.77.18:/root/.jenkins/workspace/probe/psi-probe-web/target/probe.war /usr/local/tomcat/webapps/ /usr/loca…

电商设计之分类模块设计

1、现在店铺流行这些简单的风格 2、 3、夏季新品 4、妖精的口袋----店铺展示 5、小狗电器-----优秀分类案例 6、客服中心 7、有线手持款---这里全都是有线首饰款&#xff0c;方便找到东西 8、裂帛 8.1裂帛分类模块 8.2 我点击了T恤 8.3 买雪纺衫&#xff0c;这里面全都是雪纺 …

mybatis与spring集成与spring aop集成pagehelper插件

Mybatis与Spring的集成 Mybatis是一款轻量级的ORM框架&#xff0c;而Spring是一个全栈式的框架&#xff0c;二者的结合可以让我们更加高效地进行数据持久化操作。 Mybatis与Spring的集成主要有两种方式&#xff1a;使用Spring的Mybatis支持和使用Mybatis的Spring支持。 使用…