首页 > 代码库 > Unity插件之NGUI学习(7)—— ScrollView(Panel)
Unity插件之NGUI学习(7)—— ScrollView(Panel)
今天介绍的ScrollView,参考的是NGUI(3.6.8)中的Example项目:Scroll View(Panel)。
先按照Unity插件之NGUI学习(2)创建一个UI Root,然后在UI Root下面创建一个Scroll View,选择菜单NGUI->Create->Scroll View
然后在Inspector窗口做一些参数设置
Movement设置滚动Vertical纵向或者horizontal横向。
Scroll Bars可以添加纵向或者横向的滚动条控件(在这个项目中暂且不添加)。
在UI Panel可以设置滚动的的显示范围,Clipping可以选择Soft Clip,设置Size的大小,在预览窗口,就能看到亮紫色就是滚动Panel的显示区域。
在Hierarchy窗口选择Scroll View,在菜单中选择NGUI->Create->Grid,然后在Hierarchy窗口选择刚创建的Grid,在菜单Component->NGUI->Interaction->Center Scroll View on Child。
设置单个Item Cell的高度和宽度,Arrangment设置纵向还是横向的。
然后制作一个ListItem的Prefab,高度和宽度要跟上面Grid的Cell Width、Cell Height要一致,需要给ListItem添加2个重要的脚本和Box Collider,可以实现滚动效果,以及Item点击后自动调整滚动位置。脚本的添加,在菜单中选择Commponent->NGUI->Interaction->Drag Scroll View和Commponent->NGUI->Interaction->Center Scroll View on Click。Box Collider添加后,勾选Is Trigger。
然后在Hierarchy窗口的UIGrid下,添加多个ListItem,然后点击运行,就可以看到滚动效果,点击单个Item,滚动会自动调整位置。
下面介绍下代码动态调整Scroll View的Item数量。
首先添加2个按钮,一个AddButton,一个DelButton,然后创建一个ListViewTest脚本。
ListViewTest代码如下:
using UnityEngine;
using System.Collections;
public class ListViewTest : MonoBehaviour {
private GameObject scrollView;
private UIGrid grid;
private UIButton addBtn, delBtn;
// Use this for initialization
void Start () {
scrollView = GameObject.Find("Scroll View");
grid = scrollView.GetComponentInChildren <UIGrid>();
addBtn = GameObject.Find("AddButton").GetComponent<UIButton>();
delBtn = GameObject.Find("DelButton").GetComponent<UIButton>();
EventDelegate.Add(addBtn.onClick, AddItem);
EventDelegate.Add(delBtn.onClick, DelAllItems);
}
// Update is called once per frame
void Update () {
}
void AddItem() {
int count = grid.transform.childCount + 1;
//克隆预设
GameObject o = (GameObject)Instantiate(Resources.Load("Prefabs/ListItem"));
UILabel label = o.GetComponentInChildren<UILabel>();
//为每个预设设置一个独一无二的名称
label.text = "item" + count;
//将新预设放在Panel对象下面
o.transform.parent = grid.transform;
//下面这段代码很重要,是因为创建预设时 会自动修改旋转缩放的系数,
//我不知道为什么会自动修改,所以重新为它赋值
o.transform.localPosition = Vector3.zero;
o.transform.localScale = new Vector3(1, 1, 1);
//列表添加后用于刷新listView
grid.repositionNow = true;
}
void DelAllItems() {
foreach (Transform trans in grid.transform) {
Destroy(trans.gameObject);
}
grid.repositionNow = true;
}
}
把脚本绑定在UI Root后运行游戏,点击Add按钮,可以增加Item,点击Del按钮,会删除所有的Item。
Unity插件之NGUI学习(7)—— ScrollView(Panel)