Grid View In SwiftUI

Introduction

Grid is a layout in SwiftUI that we use to represent Views in rows and columns or in a 2D manner. Grid in SwiftUI is same as UICollectionView in UIKit. When SwiftUI was introduced by apple then there was a missing component that was available in UIKit that was UICollectionView which is used to represent items as a grid.  Apple filled this missing component a year later and introduced Grid in WWDC 2020. Grid is an important element in SwiftUI that makes it easy to represent Views in rows and columns.  One thing we need to know before using Grid is whether we are going to create a Horizontal Grid or a Vertical Grid. There are two types of Grid available in SwiftUI.

1. LazyVGrid
2. LazyHGrid

LazyVGrid in SwiftUI

We use LazyVGrid in SwiftUI to create a vertically scrollable collection of Views in a two-dimensional manner. It loads on demand Views. It fills the first row from left to right then the second row and so on. We provide GridItem corresponding to how many columns we want in our Grid.

Implementing a LazyVGrid

Open Xcode and create a Single View Application, give the name of the project, Here we have created a project now we will implement Vertical Grid.

figure 1. creating a new Xcode project

Here we have created our project, now we will go to ContentView.swift file. In this file, we will implement Vertical Grid.

import SwiftUI
struct ContentView: View {
    var symbols = ["keyboard", "hifispeaker.fill", "printer.fill", "tv.fill", "desktopcomputer", "headphones", "tv.music.note", "mic", "plus.bubble"]
    var layout = [
        GridItem(.flexible()),
        GridItem(.flexible()),
        GridItem(.flexible())
    ]
    var body: some
    View {
        NavigationView{
            ScrollView{
                LazyVGrid(columns: layout, spacing: 20) {
                    ForEach(0..<symbols.count) { index in
                        Image(systemName: symbols[index])
                            .resizable()
                            .padding()
                            .frame(width: 70, height: 70)
                            .background(Color.green)
                            .cornerRadius(15)
                    }
                }
            }
            .navigationTitle("Items in Grid")
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

Step 1

First of all, we will create the raw value or data that we want to show in our Grid. Here we are creating an array of Apple Icons that we will show in our Vertical Grid.

Step 2

In the second step, we are creating an array of GridItem. Grid item in SwiftUI is used to specify the size of each cell for a particular column. It also defines how many columns will be there in a Grid. Here we want three columns in our Vertical Grid, So we will create three elements of GridItem in the variable "layout".

Step 3

In our body we are talking here about a NavigationView, It is used to navigate from one View to another and also creates a NavigationBar where we are giving the title of our NavigationBar. In our NavigationView we taking another View as ScrolView. ScrollView is used to make our screen scrollable. If we do not use ScrollView on top of Grid our Grid will not Scroll, by default ScrollView scrolls in Vertical order but we can pass here a parameter horizontal to scroll in Horizontal order.

Step 4

After creating a ScrollView we will add LazyVGrid, which takes a parameter named column where we will pass our variable "layout". Here we are giving the second parameter "spacing" to make space between items in Grid. In LazyVGrid we are using the ForEach loop to give data in a particular cell. We will iterate and pass our data in Image.

Step 5

Now we are adding attributes to our Image to display properly. Here we have created a LazyVGrid.

Result

figure 2.  LazyVGrid result

LazyHGrid in SwiftUI

LazyHGrid is used to create a horizontally scrollable collection of Views in two dimensions. In LazyHGrid first, it fills the first column from top to bottom then the second from top to bottom, and so on. It is similar to LazyVGrid just the difference is it scrolls in horizontal order.

Implementing a LazyVGrid

Implementation of LazyHGrid is similar to LazyHGrid just we need to make ScollView horizontal.

ScrollView(.horizontal) {
    LazyHGrid(rows: layout) {
        ForEach(0.. < symbols.count) {
            index in Image(systemName: symbols[index])
                    .resizable()
                    .padding()
                    .frame(width: 70, height: 70)
                    .background(Color.green)
                    .cornerRadius(15)
        }
    }
}

Here we are making ScrollView horizontal by passing the parameter "horizontal". It will make our Grid scrollable horizontal. Now we are replacing LazyVGrid with LazyHGrid and changing the parameter "columns" to "rows".  We are done with this we have created a LazyHGrid just by making some changes in LazyVGrid.

Result

figure 3. LazyHGrid result

Conclusion

In this article, we have created LazyVGrid and LazyHGrid. We can use this SwiftUI component to make our project more effective. In any project there is a need for a Grid view, So make projects by using LazyVGrid and LazyHGrid.

Thanks for reading this article.