Clipped View的裁剪和对齐方式

ClipView的滚动原理是移动他自己这个Panel位置，然后同时移动他自己的Clip范围（由对应的shader完成），制造内部条目滚动的效果

 

一个条目范围是其内所有子元素的总范围（Bound Box），如果子元素大小超过了Clip范围，则子元素在Clip内左上对齐（自动拖拽的情况下）

ClipView的坐标计算不受UIGrid子元素个数的影响，与子元素的间距无关，与列表中排列在第一个位置的子元素的长宽和ClipView的Softness长宽有关

 

1、如需Clip中条目自动居上（不是居中），则需按照以下方式计算，以某个Clip的垂直滚动为例：
首先计算出ClipView这个Panel的Y方向上的偏移
公式为 ClipView.Y = ClipView.H / 2 - Softness.Y - Item.H / 2
（如 ClipView.H = 300 Item高度100 Softness.Y = 10 则 ClipView.Y = 90    300/2 - 10 - 100/2 = 90）
（如 ClipView.H = 400 Item高度80 Softness.Y = 6 则 ClipView.Y = 154    400/2 - 6 - 80/2 = 154）

将这个值填入 Transform.Y 和 -Clipping.Y （一正一负，重复一遍，其滚动原理是移动ClipView这个Panel，同时移动这个Clip的位置，使其看起来是在原地裁剪，实际上是在移动这个Panel）

 

2、ClipView 默认是居中对齐，按照NGUI的计算方式，如果需要移动整个Panel到某个位置，则按如下方式得出左上对齐的panel的坐标：
ClipView.X = ClipView.X + ClipView.W / 2
ClipView.Y = ClipView.Y - ClipView.H / 2

 

3、如果还有偏移，则在此基础上加上偏移量

 

4、另外一个方式是不修改ClipView的坐标（保持ClipView的坐标为0,0），修改UIGrid的坐标为（第一步）中计算的值，是一样的效果

 

因此，对单个条目的大小和Clip的大小，都应要求其尽量规范