Skip to content

UXCollectionView

UXCollectionView is the icon grid: items of a fixed size flow left to right and wrap into rows to fill the width, the layout the Finder desktop and icon browsers use. The grid arithmetic (how many columns fit, each item’s rectangle, the total content height a scroll view asks for) and the hit test are pure geometry, unit-tested without a window. Multi-selection rides UXIndexSet, the same machinery the table uses.

#use <UXKit>
UXCollectionView* grid = new UXCollectionView();
for (i32 i = (i32)0; i < docs.count(); i = i + (i32)1) {
grid.addItem(docs.get(i), docs.nameAt(i));
}
grid.setAction(&controller.onPick);
scroll.document().addSubview(grid, UXGeom.make(0, 0, 400, 0));
scroll.setDocumentHeight(grid.contentHeightFor(400));

A plain click selects one item; a shift-click toggles it into the selection; a click in the gaps deselects everything. The action fires on selection; the handler reads it back:

void onPick(UXControl* sender) {
UXCollectionView* g = (UXCollectionView* ?)sender;
open(g.itemAt(g.firstSelected()).obj);
}
  • Inherits UXControl: the weak: callback action, enablement, the fire path.

Items · addItem · clear · count · itemAt Grid · setItemSize · setSpacing · setInset · columnsFor · layout · contentHeightFor · itemAtPoint Selection · selectItem · addToSelection · toggleSelection · deselectAll · isSelected · selectionCount · firstSelected

void addItem(Object* obj, u8* label)

Appends an item: your object (returned untouched at selection time) and the label drawn under its tile.

void clear(void)

Empties the grid and the selection.

i32 count(void)

How many items the grid holds.

UXCollectionItem* itemAt(i32 i)

The item: your obj, the label, and the laid-out frame (see UXCollectionItem).

void setItemSize(i16 w, i16 h)

The fixed tile size (64×64 by default).

void setSpacing(i16 h, i16 v)

The gaps between tiles, horizontally and vertically.

void setInset(i16 v)

The margin around the whole grid.

i32 columnsFor(i16 width)

How many columns fit in width, never fewer than one.

void layout(i16 width)

Places every item into its row and column and computes the content height. Pure geometry; the tests call it with no window.

i32 contentHeightFor(i16 width)

The total height the laid-out grid needs at width, the value you pass to a UXScrollView’s setDocumentHeight.

i32 itemAtPoint(i16 px, i16 py)

The item under a local point, -1 in the gaps. A click between tiles deselects, as in an icon view.

void selectItem(i32 i)

Selects this item and no other (the plain-click behaviour).

void addToSelection(i32 i)

Adds without clearing: the programmatic half of multi-selection.

void toggleSelection(i32 i)

Flips the item in or out (the shift-click behaviour).

void deselectAll(void)

Clears the selection.

bool isSelected(i32 i)

Whether the item is in the selection.

i32 selectionCount(void)

How many items are selected.

i32 firstSelected(void)

The lowest selected index, -1 when nothing is.

UXCollectionView on Web

App-drawn through the shared drawRect seam: the same rendering on every backend, captured here from this platform’s own paint path.

An icon browser over a scroll view:

UXScrollView* sv = new UXScrollView();
content.addSubview(sv, UXGeom.make(8, 8, 400, 260));
UXCollectionView* grid = new UXCollectionView();
grid.setItemSize(72, 72);
grid.setSpacing(20, 20);
for (i32 i = (i32)0; i < images.count(); i = i + (i32)1) {
grid.addItem(images.get(i), images.nameAt(i));
}
grid.setAction(&controller.onPick);
i32 h = grid.contentHeightFor(400);
sv.document().addSubview(grid, UXGeom.make(0, 0, 400, (i16)h));
sv.setDocumentHeight(h);