Skip to content

GridView

Virtualized scrollable grid with uniform or variable cell sizing. Recycles items via object pooling for large datasets.

Inspector Setup

  1. Create a container with AutoLayout and AutoLayoutScrollView.
  2. Add the GridView component.
  3. Register prefabs in the Prefabs list.
  4. Set item count and configure columns via code.
FieldTypeDefaultDescription
Scroll DirectionGridViewScrollDirectionVerticalScroll axis
Size ModeGridViewSizeModeUniformUniform or NonUniform cell sizes
Column Countint0Columns (0 = auto-calculate from width)
Column Gapfloat0Horizontal gap between cells
Row Gapfloat0Vertical gap between rows
VirtualizedbooltrueEnable object pooling
Default Pool Capacityint20Initial pool size per prefab type
Overscan Countint1Extra rows rendered offscreen
PrefabsList-Prefab registrations (typeId + prefab + capacity)

Code Usage

AutoUI Builder

AutoUI.Create()
.WidthFill().HeightFill()
.Padding(16)
.GridView()
.Columns(3)
.Gap(10)
.Virtualized(true)
.Prefab(cellPrefab, 30)
.ItemCount(items.Count)
.GetItem(i => items[i])
.BindItem((go, index, data) =>
{
var view = go.GetComponent<MyCellView>();
view.Bind((MyItem)data);
})
.UnbindItem((go, index) =>
{
var view = go.GetComponent<MyCellView>();
view.Unbind();
})
.Capture(gv => m_GridView = gv)
.End()
.Build();

Using IGridViewDelegate

public class MyScreen : MonoBehaviour, IGridViewDelegate
{
private GridView m_GridView;
void Start()
{
AutoUI.Create()
.Fill()
.GridView()
.Columns(4)
.Gap(8)
.Prefab(cellPrefab, 20)
.Delegate(this)
.Capture(gv => m_GridView = gv)
.End()
.Build();
}
public int GetNumberOfItems(GridView gridView) => m_Data.Count;
public int GetItemType(GridView gridView, int index) => 0;
public void BindItem(GridView gridView, GameObject cell, int index)
{
cell.GetComponent<MyCellView>().Bind(m_Data[index]);
}
public void UnbindItem(GridView gridView, GameObject cell, int index)
{
cell.GetComponent<MyCellView>().Unbind();
}
}

Runtime Updates

m_GridView.ItemCount = newData.Count;
m_GridView.RefreshItems();
m_GridView.ScrollToItem(50, ScrollAlignment.Center, animated: true);
m_GridView.RefreshItem(5); // Refresh single item
m_GridView.Clear(); // Remove all items

Methods

MethodDescription
RegisterPrefab(int typeId, GameObject prefab, int initialCapacity = 0)Register a prefab type
RefreshItems()Deferred refresh after data change
RefreshItemsImmediate()Synchronous refresh
RefreshItem(int index)Refresh a single item
ScrollToItem(int index, ScrollAlignment alignment, bool animated)Scroll to show item
Clear()Remove all items

Properties

PropertyTypeDescription
ItemCountintTotal item count
VisibleCountintCurrently rendered items
ResolvedColumnCountintCalculated column count
RowCountintTotal row count
CellSizeVector2Resolved cell dimensions
ScrollDirectionGridViewScrollDirectionScroll axis
SizeModeGridViewSizeModeUniform or NonUniform
ColumnCountintColumn count (0 = auto)
VirtualizedboolPool mode toggle

Events / Callbacks

CallbackSignatureDescription
GetItemCallbackFunc<int, object>Return data for index
GetItemTypeCallbackFunc<int, int>Return prefab type for index
BindItemCallbackAction<GameObject, int, object>Bind data to cell
UnbindItemCallbackAction<GameObject, int>Cleanup on recycle

Interfaces

  • IGridViewItem — Implement on prefab root for auto-binding.
  • IGridViewDelegate — Full data source control (overrides callbacks).

Builder API

MethodDescription
.Columns(int)Set column count (0 = auto)
.ColumnGap(float)Set horizontal gap
.RowGap(float)Set vertical gap
.Gap(float)Set both gaps
.SizeMode(GridViewSizeMode)Uniform or NonUniform
.Virtualized(bool)Enable/disable pooling
.PoolCapacity(int)Set default pool size
.Overscan(int)Set overscan rows
.Prefab(GameObject, int)Register type-0 prefab
.Prefab(int, GameObject, int)Register typed prefab
.Delegate(IGridViewDelegate)Set delegate
.ItemCount(int)Set total items
.GetItem(Func<int, object>)Set data callback
.GetItemType(Func<int, int>)Set type callback
.BindItem(Action<GameObject, int, object>)Set bind callback
.UnbindItem(Action<GameObject, int>)Set unbind callback
.Capture(Action<GridView>)Capture component reference (e.g. .Capture(gv => m_Grid = gv))
.End()Return to parent LayoutBuilder

Keyboard Navigation

GridView implements IMoveHandler for 2D arrow key / gamepad navigation. Click the grid to select it, then use arrow keys to move focus.

DirectionVertical GridHorizontal Grid
UpPrevious row (-columnCount)Previous item (-1)
DownNext row (+columnCount)Next item (+1)
LeftPrevious item (-1)Previous row (-columnCount)
RightNext item (+1)Next row (+columnCount)

Navigation stops at boundaries (does not wrap).

// Listen for focus changes
m_GridView.OnFocusedIndexChanged += index =>
{
Debug.Log($"Focused: {index}");
};
// Set focus programmatically
m_GridView.FocusedIndex = 0;
Property / EventTypeDescription
FocusedIndexintCurrently focused item (-1 = none)
OnFocusedIndexChangedAction<int>Fired when focused index changes

Notes

  • ColumnCount = 0 auto-calculates columns based on available width and cell prefab width.
  • Virtualized = false instantiates all items upfront (no pooling). Good for small, fixed datasets.
  • Overscan renders extra rows above/below the viewport to prevent flicker during fast scrolling.