NGUI的ScrollView以及Grid的使用

最近幾天用到了NGUI的ScrollView以及Grid來實現上滑下滑的功能，

編輯時結構圖如下:

界面如下:

遊戲運行時的時結構圖如下:

界面如下:

在ScrollView下面放置一個子物體Grid是因爲Grid有自動排序功能，使每一個技能item能夠整齊排列。

ScrollView默認是水平滑動的，記得在inspector面板選擇垂直滑動。

要使得ScrollBar能夠控制ScrollView,記得指定ScrollView的ScrollBar面板：

Grid的屬性記得要設置一下：

cell width和cell height設置成和scrollview每一個item的大小相似，如果希望

item間有間隔，可以將height設置高點。然後Arrangement表示你所需要的排列方式，

一般和ScrollView的movement保持一致即可。

然後是代碼：

foreach (int id in idList)//idList裏面放置每個物品信息的id號
        {
            GameObject itemGo = NGUITools.AddChild(grid.gameObject, skillItemPrefab);//這句話相當於你手動拖拽<skillItemPrefab到Grid物體下面,可以看上面編輯和運行時的結構圖

            grid.AddChild(itemGo.transform);//這句話很重要，是實現Grid控件管理子物體transform功能的語句
            itemGo.GetComponent<SkillItem>().SetId(id);//實例化子物體
        }

下面來看註釋

  grid.AddChild(itemGo.transform);

這句話的效果：

與上圖的遊戲效果有明顯差別

下面提供NGUI免費詳細視頻教程，感謝siki老師作出的貢獻：點擊打開鏈接

如果在ScrollView中不使用，滑動條，而是直接按住內容上下滑動，

層級結構如下：

我們不用再ScrollView以及Grid上面

做手腳，設置了Grid的一些排列屬性後

直接在要滑動的子元素(圖中藍色字顯示)

中添加UI Drag Scroll View腳本，然後ScrollView指定圖的ScrollView即可。