ARTICLE · INTELLIGENCE

战地情报 · 详情页

来自尧图项目组的一线实战观察与深度解析

UGUI 滚动视图结构

UGUI 滚动视图结构

基础

滚动视图,水平方向0是左边,垂直方向0是底部。

如图所示,滚动位置是(0,0)的时候,content的底边和viewport的底边重合,content的左边和viewport的底边重合。滚动时候,viewport的位置不变,是content的位置改变,挪动content的位置来实现视图滚动。

xMaxDist 和 yMaxDist 就是最大移动距离。

(移动的距离x, 移动的距离y) / (xMaxDist, yMaxDist) = normalizedPosition

如图所示,现在要把三角形从ContentPos移动到ViewportPos那里。为了方便计算,把viewport和content左下角重合放在一起,先把坐标都转换为相对于左下角(0,0)的坐标。这样一来,

MoveDir = ViewportPos - ContentPos

最后:

normalizedPosition.x = -MoveDir .x / xMaxDist

normalizedPosition.y = -MoveDir .y / yMaxDist

最后要加一个负号,因为前面算出来是个负数,如果是正数不需要移动。如果用MoveDir = ContentPos - ViewportPos,就不用加负号了,这里为了理解方便用的ViewportPos - ContentPos。

如果Content移动了,Content左下角和Viewport左下角不重合,Content内点的位置依旧使用相对于左下角的位置,然后按照MoveDir = ViewportPos - ContentPos计算移动向量,最后计算出normalizedPosition。

NGUI就没有这么严格,视口和内容在同时动,定位是按滚动距离来搞的,没有这个方便。

对齐

就是水平对齐和垂直对齐方式的控制。将content对齐到viewport 对应 content的pivot位置实现,也是设置的normalizedPosition值。

比如水平居中、垂直居上这种效果,content的pivot是(0.5,1),那么就将content对齐到viewport的(0.5, 1)处,也就是将normalizedPosition设置为(0.5,1) 就实现了。

当content 填满viewprot和 未填满 viewport都是一样的处理。非常巧妙。

RELATED READING

延伸阅读

更多一线实战笔记与深度复盘,助您持续精进