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个button,一个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后执行游戏,点击Addbutton,能够添加Item,点击Delbutton,会删除全部的Item。

时间: 2024-08-06 11:56:55

Unity插件之NGUI学习(7)—— ScrollView(Panel)的相关文章

Unity插件之NGUI学习(4)—— 创建UI2DSprite动画

创建一个新的Scene,并按 Unity插件之NGUI学习(2)创建UI Root,并在UI Root的Camera下创建一个Panel. 然后在选中Panel,在菜单中选择NGUI->Create->Unity 2D Sprite 查看Inspector窗口 接着是在Unity中制作Sprite: 在Project窗口创建Textures文件夹,并从外部拖入一些图片素材,然后选中需要转成Sprite的图片,然后在Inspector窗口进行转变Sprite的操作,如图. 选择Sprite(2D

Unity插件之NGUI学习(8)—— Table和NGUI尺寸转换为世界坐标系尺寸

根据 Unity插件之NGUI学习(2),创建一个UI Root,在UI Root下创建一个Texture作为背景图,并设置图片,在Wiget下调整大小:然后在UI Root下再创建一个Panel. 在Hierarchy窗口选中Panel,然后选择菜单Component->NGUI->Interaction->Table,查看Inspector窗口,在Panel的属性中增加了UITable. Columns 表示每行有几个元素 Direction 表示超过每列的元素后添加元素的方向 So

Unity插件之NGUI学习(9)—— Tween和世界坐标系尺寸转换为NGUI尺寸

在游戏中,有一种比较常见的动画效果,就是产生得分后,分数会在游戏中显示,并快速移动到总分的位置并使之相加.今天我就打算使用NGUI的Tween来制作这种分数动画效果. 根据 Unity插件之NGUI学习(2),创建一个UI Root,然后使用NGUI创建一个Label和一个Button. 在Project窗口中,在Resources/Prefabs文件夹中创建一个Prefab,该Prefab就是一个NGUI的Label,然后在菜单中选择NGUI->Tween->Rotation和NGUI-&g

Unity插件之NGUI学习(5)—— 创建Label图文混排及文字点击

创建一个新的Scene,并按 Unity插件之NGUI学习(2)创建UI Root. 准备工作,制作Font,现在Project窗口创建一个Font文件夹,然后从系统自带字体文件夹中选择自己需要的字体,我选择了黑体,然后拖到Font文件夹中去.选择刚导入的字体. Font Size默认是16,不过网上看到过size16在IOS上显示太小,所以设置为30. 在菜单中选择NGUI->Open->Font Maker Type默认是Generated Bitmap--会生成材质文件,Dynamic-

Unity插件之NGUI学习(6)—— 关于Widget如何添加触发事件

NGUI中,Button本身就带有OnClick事件,但是Sprite,Label等( 也绑有Widget的)并没有触发事件,其实NGUI的事件触发都必须添加Box Collider,并勾选Is Trigger,在Inspector窗口设置Box大小尺寸,可以在Widget的Collider勾选auto-adjust to match.还有一个比较重要的参数需要设置正确,即是UI Root下Camera参数,在Inspector窗口中,要确定UICamera中的Event Type选择3D UI

Unity插件之NGUI学习(3)—— 创建Button

紧接上一个的项目,使用NGUI在Plane下创建Button 选中Hierarchy窗口中Plane,选择菜单NGUI->Open->Widget Wizard,打开Widget Tool窗口 在Widget Tool窗口选择先前制作的Atlas,在Template中选择Button,在Background选择按钮背景图,Add To选择Plane,按钮就会出现了. 下面介绍按钮触发事件: 可参考宣雨松的关于NGUI事件的文章:http://www.xuanyusong.com/archive

Unity插件之NGUI学习(2)—— 创建Texture和Sprite

首先删除当前的MainCamera并保存当前的scene 选择菜单NGUI->Create->2D UI 添加后显示 Directional light是过后添加的直射光线 在Hierarchy窗口选择Camera,在Inspector窗口中,UICamera的Event Type选择2D UI. 然后在Build Settings...切换Android平台,下一步很重要,在UI Root选择Scaling Style为FixedSizeOnMoblies,一开始是默认的PixelPerfe

【学习中】Unity插件之NGUI 完整视频教程

课程 章节 内容 签到 Unity插件之NGUI 完整视频教程 第一章 NGUI基础控件和基础功能学习 1.NGUI介绍和插件的导入 6月29日 2.创建UIRoot 6月29日 3.学习Label控件,显示文字 6月29日 4.学习Sprite创建精灵,显示图片 5.学习Panel面板,控件容器 6.创建Button按钮,使用脚本监听按下 7.创建图集Atlas 8.切图SlicedSprite九宫切图 9.dynamicFont动态字体制作和显示 10.widget属性,pivot,dept

NGUI 学习笔记之一 ScrollView

一.createScrollView 1.First, select the panel you want to be your scroll view and right-click anywhere in the Scene View to bring up the context menu, then choose Attach -> Scroll View. 2.The last step is to add the UIDragScrollView script to at least