SwiftUI Handbook! Design a iOS Apps with SwiftUI – JLVTech

Location

Total Floor Area

Design

Program

A comprehensive series of tutorials covering Xcode, SwiftUI and all the layout and development techniques.

SwiftUI is hands-down the best way for designers to take a first step into code. Thanks to its live Preview, you can iterate quickly and create powerful user interfaces with a few lines of code that works for all of Apple’s platforms. Take your static design to the next level and build real apps with the simplicity of a prototyping tool.

We’re using Sketch to design the interface and Shape for the illustrations. All design and source files are provided so that you can upgrade your UI skills while following the lessons.

1. Visual Editor in Xcode

Design your layout using the inspector, insert menu and modifiers

In this tutorial, we’ll take a quick look at how to create a simple layout by only using the visual editing tools and without touching the code.

2. Stacks and Spacer

Learn how to use HStack, VStack, ZStack with spacing and alignment

Stacks in SwiftUI are similar to the stack views in UIKit. By combining views in horizontal and vertical stacks, you can build complex user interfaces for your application. There are 3 types of stacks: HStack, VStack and ZStack.

3. Import Images to Assets Catalog

How to import images from Figma to Xcode using PDF, PNG and JPG

In this video, I want to discuss how to import images from Figma in different formats, such as PNG, PDF and JPEG.

JPG

There are four types of images that are common in iOS. JPG is great for photos that is in full size and require no transparency. For best optimizations, it is recommended to generate 1x, 2x and 3x.

PNG

If you needed transparency in your image, use the PNG. It can move on top of any background. Depending on the amount of colors that you have in your image, you may have a very large file size. Just like the JPG, you’ll need to export at 1x, 2x and 3x from the design tool.

PDF

The PDF is great for glyphs and vectors that are infinitely scalable. They remain sharp regardless of the resolution. This the preferred way since you only need a single image asset at 1x. iOS will take the scalable vector and generate the appropriate resolutions for you.

4. Shapes and Stroke

How to use shapes like circle, ellipse, capsule, rectangle and rounded rectangle

With SwiftUI, you get access to five built-in shapes which are circle, ellipse, rectangle, rounded rectangle and capsule.

Shapes vs Stacks

Unlike stacks, shapes take the maximum space. To color them, you use fill and foregroundColor instead of background. They’re great for clipping content and setting a border style.

5. SF Symbols

How to use system icons for Apple platforms with different size, scale and multicolor

Apple provides a set of over 2,400 configurable symbols that you can use in your app. They work seamlessly with San Francisco, the system font for macOS, iOS, iPadOS, watchOS, and tvOS.

SF Symbols

SF Symbols are highly adaptable and can be configured to a number of weights and sizes. Using them is as simple as copying and then, pasting these to your project. To use these, make sure that you’ve the SF Symbols app installed on your device.

6. Color Literal and Image Literal

Use the color picker and images list to set your colors and images directly in the code

Xcode has the ability to embed colors and images directly in code. This is done with the help of Color Literals and Image Literals.

Color Literal

A color literal allows you to select colors using a color picker directly from your code. You can either select a color or type in the HEX code. You can also set the opacity.

Image Literal

Similar to color literals, image literals opens up a GUI from where you can select all the images in your Assets Catalog.

7. Sidebar

Learn how to create a Sidebar navigation for iOS, iPadOS and macOS

The sidebar allows you to utilize the larger screen of the iPad and macOS. It’s also a common navigation interface seen on websites. It consists of a menu that is situated on the left side of the screen. Just like the Tab Bar, it navigates the main content.

Sidebar

The Sidebar is a List that is embeded inside a Navigation View. You can customize the title and the layout will automatically adapt to the iPhone and iPad in portrait and landscape modes.

8. Toolbar

Use the Toolbar modifier to place multiple items in the navigation bar or bottom bar

Using the Toolbar in SwiftUI, you have more control over the placement of your navigation buttons such as the navigation bar or bottom bar. Additionally, these action items will adapt accordingly to iOS, iPadOS, watchOS, macOS and tvOS.

Navigation View Toolbar

The toolbar modifier can only be placed inside a NavigationView. By default, it will act the same way as NavigationBarItems, but you get more options like placement and group.

9. Image View

How to work with the Image View and its resizable, aspectRatio, scaleToFit and resizingMode options

Image View gives us access to many features such as rendering mode, resizable and aspect ratio.

Image View

First, you need to import images to the Assets Catalog. Using the Image we pass the name of the image.

10. Safe Area Layout

How to ignore the Safe Area edges in a typical layout with a background

SwiftUI automatically makes your content fit within the bounds of the safe area. For background elements and some layout cases, you can ignore those edges by using ignoreSafeArea.

What is the Safe Area?

To understand how Safe Area works in iOS, I suggest reading about Adaptivity and Layout in the Apple Human Interface Guidelines. It is the content space that does not overlap with the status bar, notch and home indicator spaces.