1. 程式人生 > >Clipped View的裁剪和對齊方式

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的大小,都應要求其儘量規範