SwiftUI - How to use LazyVGrid and LazyHGrid in iOS 14?

Many of us who have already started using SwiftUI in our day to day life were missing the collection view, and Apple did a great job here. Now we have an optimized way of creating Grids in iOS with SwiftUI.

Note: For this tutorial, you will need Xcode 12, at the time of writing this article, Xcode 12 is available as a beta version for download on this link.

Click Here to download the starter project.

The project you have downloaded is a SwiftUI app.

What do I mean by a SwiftUI app? There’s no AppDelegate, no storyboard, and no ViewController. It’s all SwiftUI.

Finally, we can create a SwiftUI app, and there’s no UIKit required unless you want to use UIViewRepresentable.

Let’s dive into the topic of this tutorial.

Let’s Start

In the starter project, you’ll find a Emoji.swift file, which we will use in this project to retrieve a list of Smileys. 😃

Let’s look into our ContentView.swift file, as usual, there’s a text saying “Hello World”

Let’s make it LazyVGrid, but before that, we need to set up our data.

Above body let’s add the code shown below. NO, Comments are not mandatory.

// Our list of Emoji
let emojiList: [String] = Emoji.emoji

// Columns for Grid
let columns : [GridItem] = [
    GridItem(.adaptive(minimum: 60))
]

Here, we are retrieving our list of Emoji from the `Emoji` struct, and then defining the column, we need to use in our Grid view.

What are columns? Don’t worry. I’ll discuss this in detail later in this article.

Next, Let’s add a NavigationView in our View with title Smileys.

NavigationView {
    
    Text("Hello World")
        
        .navigationTitle("Smileys")
}

Now, Replace the code wrapped in NavigationView with the code shown below.

NavigationView {
    
    // Scroll View for the grid to scroll
    ScrollView() {
        
        // Creating Grid with the columns defined earlier, and some spacing.
        LazyVGrid(columns: columns, spacing: 60) {
            
            // Iterating emojis
            ForEach(emojiList, id: \.self) { emoji in
                
                Text(emoji)
                    .font(.largeTitle)
            }
        }
    }
        
        .navigationTitle("Smileys")
}

Unlike UICollectionView, we need to add ScrollView before nesting the LazyVGrid, to avail the scrolling functionality. In LazyScrollView here, we are passing columns and spacing as the argument.

Next with the help of ForEach we are populating our emojis on the grid.

Let’s run the application and see the final output.

Perfect!

Now let’s see how we can use the horizontal grid, which is LazyHGrid.

We need to make minor changes to our code.

First change the LazyVGrid to LazyHGrid. Next, change the parameter name columns to rows, next change ScrollView() to ScrollView(.horizontal).

Or

Copy the code 😉

// Scrolling direction changed
ScrollView(.horizontal) {
    
    // Grid type changed, and parameter name too
    LazyHGrid(rows: columns, spacing: 60) {
        
        // Iterating emojis
        ForEach(emojiList, id: \.self) { emoji in
            
            Text(emoji)
                .font(.largeTitle)
        }
    }
    .padding(.all, 30) // Padding added, "Enhancement".
}

I have added some padding too, to make it look more elegant.

Run the application.

There’s one last thing left to explain.

Columns and Rows

Columns and Rows take GridItem objects to position their items in the grid.

The initializer for GridItem looks like this

public init(_ size: GridItem.Size = .flexible(), spacing: CGFloat? = nil, alignment: Alignment? = nil)

There are three main ways to configure the GridItem.

GridItem(.fixed(60))
GridItem(.flexible(minimum: 30, maximum: 60))
GridItem(.adaptive(minimum: 60))

I would recommend you to try these separately, and if you find it difficult, let me know on Twitter. I am just one click away. 😁

I hope you guys enjoyed reading my article. There’s a lot more to learn together, so subscribe to stay updated about my upcoming articles.

If you have any suggestions or questions, Feel free to connect me on Twitter or Reddit. 😉

To Read, SwiftUI - How to create a Grid View in iOS 13?, Click Here.