乐趣区

Unity中的GridLayoutGroup结构

jiezi

由于作者是做 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 都删掉。然后运行游戏。

好啦，这样一个动态生成的表格就完成了！

退出移动版