一、UGUI的核心元素:

 Anchor(锚点):

每个控件都有一个Anchor属性,控件的4个顶点,分别与Anchor的4个点保持不变的距离,不受屏幕分辨率变化的影响。

                      系统默认设置控件的Anchor位置在其父物体的中心处,且不能离开父物体的范围。

                      将Anchor设置在父物体的左侧,可以实现左对齐的效果。

                      将Anchor设置在父物体的4个顶点上,子物体将随父物体同步缩放。

Pivot(轴):

控件的中心点(或称为轴),控件围绕Pivot发生旋转(若想控件围绕某个顶点旋转,改变Pivot位置即可)

注意区别:

      对象的Transform 的position为世界坐标。

      对象的 Transform的 localPosition为当前对象轴心点与父UI对象轴心点的相对位置

      对象的RectTransform继承自 Transform,编辑器中显示的PosX、PosY、PosZ指的是Pivot与Anchor间的相对位置,叫做anchoredPosition3D

UGUI的核心内容

UGUI的核心内容

 

RectTransform 矩形变换

class in UnityEngine/Inherits from: Transform

Variables 变量

anchoredPosition The position of the pivot of this RectTransform relative to the anchor reference point.
该矩形变换相对于锚点参考点的中心点位置。
anchoredPosition3D The 3D position of the pivot of this RectTransform relative to the anchor reference point.
该矩阵变换相对于锚点参考点的中心点的3D位置。
anchorMax The normalized position in the parent RectTransform that the upper right corner is anchored to.
该锚点在父矩阵变换中归一化位置,右上角是锚点。
anchorMin The normalized position in the parent RectTransform that the lower left corner is anchored to.
在父矩阵变换上归一化位置,该锚点在左下角。
offsetMax The offset of the upper right corner of the rectangle relative to the upper right anchor.
矩形右上角相对于右上角锚点的偏移量。
offsetMin The offset of the lower left corner of the rectangle relative to the lower left anchor.
矩形左下角相对于左下角锚点的偏移量。
pivot The normalized position in this RectTransform that it rotates around.
在该矩阵变换的归一化位置,围绕该中心点旋转。
rect The calculated rectangle in the local space of the Transform.
计算矩形自身空间的变换。
sizeDelta The size of this RectTransform relative to the distances between the anchors.
矩阵变换的大小相对于锚点之间的距离。

Public Functions 公共函数

GetLocalCorners Get the corners of the calculated rectangle in the local space of its Transform.
在该变换的本地空间中获取计算的矩形的折角的本地坐标。
GetWorldCorners Get the corners of the calculated rectangle in world space.
获取世界空间中矩形计算的折角。
SetInsetAndSizeFromParentEdge Set the distance of this rectangle relative to a specified edge of the parent rectangle, while also setting its size.
设置父矩形的指定边缘的相对于该矩形的距离,当然也设置它的大小。
SetSizeWithCurrentAnchors Makes the RectTransform calculated rect be a given size on the specified axis.
使矩形变换计算矩形在指定坐标轴上是给定大小。

Delegates 委托

ReapplyDrivenProperties Delegate used for the reapplyDrivenProperties event.
委托用于reapplyDrivenProperties事件。

 

RectTransformUtility 矩阵变换工具

class in UnityEngine

Description 描述

Utility class containing helper methods for working with RectTransform.

矩阵变换工作的工具类包含帮助方法。

 

Static Functions 静态函数

FlipLayoutAxes Flips the horizontal and vertical axes of the RectTransform size and alignment, and optionally its children as well.
翻转水平轴和垂直轴的 RectTransform 大小和对齐方式,并且选择性的子物体也一样。
FlipLayoutOnAxis Flips the alignment of the RectTransform along the horizontal or vertical axis, and optionally its children as well.
沿着水平或者垂直轴翻转对齐的矩形变换,并且它的子物体也是可选择的。
PixelAdjustPoint Convert a given point in screen space into a pixel correct point.
将屏幕空间中给定的点转换成正确像素点。
PixelAdjustRect Given a rect transform, return the corner points in pixel accurate coordinates.
指定矩形变换,返回角点的精确坐标单位像素。
RectangleContainsScreenPoint Does the RectTransform contain the screen point as seen from the given camera?
从指定摄像机中观看该矩形变换是否包含屏幕点?
ScreenPointToLocalPointInRectangle Transform a screen space point to a position in the local space of a RectTransform that is on the plane of its rectangle.
屏幕空间点转换为矩形变换内部的本地位置,该点在它的矩形平面上。
ScreenPointToWorldPointInRectangle Transform a screen space point to a position in world space that is on the plane of the given RectTransform.
屏幕空间点转换为世界空间点,该点在矩形变换的平面上。

 

 

二、UGUI的基本控件:

