NGUI UIGrid组件：打造灵活的UI布局

Unity打怪升级

已于 2024-08-04 12:14:11 修改

阅读量654

点赞数 14

分类专栏： # UI 文章标签： ui unity NGUI 游戏引擎布局

于 2024-08-01 15:20:50 首次发布

本文链接：https://blog.csdn.net/UnityBoy/article/details/140848624

版权

UI 专栏收录该内容

69 篇文章 2 订阅

订阅专栏

引言

在Unity游戏开发中，UI的布局管理是一个常见且关键的任务。NGUI（Next-Gen UI）提供了一个强大的组件UIGrid，它可以帮助开发者以网格形式灵活地管理UI元素的布局。本文将详细介绍UIGrid的使用方法和技巧，帮助你在项目中实现复杂而美观的UI布局。

UIGrid简介

UIGrid是一个布局组件，允许开发者以网格形式排列UI元素，从而创建整洁、响应式的界面布局。它支持自动填充、排序和对齐等功能。

UIGrid的核心特性

自动布局：UIGrid能够自动排列其子对象，无需手动调整每个元素的位置。
滚动支持：支持水平和垂直滚动，方便查看超出视图范围的内容。
自定义网格：可以自定义行列数、单元格大小和间距。
动态内容：支持动态添加和删除子对象，UIGrid会自动重新排列。

组件详解

UIGrid 是一个帮助脚本，可让您轻松地将小部件排列到固定大小的网格中。它既可以在编辑时使用，也可以在运行时使用。如果需要可变大小的单元格，可以改用 UITable。
在这里插入图片描述
要使用 UIGrid，请选择一个面板，右键单击场景视图中的任意位置，然后从 [/b]Create 菜单中选择 Grid。您也可以简单地将 UIGrid 组件附加到任何空的游戏对象。

Arrangement 决定了子对象的位置。水平意味着它们将向右延伸，垂直意味着它们将向下延伸。

Max Per Line 字段控制“水平”排列中的列数和“垂直”排列中的行数。

Cell Width 和 Cell Height 确定网格内项目之间的间距。

默认情况下，Grid 将简单地重新定位其所有子项，并且顺序将是子项恰好创建的顺序。如果要更改此设置并按特定顺序对它们进行排序，可以按字母顺序命名它们（“001”、“002”、“003”等），然后选中“已排序”复选框。这样做将使网格首先按顺序对它们进行排序，然后再调整它们的位置。

最后，如果要保留不可见（禁用）子项留下的间距，请关闭“隐藏非活动”标志。默认情况下，此标志处于打开状态，不可见的子项将被忽略。

提示

Grid 对于在运行时定位事物很有用，但您也可以在编辑时执行它。只需右键单击它并选择“执行”选项。然后，如果不需要该组件，则可以安全地删除该组件。
在这里插入图片描述

使用UIGrid

创建UIGrid：在Unity编辑器中，创建一个新的UIGrid对象，通常它是UIPanel的子对象。
设置网格属性：在Inspector视图中，设置UIGrid的属性，如行列数、单元格宽度和高度、滚动条的可见性等。
添加子对象：将需要排列的UI元素（如UILabel、UIButton等）作为UIGrid的子对象添加进去。
配置滚动：如果需要滚动功能，可以添加UIScrollView组件到UIGrid，并配置滚动条的相关属性。
自定义单元格：通过脚本动态创建和配置子对象，以实现更复杂的布局需求。

通过脚本控制UIGrid

using UnityEngine;
using System.Collections.Generic;

public class UIGridExample : MonoBehaviour
{
    public UIGrid grid;
    public GameObject cellPrefab; // 单元格预制体

    void Start()
    {
        // 假设我们有一个数据列表
        List<string> items = new List<string> { "Item 1", "Item 2", "Item 3" };
        
        // 为列表中的每个项创建一个单元格
        foreach (string item in items)
        {
            GameObject cell = NGUITools.AddChild(grid.gameObject, cellPrefab);
            // 配置单元格内容
            UILabel label = cell.GetComponent<UILabel>();
            label.text = item;
        }
    }
}