Unity(2022.3.41LTS) - UI详细介绍- Panel(面板)和RectTransform组件

2024-09-06 16:04

本文主要是介绍Unity(2022.3.41LTS) - UI详细介绍- Panel(面板)和RectTransform组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

目录

零. 简介

一、功能与作用

二、属性与设置

三、使用方法

四、优化和注意事项

五.面板总结

六. RectTransform

A、主要属性

B、布局控制

C、代码控制

D.实例

控制对象靠近底部

对象紧贴底部



零. 简介

在 Unity 中,Panel(面板)是一种常用的 UI 容器组件,用于组织和管理其他 UI 元素。

一、功能与作用

  1. 容器功能:Panel 主要作为一个容器,用于容纳其他 UI 元素,如按钮、文本、图像等。它可以帮助你组织和布局 UI,使界面更加清晰和易于管理。
  2. 背景和装饰:Panel 可以设置背景颜色、图像或材质,为其内部的 UI 元素提供一个背景或装饰效果。这可以增强 UI 的视觉吸引力,使其更加美观和专业。
  3. 裁剪和遮罩:通过设置 Panel 的裁剪模式,可以实现对其内部 UI 元素的裁剪效果。例如,可以使用矩形裁剪或圆形裁剪来显示特定形状的区域,或者使用遮罩效果来隐藏部分 UI 元素。
  4. 层级管理:Panel 可以帮助你管理 UI 元素的层级关系。通过将不同的 UI 元素放置在不同的 Panel 中,可以轻松地控制它们的显示顺序和遮挡关系。

二、属性与设置

  1. Rect Transform:Panel 具有 Rect Transform(矩形变换)组件,用于控制其大小、位置和旋转。你可以通过调整 Rect Transform 的属性来设置 Panel 的尺寸和在屏幕上的位置。
  2. Image:Panel 可以设置一个背景图像,可以是 Sprite(精灵图)或 Texture2D(纹理)。通过设置 Image 组件的属性,可以调整图像的颜色、透明度、平铺模式等。
  3. Canvas Group:Panel 通常会包含一个 Canvas Group(画布组)组件。Canvas Group 可以用于控制 Panel 及其内部 UI 元素的整体透明度、交互性和是否响应射线检测等属性。
  4. Graphic Raycaster:如果 Panel 需要接收交互事件,如鼠标点击或触摸,它需要包含一个 Graphic Raycaster(图形射线投射器)组件。Graphic Raycaster 负责检测 UI 元素是否被点击,并将事件传递给相应的处理程序。

三、使用方法

  1. 创建 Panel:在 Unity 中,可以通过 GameObject -> UI -> Panel 菜单创建一个新的 Panel。创建后,你可以在 Inspector 窗口中调整 Panel 的属性和设置。
  2. 添加 UI 元素:将其他 UI 元素(如按钮、文本、图像等)作为 Panel 的子对象添加到 Panel 中。你可以通过拖放 UI 元素到 Panel 上或者在 Hierarchy 视图中手动创建子对象的方式来添加 UI 元素。
  3. 布局和排列:使用 Unity 的 UI 布局系统(如 Horizontal Layout Group、Vertical Layout Group、Grid Layout Group 等)可以自动排列 Panel 内部的 UI 元素,使其具有良好的布局和对齐效果。
  4. 响应交互事件:如果 Panel 或其内部的 UI 元素需要响应交互事件,可以为它们添加相应的事件处理程序。例如,可以使用 Unity 的事件系统(Event System)来检测按钮的点击事件,并执行特定的函数。

四、优化和注意事项

  1. 性能优化:如果 Panel 内部包含大量的 UI 元素,可能会对性能产生一定的影响。为了提高性能,可以考虑使用合批技术(Batching)来减少绘制调用次数。同时,避免在每一帧都更新 Panel 的属性和内部 UI 元素,以减少不必要的计算。
  2. 层级管理:注意 Panel 之间的层级关系,避免出现遮挡或显示异常的情况。可以使用 Rect Transform 的 Z 轴位置或 UI 元素的 Order in Layer 属性来调整层级。
  3. 响应范围:确保 Panel 的响应范围正确设置,以便用户能够准确地与 Panel 及其内部的 UI 元素进行交互。可以通过调整 Rect Transform 的大小和 Graphic Raycaster 的设置来控制响应范围。
  4. 可扩展性:在设计 UI 时,考虑 Panel 的可扩展性和灵活性。如果可能,尽量使用动态布局和自适应大小的方式,以便在不同的屏幕尺寸和分辨率下都能正常显示。

