【Unity】自制ListView動態增長與刪除

http://www.xuanyusong.com/archives/973

在NGUI中能夠很方便的實現ListView的控件，ListView就比如IOS或Android平臺中使用手勢上下拖動的控件。在Unity3D中實現ListView的原理無非就兩種，第一種是攝像機不動只移動控件，第二種是控件不動只移動攝像機。在官方的Demo中已經有這兩種的例子，爲了活靈活現的使用listView，MOMO仍是決定詳細的寫一篇文章幫助初學者快速上手listView。

和以前的文章開始同樣，咱們先建立一個2D的遊戲平面。接着給Panel面板綁定遊戲組件，Unity導航菜單欄中選擇Component->NGUI->Interaction->Grid，它主要設定ListView中每個item的屬性。繼續在Unity導航菜單欄中選擇Component->NGUI->Interaction->UIDraggablePanel，它主要設定listView的觸摸區域以及與拖動條事件等。

以下圖所示，我詳細說說Panel面板中一些須要注意的屬性。

UIGrid(Script)：Arrangement 選擇Vertical表示這個ListView表示縱向，這裏若是選擇Horizontal表示該ListView是橫向的。 

Cell Width：ListView中每個item的寬度。

Cell Height：listView中每個item的高度。

UIDraggable Panel(Script)：選項中的Scale很是重要，這裏設置y = 1  表示ListView只支持縱向的拖動，若是設置X=1表示列表只支持橫向的拖動，若是兩個都=1表示列表同時支持橫向與縱向的拖動。

Horizontal Scroll Bar 與 Vertical Scroll Bar表示橫向或縱向的拖動條與listView結合，然而這裏咱們無需寫一行代碼，它會自動幫咱們計算，將你的ListView與拖動條結合。

 

 

         再說說最上面的UIPanel(Script) ，咱們選擇Clipping的類型爲SoftClip，這裏可設置listView總體的顯示區域。以下圖所示，總體的顯示區域就是紫色框中的區域。橙色框是ListView總體的顯示內容，它會依次的排列下去，可是永遠只會顯示紫色框中的內容。

 

 

OK。接着咱們看看目前工程的結構。在Hierarchy視圖中Anchor下面同級的目錄中有Button、Panel、Scroll Bar。Button就是上圖中添加列表的按鈕，Panel中是經過點擊添加列表按鈕後自動添加的列表預設。Scroll Bar表示上圖中左側的縱向拖動條。在右側監測面板視圖中，BoxCollider組件必須添加，該組件中Center與Size可設置ListView中的Item的觸摸響應區域，這個區域應當與Item的顯示區域至關。

還有一個重要的組件就是UIDrag Panel Contents(Script)，若是沒有它ListView就沒法拖動。在Unity導航菜單欄中選擇Component->NGUI->Interaction->UIDrag Panel Contents便可。切記 >_<

將預設資源放在Resources文件夾中是爲了使用Resource來讀取。

 

 

下面咱們看看動態添加列表的腳本，把腳本綁定在Button上。噢對，這裏還有個小插曲，本文中的中文字體須要感謝kuku小妖製做的：字體的下載地址以下：http://game.ceeger.com/forum/read.php?tid=729

 

Test.cs （爲何又是Test.cs 嚯嚯 上癮了 改不了了 哇咔咔！！）

 

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39

using UnityEngine; using System.Collections; using System.Collections.Generic;   public class Test : MonoBehaviour {   public UIGrid grid; int count = 0; void Start() { //獲得grid對象 grid = GameObject.Find("Panel").GetComponent<UIGrid>(); }   void OnClick ()     {       //克隆預設 GameObject o  =(GameObject) Instantiate(Resources.Load("item")); //爲每一個預設設置一個獨一無二的名稱 o.name = "item" + count; //將新預設放在Panel對象下面 o.transform.parent = GameObject.Find("Panel").transform;   ////下面這段代碼是由於建立預設時 會自動修改旋轉縮放的係數， //我不知道爲何會自動修改，因此MOMO從新爲它賦值 //有知道的朋友麻煩告訴我一下 謝謝！！！   GameObject item = GameObject.Find(o.name); item.transform.localPosition = new Vector3(0,0,0); item.transform.localScale= new Vector3(1,1,1);   count ++;   //列表添加後用於刷新listView grid.repositionNow = true;     }   }

 

 咱們在建立一個Button用於動態的刪除列表。咱們編寫腳本Delete.cs綁定上該按鈕，原理和添加差很少你們看看哈～～

Delete.cs

 

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30

using UnityEngine; using System.Collections;   public class Delete : MonoBehaviour {   public UIGrid grid;   void Start() { //獲得grid對象 grid = GameObject.Find("Panel").GetComponent<UIGrid>();   }   void OnClick() { //經過標籤名稱找到多有對象，前提是給預設起一個tag，這裏我叫它player GameObject []items =  GameObject.FindGameObjectsWithTag("Player"); //當預設數量大於 0時 if(items.Length >0) { //刪除列表的item Destroy(items[0]); //刷新UI grid.repositionNow = true; }   }   }

 

接着咱們學習點擊某項Item後修改顯示的內容，將以下腳本掛在item當中。

item.cs 

 

C#

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

using UnityEngine; using System.Collections;   public class item : MonoBehaviour {   void OnClick() { //獲得item自對象的精靈組建。 //由於獲得的組建採起深度優先 //因此咱們須要修改數組中元素爲1的精靈 //數組中元素爲0的精靈是按鈕的背景 UISprite ui = GetComponentsInChildren<UISprite>()[1]; //修改頭像爲女生頭像 ui.spriteName = "icon1";   //獲得文字對象 UILabel label = GetComponentInChildren<UILabel>(); //修改文字內容 label.text = "若若"; } }

 

以下圖所示，這裏本文的全部知識點，NGUI是否是很給力呢？哇咔咔！啦啦啦！

 

 

本節教學下載地址：http://vdisk.weibo.com/s/abXug

 祝你們學習愉快，一塊兒學習一塊兒進步哇咔咔～～

• 本文固定連接: http://www.xuanyusong.com/archives/973

• 轉載請註明: 雨鬆MOMO

  2012年05月23日

  於 雨鬆MOMO程序研究院 發表