Unity中的GridLayoutGroup結構

因爲做者是作iOS的，因此喜歡用iOS中的控件作類比。
GridLayoutGroup相似於相似於iOS中的UICollectionView，是一種對於大量item（cell）的排版控件。在這個講解裏，我要作一個非全屏、無滾動條而且只能夠豎排拖動的Grid。

一個完整的GridLayoutCroup控件由四個部分組成：
1.背景
2.cell顯示區域
3.cell承載區域
4.cell及其子控件

爲了方便觀看，咱們首先給項目加一個總的背景顏色：

爲了讓整個案例具備普適性，咱們並不打算作一個全屏的Grid，因此用藍色來突出總的背景。

接下來開始Grid的構建。首先咱們建立Grid的背景（注意區別於上面藍色的背景），它是一個ScrollView控件，由於咱們但願在格子不能被一次顯示的時候能夠上下拖動它。爲了顯眼，Grid的背景咱們用粉色來表示。

注意ScrollView的子控件，其中Viewport就是cell顯示區域，若是沒有這個那你多餘的cell將會顯示到背景外面去，因此必定要加。而Scrollbar Horizontal和Scrollbar Vertical就是邊上那兩個滾動條，若是不須要就能夠刪掉，這裏我選擇刪掉，刪掉後是這個樣子：

在這裏就會看到Viewpoint沒有鋪滿整個背景，這是由於它留了原來兩個滾動條的距離，因此我在這裏還要把它拉成背景的大小。而後咱們打開Viewport，他的子控件Content就是cell的承載區域。cell的排版就在這裏設置。

咱們點擊Content下Inspector最下面的Add Component按鈕，添加GridLayoutGroup控件。

其內容無非就是各類尺寸、間距和排列方式。我這裏就都採用默認了。
不過還要注意這個Content做爲cell承載區域，因爲cell的數量不固定，因此它的大小也是不固定的。因此咱們要給它加一個Content Size Fitter。

接下來咱們就要開始作一個cell了。如今咱們作個簡單的包含一個Text的Cell。因此我在Content下建立一個Text並複製15個，那麼咱們當時就能夠看到Cell排列的效果

不過表格一般都是隨數據動態生成的，咱們這種暴力的複製應付少許靜態數據能夠，顯然不能應付大量動態數據。因此就要作出一個標準Cell。咱們把第一個Text設爲標準Cell，先對他隨便進行一些改動。

而後用鼠標把它拖到你的Assets文件夾裏，它就會自動轉換成一個預製件（Prefab）。

咱們把預製件命名爲TextCell並雙擊，進入預製件的編輯模式。給他添加一個腳本取名爲TextCell。TextCell的代碼以下：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TextCell : MonoBehaviour
{
    public void InitCell(int index)
    {
        GetComponent<Text>().text = "index:" + index.ToString();
    }
}

代碼做用很是簡單，就是讓text顯示按鈕index。接下來咱們建立一個控制Cell的管理器，首先在Scene下建一個Empty Object。命名爲UIController。（我的習慣，也能夠直接掛載在好比Scroll View等地方）而後建立一個同名腳本，腳本代碼爲：

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class UIController : MonoBehaviour
{

    [SerializeField] Transform Content;
    [SerializeField] GameObject prefeb;

    void Start()
    {
        for (int i = 0; i < 20; i++)//製做20個Cell
        {
            GameObject cell = Instantiate(prefeb);//實例化預製體
            cell.GetComponent<TextCell>().InitCell(i);//實現按鈕數據的初始化方法
            cell.transform.parent = Content;//指定預製體父控件（把Cell放到）表格裏
        }
    }
}

而後返回Unity編輯器，將控件拖進腳本里。

再將Content裏的Cell都刪掉。而後運行遊戲。

好啦，這樣一個動態生成的表格就完成了！