Learn how to develop a horizontal grid layout in SwiftUI framework - iOS app development tutorial

🟢 LIMITED TIME OFFER - SAVE 37%
Practical iOS and macOS app development tutorials with SwiftUI in 4K
https://credo.academy

In this SwiftUI tutorial, we are going to create a new lazy horizontal grid layout for the product categories. The Lazy Horizontal Grid is similar to the horizontal stack. It's "lazy" because if we have views scrolling off the screen, SwiftUI will not load them unless it needs to show them on the screen.

CHAPTERS

00:00 SwiftUI tutorial introduction
00:26 Talking about the new lazy horizontal grid layout in SwiftUI
01:03 Product categories
02:33 Create a new constant for the product categories in Swift
03:24 Create some new constants for the app layout
04:51 Develop a new SwiftUI component for the category item
08:11 Develop a new SwiftUI component with the lazy horizontal grid UI element
10:14 Start Xcode's live preview and test the new UI component
10:31 Add Header and Footer sections for the LazyHGrid
11:25 Develop custom Header and Footer sections for the SwiftUI component
14:37 Add new sections to the horizontal grid layout UI component
15:21 Test the finished UI component in Xcode's live preview
15:47 Add the category component to the home view
15:58 Test the iOS 14 application's home view

This increases the overall app's performance. What is interesting also is we can add a header and a footer section inside a Lazy Horizontal Grid. That's said, with some creativity, we can even rotate these specific sections creating a unique look for this UI component.

Moreover, we can pin these header and footer sections as well. However, we won't use this feature in this layout. By the end of this class, we will have a two-row lazy horizontal grid layout with all product categories.

This SwiftUI tutorial is part of the best online SwiftUI Masterclass course.

#SwiftUI #Xcode #iOSDevelopment #programming