1. 锚点、轴点等基本属性
锚点(Anchor)
锚点(Anchor) 可以理解为定义了物体的所在区域,在 Unity Editor 中不同的锚点方式也会影响怎样去布局该物体。
比如当我选择了全部铺满之后,控制 UI 位置的属性是 Left, Top, Right 和 Bottom
而当我选择了横向铺满之后,控制 UI 位置的属性则是 Left, Right PosY 和 Height。因为此时 Width 是铺满的,不需要控制。
轴点
轴点可以理解为 UI 的中心在哪里,决定了是以哪里为中心、哪里为坐标轴的原点。
比如 Pivot 为x=0,y=0 RectTransform 的 PosX=0 PosY=0时,可以看到坐标是从左下角计算的。注意图中的四个锚点为屏幕的中心,跟 Pivot 没有关系,不要混淆。是用来清楚的看到位置变化的。
当 Pivot 为x=0.5,y=0.5 RectTransform 的 PosX=0 PosY=0时,可以看到坐标是从Panel 的中心开始计算的。
Pivot 的不同会影响旋转、滑动时的初始点等等,在遇到问题的时候可以考虑是否是 Pivot 设置的问题。
2. 1-1 布局
这种布局是比较普遍的,panel 中包含两个元素,一个是固定高度,另外一个需要铺满父布局(即弹性的),这种布局我的解决办法如下:
- 设置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 的实现:
-
Parent 为 Root GameObject,且作为 Viewport ,会有一个 Mask 组件保证了可视区域。
- Content 使用一个 Vertical Layout 自动布局子物体,使用 Content Size Filter 使 UI 可以自动变大,Pivot 设置 y 为1,保证列表初始状态是从最顶端开始,如果是0.5就是从中间开始的。