Unity自定义窗口路径选择 unity窗口布局

转载

mob64ca1407d5aa 2024-04-25 13:30:06

文章标签 Unity自定义窗口路径选择 unity滑动窗口锚点 UI Mask 文章分类 游戏开发

1. 锚点、轴点等基本属性

锚点(Anchor)

锚点(Anchor) 可以理解为定义了物体的所在区域，在 Unity Editor 中不同的锚点方式也会影响怎样去布局该物体。

比如当我选择了全部铺满之后，控制 UI 位置的属性是 Left, Top, Right 和 Bottom

全部铺满

而当我选择了横向铺满之后，控制 UI 位置的属性则是 Left, Right PosY 和 Height。因为此时 Width 是铺满的，不需要控制。

横向铺满根据不同的 UI 布局情况选择正确的锚点方案会大大提升效率，尽管同一种布局方案可以使用多种锚点方案来解决。

轴点

轴点可以理解为 UI 的中心在哪里，决定了是以哪里为中心、哪里为坐标轴的原点。

比如 Pivot 为x=0,y=0 RectTransform 的 PosX=0 PosY=0时，可以看到坐标是从左下角计算的。注意图中的四个锚点为屏幕的中心，跟 Pivot 没有关系，不要混淆。是用来清楚的看到位置变化的。

Pivot(0,0)

当 Pivot 为x=0.5,y=0.5 RectTransform 的 PosX=0 PosY=0时，可以看到坐标是从Panel 的中心开始计算的。

Pivot(0.5,0.5)

Pivot 的不同会影响旋转、滑动时的初始点等等，在遇到问题的时候可以考虑是否是 Pivot 设置的问题。

2. 1-1 布局

这种布局是比较普遍的，panel 中包含两个元素，一个是固定高度，另外一个需要铺满父布局(即弹性的)，这种布局我的解决办法如下：

Anchor Presets

设置TopBar 的Anchor Presets 为 Top-Stretch (命名方式参见上图 Anchor )，Top 说明组件靠上，Stretch 说明套拉伸铺满。同时设置 Pivot 为(0.5, 1)，y 轴从上边缘开始算起，而不是中间。最后设置 Left=0, Right=0, PosY=0, height 设置为自己想要的大小，这里是300。

设置 Content 为 Stretch-Stretch，说明全部铺满。Top 设置 300，把 TopBar 的高度给预留出来。

通过以上设置，可以达到在不同的设备上都能实现 TopBar 为固定高度而Content 能铺满剩余空间。

3. 滑动组件(ScrollView)

在 Unity 中实现滑动控件主要是利用自带的 ScrollRect ，官方的Manual手册是一个不错的参考文档。

滑动窗口的实现主要有如下几部分：

Root GameObject，最外层的组件，承载了 ScrollRect 组件。

ViewPort，Root GameObject 的子组件，起到了 Mask 的作用。ScrollView 的实现实质上就是一个 Mask 定义了可显示区域，而 Content 实际上是正常大小，在这个窗口里滚动。如无特殊需求，ViewPort 可以使 Root GameObject 本身

Content，是内容的具体承载体。

下面是一个常见的 ScrollView 的实现：

Scrollview 示例

层次结构

Parent 为 Root GameObject，且作为 Viewport ，会有一个 Mask 组件保证了可视区域。