Book Image

Elevate SwiftUI Skills by Building Projects

By : Frahaan Hussain
Book Image

Elevate SwiftUI Skills by Building Projects

By: Frahaan Hussain

Overview of this book

Elevate SwiftUI Skills by Building Projects helps you harness the cutting-edge potential of SwiftUI and its innovative and user-friendly approach to crafting user interfaces for Apple platforms with the power of Swift. This book will enhance your UI programming skills with SwiftUI through a project-based methodology, guiding you to create four real-world projects. Starting with a quick recap of Swift and SwiftUI, you’ll gradually develop projects tailored for iPhone, iPad, macOS, and watchOS using Swift and Xcode. You’ll experience SwiftUI’s versatility in action as you build a tax calculator for iPhone and a photo gallery for the iPad, which uses a larger display to enhance the viewing experience. You’ll also create an app store for Mac and, finally, get to grips with the power of SwiftUI for smaller devices such as the Apple Watch by designing a Fitness Companion app. By the end of this book, you'll have built fully functional projects across multiple platforms and gained the expertise needed to excel as a professional SwiftUI developer.
Table of Contents (12 chapters)

Coding the app groups

We will now implement the code to display app groups. These will contain an image representing the application icon and a label that represents the application name. Feel free to add more components to each group and arrange them as you see fit. I have added an app icon to the assets. I followed the previous steps to add images. Feel free to refer to those steps:

  1. First, add the following code before the body:
    private let adaptiveColumns =[    GridItem( .adaptive( minimum: 300 ) )]

This will be used in our grid and ensures the items have a minimum size of 300. This is extremely useful as we don’t want them to become so small the user cannot see them.

  1. Add the following code beneath the banner code we added in the previous section:
    LazyVGrid( columns: adaptiveColumns, spacing: 20 ){    ForEach ( 0..<20 )    { index in        VStack( alignment...