五.面板总结

Panel 在 Unity 的 UI 系统中起着重要的作用,它可以作为一个容器来组织和管理其他 UI 元素,提供背景和装饰效果,实现裁剪和遮罩,以及管理 UI 元素的层级关系。通过合理地使用 Panel,可以创建出美观、易用且性能良好的用户界面。

六. RectTransform

在 Unity 中,RectTransform 是用于控制 UI 元素位置、大小和旋转的组件。以下是对 RectTransform 组件的详细介绍:

A、主要属性

  1. Anchor Presets(锚点预设)

    • RectTransform 通过设置锚点(Anchors)来确定 UI 元素在父容器中的相对位置。锚点由四个点组成,分别对应 UI 元素的四个角与父容器的相对位置。
    • Anchor Presets 提供了一些常见的锚点预设,如左上角对齐、中心对齐、拉伸等,可以快速设置锚点位置。
    • 通过调整锚点,可以使 UI 元素在不同屏幕尺寸下自适应布局。
  2. Position(位置)

    • 表示 UI 元素在父容器中的位置。可以以像素为单位设置绝对位置,也可以通过设置相对于锚点的偏移量来确定相对位置。
    • 如果锚点设置为拉伸模式,Position 的值会根据锚点的拉伸比例进行计算。
  3. Size Delta(大小差值)

    • 用于设置 UI 元素的宽度和高度相对于锚点的差值。例如,如果 Size Delta 的 X 值为 100,Y 值为 50,且锚点设置为中心对齐,那么 UI 元素的宽度将比父容器宽度小 100 像素,高度将比父容器高度小 50 像素。
    • 如果锚点设置为拉伸模式,Size Delta 的值会根据锚点的拉伸比例进行调整。
  4. Pivot(轴心点)

    • 决定了 UI 元素的旋转和缩放中心。取值范围为 0 到 1,表示在 UI 元素的局部坐标系中的位置。例如,(0.5, 0.5) 表示 UI 元素的中心。
    • 调整轴心点可以实现不同的旋转和缩放效果。

B、布局控制

  1. 自动布局:

    • RectTransform 可以与 Unity 的自动布局系统(如 Horizontal Layout Group、Vertical Layout Group、Grid Layout Group 等)结合使用,实现自动排列和调整 UI 元素的位置和大小。
    • 通过设置这些布局组件的属性,可以轻松创建响应式布局,适应不同的屏幕尺寸和分辨率。
  2. 锚点和拉伸:

    • 根据锚点的设置,UI 元素可以在父容器中进行拉伸或保持固定大小。例如,如果锚点设置为四个角都与父容器对齐,那么 UI 元素将随着父容器的大小变化而拉伸。
    • 可以通过调整 Size Delta 和锚点的组合来实现不同的布局效果。

C、代码控制

  1. 通过脚本可以动态地修改 RectTransform 的属性,以实现 UI 元素的动态布局和动画效果。例如,可以使用以下代码在运行时更改 UI 元素的位置和大小:
