SECRET OF CSS

SwiftUI Grid Layout or Is It Just a Bunch of HStacks? | by Łukasz Stachnik | Sep, 2022


After three years, we finally have a native Grid implementation in SwiftUI!

0*T6jwWQORiOnAiaR6 300w
Photo by Kelly Sikkema on Unsplash

This article is part of ongoing series of articles on SwiftUI4 new features coming in iOS 16 and Mac OS 13. If you are willing to see previous articles, here is the link to the first one: SwiftUI NavigationStack — How to Deep Link and What’s New. And the rest you can find directly on my profile page. Now, let’s get back to reading.

A long time ago (or not so long after all) in Apple API’s far, far away, implementation of the grid in SwiftUI could be a little bit painful, saying at least. Mainly looking from the code standpoint.

But with iOS 16, we are getting a new GridLayout, alongside a custom layouts implementation protocol under the glorious name Layout. The second one will get a separate article shortly, but today, let’s focus on the main character of this article: Grid.

For today’s article, I will use previous parts of this series, such as the Showdown repository I made:

First, let’s discuss what we are going to use and how:

A simple view

This represents a character which could be an emoji or a text; it doesn’t matter. With colorful background. And the view in which the character is embedded can scale for the full width of the container.

It looks something like this:

1*2p VANKlFIHX9i906a7hXA
Character View

The new GridLayout

We’ll use it to create a complex layout, and it will contain the following:

  • The first row will have two character views
  • The second row with one character view and a collection of four characters’ views
  • The third row spans all the width of the screen with only one character view

The end effect will look like this:

1*Zn98SEG Js6oYC8EMy9B2w
Grid of Character Views

Implementation

The implementation process for the new GridLayout is pretty simple. You specify it with the word Grid and the rows with GridRow. After that, we pass every view we want into the presented grid. Here’s the code:

And the view will look like this:

1*Eel ZMWNKjNuqI9Kw42nw

It’s nearly what we want, but the last cell is not spanning the two rows. Why is that? Well, it is that because the layout is setting it up to the number of elements in each row, and if the previous or next two rows will have more elements than in the last, the number of elements per row will grow.

Now what to do with it? We simply add this line to the last row:

.gridCellColumns(2)
1*27 zuV0HdjQHl0TJVK4Ezg
Grid Layout with the last GridRow in the code

And the UI is looking as we want it to. You can also delete the GridRow for the last element, and it will span all the cells. The code for it would look like this:

And the outcome is the same:

Grid Layout without the last GridRow in the code

As you can see in the code above, if you are going to pass more rows into one of the Grid rows, the UI will span accordingly, which makes it super easy to use in a very SwiftUI way.



News Credit

%d bloggers like this: