NGUI PopupList和Grid
2016-12-16 本文已影响94人
LeoYangXD
PopupList
我们先创建一个Label,然后给他两个组件,BoxCollider和PopupList
- Boxcollider 创建这个的时候我们在NGUI的下拉菜单中选择Attach—collider,意思就是适配一个collider这样的创建出来的collider基本是不需要我们再去调节大小的。这个是我们触发点击下拉框的关键组件。
- PopupList这个是下拉框的核心组件

- Options这个显示的是我们下拉框内容,是按行识别的
- Default是默认情况显示内容。
- Position 表示点击出来的下拉框的位置,可以选择自动,上方,下方。
- Alignment表示下拉框里的内容文字对齐方式,左右对齐其他的。
- OpenOn表示怎么触发下拉框事件
- Background 下拉框背景图片
- Highlight 我们鼠标移到下拉框某个内容时,高亮的图片,大家可以试验下。
注意
On Value Change这个选项一定要勾选,并且放入相应的Label,并且在Method中选择

相应的Label就是在你需要把你选择的内容在该Label中显示

图中我的就是物体自身,因为我是在label物体上做了一个下拉框

这个就是我通过上边操作做的下拉框,图片不怎么好看,将就下。
制作下拉框注意事项
- 必须有个Boxcollider接受单击事件
- 填写选项时一定要注意换行
Grid
这个组件作用就是把他的子类物体按照顺序排列,比如我们经常看到的背包系统。

- Arrangement 排列顺序,Horizontal水平排列、Vertical垂直排列、Cell Snap按子项当前的位置对齐子项。
- Cell Width,Height 每个网格网格的大小,这个大小一定要比子项中的宽度和高度大,否则子项每个对象会显示不全
- Column Limit 每行(每列)允许的最大子项数量,如果排列方式选的是Cell Snap那此项就不会有。如果填的是0,那意思就是没有限制
- Sorting 排序方式,None按照Index排序、Alphabetic按照名字进行排序、Horizontal和Vertical按照localPosition进行的排序、Custom自己实现的排序方式。
- Pivot 锚点 ,有九个选项,这个不知道怎么解释,上两张图大家应该就明白了

此时选项是TopLeft,图中的那个坐标点是Grid的坐标

此时的选项是Center。
- 最后的三个选项一般我们都把他勾上,大家可以用英文翻译下基本都能理解
注意
当我们运行的时候我们会发现Grid排列一次就会设置成Inactive,(意思就是不被勾选了),但是有时候我们会需要用代码动态向此Grid加入子项,那么这时候Grid就不会再次进行排序了。所以说有时候我们动态加入的时候,我们需要加一行代码

在我们每次需要向Grid加载子项的时候都加这样一行代码就可以解决了。