using UnityEngine;
using UnityEngine.UI;public class RectTransformController : MonoBehaviour
{public RectTransform myRectTransform;void Start(){// 设置位置myRectTransform.anchoredPosition = new Vector2(100, 50);// 设置大小myRectTransform.sizeDelta = new Vector2(200, 100);}
}
  1. 可以获取 RectTransform 的属性值,并根据这些值进行计算和调整。例如,可以根据屏幕尺寸动态调整 UI 元素的大小和位置,以实现响应式布局。

D.实例

控制对象靠近底部

这样的话不管怎么改编屏幕的大小,依然在底部

对象紧贴底部

修改轴心为0

位置Y为0

而且因为轴心为0缩放的时候,还可以朝向一遍,而不是两边,可以用来做比如树状图.

这篇关于Unity(2022.3.41LTS) - UI详细介绍- Panel(面板)和RectTransform组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1142468

相关文章

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

JS常用组件收集

收集了一些平时遇到的前端比较优秀的组件,方便以后开发的时候查找!!! 函数工具: Lodash 页面固定: stickUp、jQuery.Pin 轮播: unslider、swiper 开关: switch 复选框: icheck 气泡: grumble 隐藏元素: Headroom

性能测试介绍

性能测试是一种测试方法,旨在评估系统、应用程序或组件在现实场景中的性能表现和可靠性。它通常用于衡量系统在不同负载条件下的响应时间、吞吐量、资源利用率、稳定性和可扩展性等关键指标。 为什么要进行性能测试 通过性能测试,可以确定系统是否能够满足预期的性能要求,找出性能瓶颈和潜在的问题,并进行优化和调整。 发现性能瓶颈:性能测试可以帮助发现系统的性能瓶颈,即系统在高负载或高并发情况下可能出现的问题

水位雨量在线监测系统概述及应用介绍

在当今社会,随着科技的飞速发展,各种智能监测系统已成为保障公共安全、促进资源管理和环境保护的重要工具。其中,水位雨量在线监测系统作为自然灾害预警、水资源管理及水利工程运行的关键技术,其重要性不言而喻。 一、水位雨量在线监测系统的基本原理 水位雨量在线监测系统主要由数据采集单元、数据传输网络、数据处理中心及用户终端四大部分构成,形成了一个完整的闭环系统。 数据采集单元:这是系统的“眼睛”,

Hadoop数据压缩使用介绍

一、压缩原则 (1)运算密集型的Job,少用压缩 (2)IO密集型的Job,多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1)为了支持多种压缩/解压缩算法,Hadoop引入了编码/解码器 2)要在Hadoop中启用压缩,可以配置如下参数

如何在页面调用utility bar并传递参数至lwc组件

1.在app的utility item中添加lwc组件: 2.调用utility bar api的方式有两种: 方法一,通过lwc调用: import {LightningElement,api ,wire } from 'lwc';import { publish, MessageContext } from 'lightning/messageService';import Ca

图神经网络模型介绍(1)

我们将图神经网络分为基于谱域的模型和基于空域的模型,并按照发展顺序详解每个类别中的重要模型。 1.1基于谱域的图神经网络         谱域上的图卷积在图学习迈向深度学习的发展历程中起到了关键的作用。本节主要介绍三个具有代表性的谱域图神经网络:谱图卷积网络、切比雪夫网络和图卷积网络。 (1)谱图卷积网络 卷积定理:函数卷积的傅里叶变换是函数傅里叶变换的乘积,即F{f*g}

C++——stack、queue的实现及deque的介绍

目录 1.stack与queue的实现 1.1stack的实现  1.2 queue的实现 2.重温vector、list、stack、queue的介绍 2.1 STL标准库中stack和queue的底层结构  3.deque的简单介绍 3.1为什么选择deque作为stack和queue的底层默认容器  3.2 STL中对stack与queue的模拟实现 ①stack模拟实现

沁恒CH32在MounRiver Studio上环境配置以及使用详细教程

目录 1.  RISC-V简介 2.  CPU架构现状 3.  MounRiver Studio软件下载 4.  MounRiver Studio软件安装 5.  MounRiver Studio软件介绍 6.  创建工程 7.  编译代码 1.  RISC-V简介         RISC就是精简指令集计算机(Reduced Instruction SetCom

Mysql BLOB类型介绍

BLOB类型的字段用于存储二进制数据 在MySQL中,BLOB类型,包括:TinyBlob、Blob、MediumBlob、LongBlob,这几个类型之间的唯一区别是在存储的大小不同。 TinyBlob 最大 255 Blob 最大 65K MediumBlob 最大 16M LongBlob 最大 4G