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,一经查实,立即删除!

相关文章

<MySon car=“宝马“ :money=“money“></MySon>有没有冒号

为什么car"宝马"没有&#xff1a; 但是 :money"money"就有&#xff1a; <script setup> import {ref} from vue import MySon from /components/MySon.vueconst money ref(100) </script><template><h3>father</h3><My…

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

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

VScode的PHP远程调试模式Xdebug

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

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

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

【ffmpeg】基于需要使用videocapture的opencv编译配置(C++)

目录 配置简介ffmpeg源码编译方法记录gstreamer命令行安装方法opencv的编译项记录 配置简介 opencv使用videocapture读取视频流时&#xff0c;需要借助底层的ffmpeg库。如果不能正确编译&#xff0c;会报错&#xff0c;现记录正确编译配置方法。 ffmpeg源码编译方法记录 ope…

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

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

Pimpl模式

写在前面 Pimpl(Pointer to implementation&#xff0c;又称作“编译防火墙”) 是一种减少代码依赖和编译时间的C编程技巧&#xff0c;其基本思想是将一个外部可见类(visible class)的实现细节&#xff08;一般是所有私有的非虚成员&#xff09;放在一个单独的实现类(implemen…

用MFC打开外部程序

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

算法修炼Day60|● 84.柱状图中最大的矩形

LeetCode:84.柱状图中最大的矩形 84. 柱状图中最大的矩形 - 力扣&#xff08;LeetCode&#xff09; 1.思路 双指针思路&#xff0c;以当前数组为中心&#xff0c;借助两个数组存放当前数柱左右两侧小于当前数柱高度的索引&#xff0c;进行h*w的计算。注意首尾节点的左侧索引…

牛客练习赛 114

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

elementuiplus设置scroll-to-error之后 提示被遮挡的解决方案

项目场景&#xff1a; 普通的头部固定&#xff0c;中间滑动的布局&#xff0c;中间内容有表单&#xff0c;提交校验不通过时滚动到第一个错误项 问题描述 elementuiplus的scroll-to-error设置之后是局部滚动 当头部内容层级高于中间表单的时候&#xff0c;错误会被遮挡。 ---…

【HarmonyOS】实现将pcm音频文件进行编码并写入文件(API6 Java)

【关键字】 音频编码、管道模式、createEncoder 【写在前面】 在使用API6开发HarmonyOS应用时&#xff0c;如何将pcm源文件进行编码并写入文件&#xff0c;最后生成aac文件&#xff0c;本文直接附上主要代码开发步骤供大家参考。 【主要功能代码】 import ohos.media.codec.…

【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个步骤&#xff1a;预处理、编译、汇编、链接。 预处理就是本文要详细说的宏替换…

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

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

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

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

iOS开发Swift-枚举

枚举&#xff1a;一组相关的值定义了一个共同的类型&#xff0c;使你可以在代码中以类型安全的方式来使用这些值。 1.枚举语法 //枚举成员不会被赋予默认的整型值。成员本身就是完备的值&#xff0c;类型为CompassPoint。 enum CompassPoint {case northcase southcase eastcas…

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

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

自学设计模式(简单工厂模式、工厂模式、抽象工厂模式)

使用工厂模式来生产某类对象&#xff08;代码简化且容易维护&#xff0c;类之间有血缘关系&#xff0c;可以通过工厂类进行生产&#xff09;&#xff1b; 简单工厂模式&#xff08;用于创建简单对象&#xff09; 对于简单工厂模式&#xff0c;需要的工厂类只有一个&#xff1…

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都…