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

Tags: 內容,

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

工具/原料

Unity

方法/步驟

開啟Unity3D後,單擊選單GameObject->UI->Panel,建立一個Panel。如下圖:

UGUI:實現ScrollRect拖動到最底新增下一頁內容

建立好Panel之後,選中Canvas,單擊滑鼠右鍵,選中UI->Scrollbar,建立一個ScrollBar。

UGUI:實現ScrollRect拖動到最底新增下一頁內容

把scrollbar的Direction設定成Bottom To Top如下圖:

UGUI:實現ScrollRect拖動到最底新增下一頁內容

在剛剛建立好的Panel下新增ScrollRect和Mask元件,新增方法如下圖:

UGUI:實現ScrollRect拖動到最底新增下一頁內容

新增好ScrollRect後,把之前建立好的ScrollBar拖到ScrollRect的Vertical Scrollbar上。如下圖:

UGUI:實現ScrollRect拖動到最底新增下一頁內容

選中Panel,右鍵單擊滑鼠,選中CreateEmpty,將建立的新物件命名為grid

UGUI:實現ScrollRect拖動到最底新增下一頁內容

在grid下新增Grid Layout Group和Content Size Fitter元件,並如下設定。

UGUI:實現ScrollRect拖動到最底新增下一頁內容

選中Panel,單擊滑鼠右鍵,選擇UI->Panel,並將建立好的Panel命名為Item

UGUI:實現ScrollRect拖動到最底新增下一頁內容

選中剛剛建立好的Item,單擊滑鼠右鍵,選擇UI->Text,建立Text

UGUI:實現ScrollRect拖動到最底新增下一頁內容

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

輸入一下內容:

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

public class ItemControl : MonoBehaviour {

private Text labText;

public void setItem(string str)

{

labText = transform.GetComponentInChildren ();

labText.text = str;

}

}

UGUI:實現ScrollRect拖動到最底新增下一頁內容

將ItemControl.cs新增到Item上,如下圖

UGUI:實現ScrollRect拖動到最底新增下一頁內容

建立指令碼ScrollRectControl.cs

輸入一下內容:

using UnityEngine;

using System.Collections;

using UnityEngine.UI;

using UnityEngine.EventSystems;

public class ScrollRectControl : MonoBehaviour, IEndDragHandler

{

public Scrollbar bar;

private ScrollRect scrollRect;

private GameObject item;

private GameObject grid;

void Start()

{

scrollRect = transform.GetComponent ();

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

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

addItem();

}

public void OnEndDrag(PointerEventData eventData)

{

if (bar.value <= 0)

{

addItem();

}

}

void addItem()

{

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

{

GameObject newItem = addChild(item, grid);

newItem.SetActive(true);

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

newItem.GetComponent ().setItem(str);

}

}

public static GameObject addChild(GameObject o, GameObject parent)

{

if (o == null parent == null)

{

return null;

}

GameObject inst = GameObject.Instantiate(o) as GameObject;

inst.transform.SetParent(parent.transform, false);

inst.transform.localPosition = Vector3.zero;

inst.transform.localScale = Vector3.one;

return inst;

}

}

UGUI:實現ScrollRect拖動到最底新增下一頁內容

將ScrollRectControl.cs新增到Panel上,並將Scrollbar拖到ScrollRectControl的Bar上,如下圖:

UGUI:實現ScrollRect拖動到最底新增下一頁內容

執行,看效果:

剛執行時,添加了5個Item項,當拖動到ScrollRect末尾時,又添加了5個Item項。是不是很簡單。

UGUI:實現ScrollRect拖動到最底新增下一頁內容

UGUI:實現ScrollRect拖動到最底新增下一頁內容

內容,
相關問題答案