How to use LazyHGrids in SwiftUI

Think of them as horizontal scrolling CollectionViews

Kelvin Tan
Swiftly Engineered iOS

--

Photo by Paweł Czerwiński on Unsplash.

At the recent WWDC 2020, Apple introduced a LazyHGrid. A lot of developers found that SwiftUI was missing the support of CollectionView when it was first introduced. With the release of LazyHGrid, you may now mimic the same behaviour as UICollectionView in UIKit.

“A container view that arranges its child views in a grid that grows horizontally, creating items only as needed.” — Apple Developer

Prerequisites

To follow along with this tutorial, you’ll need some basic knowledge in:

  • Swift
  • At least Xcode 12+

Note: This only supports iOS 14+.

Getting Started With LazyHGrid

As you probably noticed, the Lazy prefix basically indicates that the view is only rendered when it appears on the screen, which boosts performance. You don't want to load all 1,000 data at the same time. With LazyHGrid, you only load however many data that appear on the screen.

To make things more interesting, let’s make up a storyline. Tesla is having a competition to hire an iOS engineer, and…

--

--

Kelvin Tan
Swiftly Engineered iOS

Father, husband, software engineer. Building software and building a family, one line of code and one moment at a time. 🚀💻💙 http://ko-fi.com/kelvintanzy