SWIFTUI HANDBOOK

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

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.

Inspector

You can use the inspector to edit your styling such as text content, font, weight, color, etc. Everytime that you edit, the changes will also be reflected in the code. Just like in the design tool, the blue lines indicate the bounds of the element

Text(“SwiftUI for iOS 14”)
.font(.title2)
.fontWeight(.bold)
VStack(spacing: 8.0) {
Circle()
.frame(width: 44.0, height: 44.0)
Text(“SwiftUI for iOS 14”)
.font(.title)
.fontweight(.bold)
Text(“20 videos”)
}

Insert Menu

The Insert Menu (Cmd Shift L) is great for bringing new elements. You can find a long list of all the controls available in iOS such as button, color picker, date picket, etc. You can drag and drop an item from the Insert Menu to the Preview or the code.

Modifiers

The Inspector doesn't have all the styling options. For more modifiers, you can go to the Modifiers search field and find properties like background and cornerRadius.

VStack(alignment: .center, spacing: 8.0) {}
.padding(.all)
.background(Color.blue)
.cornerRadius(20.0)

Final 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.

VStack

The VStack allows you to stack views vertically, from top to bottom. You can further customize the view by adding alignment or spacing to the VStack.

HStack

The HStack is used to stack views horizontally. Just like the VStack, you can set the alignment and space items.

Spacer

By default, stacks in SwiftUI will take the minimum space and align to the center. The Spacer is essential for pushing the content to use the maximum space. It can be useful for aligning elements as well.

ZStack

ZStack is great for overlapping content. It stacks layers on top of each other, in a 3 dimentional plane. Since elements can float on top of each other, the alignment for ZStack will move all items at one.

Resources

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.

Custom Image Asset

SF Symbols

You can also use icons from the SF Symbols library using the Image view. Without having to import anything, you have access to 2,400+ icons in different size, stroke width and colors.

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.

Circle

The Circle allows you to draw a perfect circular shape. The circular shape will have a diameter that's equal to the smaller number between width and height.

Ellipse

The Ellipse is like a circle, but without the perfect aspect ratio 1:1. When the width and height are different, it'll fill the space and distort itself.

Rectangle

While most elements in SwiftUI such as stacks, colors, gradients start as rectangles, they're not shapes. The Rectangle has a shape property, allowing it to have a stroke or serve as a mask.

RoundedRectangle

The RoundedRectangle comes with useful cornerRadius and style properties. It's great for creating buttons and generating the smooth corners of iOS.

Capsule

Similar to the RoundedRectangle, the Capsule is pill-shaped. Each end of of the capsule is made of a half-circle. You can use them for buttons.

Final Layout

In the final layout, you can see that shapes are fantastic for clipping the content of a stack. On top of that, you can use them to set a border, use the maximum space and create really nice buttons.

Group 6 CopyCreated with Sketch.

More Information?

Fill out your details and we will get back to you as soon as possible.