How to built a Control Center layout with 25 lines of Swift code

Control Center using GridLayout

Recreating a layout similar to Control Center is easy with GridLayout, a library that uses AutoLayout to organize view in a grid like layout.

The key to building this layout is seing it as a grid with 4 equal columns and 6 equal rows. Placing items on the grid is then a matter of picking the right column and row and the right column span and row span.

    func buildControlCenter() -> UIView {
        var items = [GridItem]()
        items.append(GridItem(buildPanel(), position: Position(rowSpan: 2, columnSpan: 2), margin: 8).stretched())
        items.append(GridItem(buildButton(), margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 1, margin: 12).stretched())
        items.append(GridItem(buildButton(), column: 1, margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 1, column: 1, margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 2, margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 2, column: 1, margin: 12).stretched())
        items.append(GridItem(buildButton(), position: Position(row: 3, columnSpan: 2), margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 4, margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 4, column: 1, margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 5, margin: 12).stretched())
        items.append(GridItem(buildButton(), row: 5, column: 1, margin: 12).stretched())
        items.append(GridItem(buildPanel(), position: Position(column: 2, rowSpan: 2, columnSpan: 2), margin: 8).stretched())
        items.append(GridItem(buildButton(), position: Position(row: 2, column: 2, rowSpan: 2), margin: 8).stretched())
        items.append(GridItem(buildButton(), position: Position(row: 2, column: 3, rowSpan: 2, columnSpan: 2), margin: 8).stretched())
        items.append(GridItem(buildButton(), row: 4, column: 2, margin: 8).stretched())
        items.append(GridItem(buildButton(), row: 4, column: 3, margin: 8).stretched())

        return UIView.gridLayoutView(items: items,
                                     rows: [.fill, .fill, .fill, .fill, .fill, .fill],
                                     columns: [.fill, .fill, .fill, .fill])
    }

You can find the entire sample on GitHub.

If you haven’t already, give GridLayout a try, it can save you time when building complex layouts.

I use GridLayout in several of my games. If you would like to check them out, visit my website.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.