NGUI之UIGrid & UITable
来源:互联网 发布:淘宝达人后台网址 编辑:程序博客网 时间:2024/05/17 07:30
UIGrid 和 UITable 的原理很简单,对子 Transform 的 List 进行排序,然后更加不同的规则进行定位排列(UIGrid 和 UITable 还是有很大不同的)。
排序(Sort)
UIGrid和 UITable 定义了5种排列方式(其实是3种,None默认不排序即Transform的默认排序,Custom虽然提供virtual 可以重载):
public enum Sorting { None, Alphabetic, Horizontal, Vertical, Custom, }
对应的三种排序方法:集 Alphabetic 按照名字字符串排序,Horizontal 和 Vertical 按照localPosition 进行的排序
static public int SortByName (Transform a, Transform b) { return string.Compare(a.name, b.name); } static public int SortHorizontal (Transform a, Transform b) { return a.localPosition.x.CompareTo(b.localPosition.x); } static public int SortVertical (Transform a, Transform b) { return b.localPosition.y.CompareTo(a.localPosition.y); }
这里说下,虽然提供了Custom方式,第一感觉NGUI的developer考虑很周到,但是提供的确实重载 virtual 函数的方式,D.S.Qiu 觉得这种方式太不好了,为了一个方法就要写一个 子类去重载,个人觉得指定一个委托,扩展起来会更直观,但这一要求开发者一开始就得指定这个 Custom Sort Delegate。
UIGrid定位原理
下面这段代码是 Reposition() 的一部分,原理很简单:根据定义的cellHeight 和cellWidth 来调整子 Transform 的 localPosition。这里还是吐槽下:Reposition() 的代码太多容易了,至少我看到了这段代码在 Reposition 中出现了两次,完全多余,其实就是处理流程就应该是: 先获取所有子 Transform List ,然后对List 排序,最后就是下面这段定位代码了。
for (int i = 0, imax = list.Count; i < imax; ++i) { Transform t = list[i]; if (!NGUITools.GetActive(t.gameObject) && hideInactive) continue; float depth = t.localPosition.z; Vector3 pos = (arrangement == Arrangement.Horizontal) ? new Vector3(cellWidth * x, -cellHeight * y, depth) : new Vector3(cellWidth * y, -cellHeight * x, depth); if (animateSmoothly && Application.isPlaying) { SpringPosition.Begin(t.gameObject, pos, 15f).updateScrollView = true; } else t.localPosition = pos; if (++x >= maxPerLine && maxPerLine > 0) { x = 0; ++y; } }
UITable 定位原理
UITable 的定位方法在 ReositionVaribleSize 中,跟UIGrid 最大不同点是:UIGrid 只根据定义的cellHeight 和 cellWidth 来计算位置,UITable 根据“内容“(UIWidget)来计算位置的。
protected void RepositionVariableSize (List children)
{
float xOffset = 0;
float yOffset = 0;
int cols = columns > 0 ? children.Count / columns + 1 : 1; int rows = columns > 0 ? columns : children.Count; Bounds[,] bounds = new Bounds[cols, rows]; Bounds[] boundsRows = new Bounds[rows]; Bounds[] boundsCols = new Bounds[cols]; int x = 0; int y = 0; //这个循环计算每行,每列,每个cell 的内容的编辑 Bounds for (int i = 0, imax = children.Count; i < imax; ++i) { Transform t = children[i]; Bounds b = NGUIMath.CalculateRelativeWidgetBounds(t, !hideInactive); Vector3 scale = t.localScale; b.min = Vector3.Scale(b.min, scale); b.max = Vector3.Scale(b.max, scale); bounds[y, x] = b; boundsRows[x].Encapsulate(b); boundsCols[y].Encapsulate(b); if (++x >= columns && columns > 0) { x = 0; ++y; } } x = 0; y = 0; //计算位置 for (int i = 0, imax = children.Count; i < imax; ++i) { Transform t = children[i]; Bounds b = bounds[y, x]; Bounds br = boundsRows[x]; Bounds bc = boundsCols[y]; Vector3 pos = t.localPosition; pos.x = xOffset + b.extents.x - b.center.x; pos.x += b.min.x - br.min.x + padding.x; //以每列最右边的x值为标准,即保证每列最左边的基准点 **if (direction == Direction.Down) { pos.y = -yOffset - b.extents.y - b.center.y; pos.y += (b.max.y - b.min.y - bc.max.y + bc.min.y) * 0.5f - padding.y; } else { pos.y = yOffset + (b.extents.y - b.center.y); pos.y -= (b.max.y - b.min.y - bc.max.y + bc.min.y) * 0.5f - padding.y; } xOffset += br.max.x - br.min.x + padding.x * 2f; t.localPosition = pos; if (++x >= columns && columns > 0) { x = 0; ++y; xOffset = 0f; yOffset += bc.size.y + padding.y * 2f; } }
}**
这里还是有吐槽:根据 Bounds 的定义 b.extens.x - b.center.x + b.min.x == 0 ,也就是这部完全是没有必要的
pos.x = xOffset + b.extents.x - b.center.x; pos.x += b.min.x - br.min.x + padding.x;
类似计算 y 的值也其他更直接方法
(b.max.y - b.min.y - bc.max.y + bc.min.y) * 0.5f
使用经验
1.UIGrid 没有考虑Bounds ,根据UIGrid 的计算公式可以知道:UIGrid 的第一个元素的 localPosition 的 x 和 y 一定都是 0 ,所以要位置,必须调整UIGrid 的localPosition ,但是实际在有可能调整的是 子对象,然后再 Scene 窗口看是没问题的(注意此时还没有重排),一运行就会出现位置的偏移。
2.UITable 的子组件的 x 总是以 每列最左为 起始基准点的, y 则是每行居中对齐 :(b.max.y - b.min.y - bc.max.y + bc.min.y) * 0.5f 这行代码起始就是计算当前组件和所在行中心点的偏移。
下图是将NGUI 其中一个组件的 sprite 左移了,就出现下面的排列:
虽然 NGUI 提供了 UIGrid 和 UITable ,起始是非常之不完善,几乎做不了什么功能。
这里分享两条经验:
- 使用UIGrid时,调整界面的时候让 UIGrid 的 transform 和 其第一个子组件的 transform 相同,这样经过计算之后,位置就是之前调整想要的。或者将 第一个子组件 transform 重置,这样调整UIGrid 的 transform 位置看到的效果就是真实的。
- 使用UITable 让每列元素的左边界都相同,即左对齐。可以看到 NGUI Example 的 Question Log 的 Table 的所有组件(UILable UISprite)的 pivot 都调整为 left 。
总之,就是根据UIGrid 和UITable 的排列原理做相应的调整。
小结:
这篇文章相对于NGUI所见即所得系列其他文章来说,简单很多。最近要做一个界面根据内容自适应,挺复杂的,一堆莫名其妙的问题。之前一直觉得 Unity 的 UI 没有Window MFC 等开发直接拖拽方式那么直观。NGUI 虽然很庞大,但NGUI越来越容易让我吐槽了,可能是对NGUI的家底多少掌握的缘故吧。
很久就听说Unity要出自己的 UI 了,其实D.S.Qiu 也一直有想尝试自己写一点UI的可视化编辑工具(Visual Editor)。昨天不经意看到 Cocos2D 的 UI 编辑器 CocoStudio 感觉很强大,然后顺手google Unity有没有这方面的工具,果然还是发现了 UIToolkit , bitverse RagePixel 和 EWS editor ,也就说 Unity其实也有些 UI 可视化工具的。尤其 bitverse 支持的组件特别丰富,很强大,只可惜没有集成 Batch DrawCall 的功能。
- NGUI之UIGrid & UITable
- NGUI所见即所得之UIGrid & UITable
- NGUI所见即所得之UIGrid & UITable
- NGUI之UIGrid
- unity NGUI的UIGrid与UITable的区别
- NGUI-UIGrid
- u3d之NGUI的UIGrid初探
- 在Uigrid和Uitable下面加东西
- 【Unity3D】【NGUI】UIGrid
- unity开发 --------- NGUI (UIGrid)
- NGUI的UITable
- 【Unity3D】【NGUI】UITable
- unity开发 --------- NGUI (UITable)
- 关于NGUI中的UITable
- Unity3D学习笔记——NGUI之UIGrid
- Unity3D学习笔记——NGUI之UITable
- NGUI控件说明(中文) UIGrid
- NGUI UIScrollView UIGrid性能优化
- android Activity之间的数据交换
- linux环境配置文件分类
- IOS入门知识点汇总
- ServletContext总结
- SVN 遇到的问题
- NGUI之UIGrid & UITable
- 一直不愿意面对的问题——我的总结
- 跨平台的文件路径书写方式 File.separator:获取与系统有关的默认名称分隔符
- Jmeter BeanShell PostProcessor提取json数据
- RHEL7安装、ip修改、关防火墙、关selinux、配置yum源
- Android动画基础-逐帧动画
- 命令行忽略一个已经被跟踪的目录
- 网贷导航
- Fastjson 初识