Canvas(画布):所有UI控件必须在Canvas上面绘制,也可以看做所有UI控件的父物体。

Panel(面板):主要的功能就是一个容器,可以放置其他控件,使其进行整体移动、旋转、缩放等。一个功能完备的UI界面,往往会使用多个Panel容器,甚至使用Panel嵌套。

Text(文本):富文本功能类似HTML中的标签。

Image(图像):图像源为2D Sprite格式。等比例调节图像大小,需要按住Shift键进行调节。Image Type的Sliced选项,需要对Sprite进行“九宫格”处理。

Raw Image(原始图像):图像源为Texture格式。

最后补充一个基本组件:

Mask(遮罩):遮罩并不是GUI的控件。它以父物体的范围约束子物体的显示,如果子物体过大,将只显示在父物体中的一部分。

 

三、UGUI的复合控件:

Button(按钮):由两个控件组成:1.添加了Button组件的Image控件,2.Text控件。Image控件是Text控件的父对象。

                    鉴于UGUI的高度自由,也可以理解为添加了Button组件、Image组件的空对象和添加了Text组件的空对象。

                    通过Transition对按钮的三态进行设置。

InputField(输入框):由三个控件组成:1.添加了Input Field组件的Image控件,2.Text控件(用作显示提示内容),3.Text控件(接收输入内容)。Image控件是两个Text控件的父对象。

                           Content Type对输入的字符类型进行预处理功能。

Toggle(开关):即可以做单选框又可以做复选框,系统默认为复选框。

                    由四个控件组成:1.添加了Toggle组件的空对象,2.Image控件(显示状态框的背景图),3.Image控件(显示当前状态),4.Text控件(用作显示选项内容)。

                    如何制作单选框:创建一个空对象,添加Toggle Group组件。在空对象下创建若干个Toggle控件,设置Group,并保持其中一个Toggle控件的Is On开关为true,其余为false。

Slider(滑动条):由6个控件组成:1.添加了Slider组件的空对象,2.Image控件(显示背景图像),3.空对象(控制填充区域),4.Image控件(显示填充图像),5.空对象(控制滑块移动区域),6.Image控件(显示滑块)

                     滑动条通过滑块驱动,在minValue和maxValue区间运动,根据当前的Value值,不断改变背景图像和填充图像的显示范围。

                     滑动条既可以用作音量控制等输入控件,去掉滑块后,也可以用作血量、进度等显示控件。

ScrollBar(滚动条):由3个控件组成:1.添加了Scrollbar组件的Image对象,2.空对象(控制滑块移动区域),3.Image控件(显示滑块)

滚动条与滑动条的原理类似,对比而言,滚动条背景色单一,数值范围固定为0到1,偏重于单步数值的设置

滚动条既可以用作垂直滚动文本(背包),也可以用作水平滚动时间轴,还可以垂直+水平进行图像的缩放。

 

四、UGUI的高级控件:

高级控件并不是UGUI直接提供的控件,需要自行组合,组合原理可以通过拆解复合控件学习。

Scroll Rect(滚动区域):在一个较小的区域显示较多的内部控件的时候使用的一种机制

    Scroll Rect(空对象,设置一定的区域范围,作为当前显示的窗口,添加组件:Scroll Rect、Image、Mask)

             Content(空对象,长度或宽度要大于Scroll Rect)

                   Scroll View若干个(根据需要,Image、Button控件随意添加)

      ScrollBar(滚动条控件)

    在Scroll Rect组件中设置Content项和Scrollbar项即可

TabPage(选项卡):能够在有限的空间中,放入更多的展示内容

    TabPage(空对象)

      ToggleGroup(空对象,添加Toggle Group组件)

               Toggle若干个(根据需要,将Toggle设置为单选框)

      DisplayContent(Image,作为背景图。Toggle Group和DisplayContent可以根据需要进行垂直或水平布局)

        Page若干个(根据需要,数量需要与Toggle对应)

    在Toggle的On Value Changed(Boolean)中设置对应Page的SetActive

总结:UGUI的功能很强大,DIY度相当高,虽然缺少了一部分功能,比如下拉框,树视图,列表视图等,但是通过组件的搭配使用,完全可以自己做出来

附录上个人这两天的学习笔记,思维导图确实是个好东西,学习ING~~~~

 

UGUI的核心内容

相关文章:

  • 2021-06-19
  • 2021-06-09
  • 2021-05-27
  • 2021-08-27
  • 2022-12-23
  • 2022-12-23
  • 2020-06-24
  • 2021-12-03
猜你喜欢
  • 2021-07-16
  • 2022-12-23
  • 2021-11-16
  • 2021-09-23
  • 2021-10-01
  • 2022-12-23
  • 2021-05-22
相关资源
相似解决方案