NGUI:實現ScrollView拖動到最底新增下一頁內容?

如果ScrollView的內容是分頁設計的，想實現ScrollView拖動到最底端再獲取下一頁，如果實現呢，見下文。

工具/原料

Unity3D

NGUI

方法/步驟

這裡用的NGUI版本是3.7.4，需要的朋友可以在下面的網盤下載：

開啟Unity3D後，匯入NGUI。匯入成功後，在選單欄中找到NGUI->Open->Widget Wizard(Legacy)如下圖：

在Widget Tool中單擊Open the New UI Wizrad，如下圖

在New UI中設定好Layer和Camera就單擊Create Your UI，如下圖：

建立好之後，選中UI Root，單擊選單欄中的NGUI->Create->Scroll View建立滾動檢視，如下圖：

建立好Scroll View後，在Scroll View下建立Grid。單擊選單欄中的NGUI->Create->Grid如下圖：

我們要在ScrollView中顯示多條內容，所以我們要做個ScrollView中Item項的模版，方便我們重用。在Scroll View下建立一個Widget。單擊選單欄的NGUI->Create->Widget，把建立好的Widget改名為Item，如下圖：

我們先在來設定一下ScrollView、Grid、Item的大小。我們的ScrollView預設是300*200的，我們保持不變。ScrollView的拖動方向，我們設定成垂直。

將Grid的大小設定為：300*100，佈置方向設定為垂直

Item項的大小我們也設定成300*100，如下圖

在Item項下，我們新增一個Sprite和一個Label用於顯示內容。建立方式如下圖：

設定一下Sprite和Label的值，如下圖

建立一個指令碼命名為ItemControl.cs

指令碼內容：

using UnityEngine;

using System.Collections;

public class ItemControl : MonoBehaviour {

private UILabel label;

public void setItem(string str)

{

label = transform.GetComponentInChildren ();

label.text = str;

}

}

把這個指令碼過在Item上，並在Item上新增UIDrag Scroll View和Box Collider，其中Box Collider的大小調成300*100也就是Item項的大小。最後將Item隱藏。如下圖：

建立一個指令碼命名為：ScrollViewControl.cs

指令碼內容：

using UnityEngine;

using System.Collections;

public class ScrollViewControl : MonoBehaviour {

UIScrollView scrollView;

GameObject item;

GameObject grid;

void Start () {

}

void initControl()

{

scrollView = transform.GetComponent ();

item = transform.FindChild("Item").gameObject;

grid = transform.FindChild("Grid").gameObject;

}

void OnEnable()

{

initControl();

getInfo();

scrollView.onDragFinished += OnDragFinished;

}

void OnDisable()

{

scrollView.onDragFinished -= OnDragFinished;

}

void OnDragFinished()

{

scrollView.UpdateScrollbars(true);

Vector3 constraint = scrollView.panel.CalculateConstrainOffset(scrollView.bounds.min, scrollView.bounds.min);

if (constraint.y <= 1f)

{

getInfo();

}

flushRank();

}

void getInfo()

{

for (int i = 0; i < 3; i++)

{

GameObject newItem = NGUITools.AddChild(grid, item);// 以grid為父物件，以item為模版建立子物件

newItem.SetActive(true);

string str = string.Format("第{0}項，建立時間：{1}", i, System.DateTime.Now);

newItem.GetComponent ().setItem(str);

}

}

void flushRank()

{

grid.GetComponent ().Reposition();

grid.GetComponent ().repositionNow = true;

NGUITools.SetDirty(grid);

}

}

將該指令碼掛在Scroll View上。

執行，看效果。剛開始只有三個Item項，當拖動到最後一條，又會新增三條。

是不是很簡單。