Introduction

What is SwiftUI?

SwiftUI helps you build great-looking apps across all Apple platforms with the power of Swift — and as little code as possible. With SwiftUI, you can bring even better experiences to all users, on any Apple device, using just one set of tools and APIs. SwiftUI

Environment and Software

  • MacOS(64bit)
  • Xcode13
  • Optional: iPadOS

Recommend Tutorial

Online

The 100 Days of SwiftUI

ZHHEO_Swift

DesignCode

Youtube

Learn SwiftUI online for FREE | Bootcamp #0

Building your first iOS app - SwiftUI Livestream

Build your first iOS app with SwiftUI

Build a Recipe App from scratch with SwiftUI - Part 1

Reality School


Declarative syntax

SwiftUI uses a declarative syntax, so you can simply state what your user interface should do. For example, you can write that you want a list of items consisting of text fields, then describe alignment, font, and color for each field. Your code is simpler and easier to read than ever before, saving you time and maintenance.

1
2
3
4
5
6
7
8
9
10
11
12
13
import SwiftUI

struct SwiftUIView: View {
  var body: some View {
    Text(/@START_MENU_TOKEN@/"Hello, World!"/@END_MENU_TOKEN@/)
  }
}

struct SwiftUIView_Previews: PreviewProvider {
  static var previews: some View {
    SwiftUIView()
  }
}

SwiftUI

PART1

TabView

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
struct ContentView : View {

    var body: some View {
        
        ZStack {
        TabView {
            
            FirstView()
                .tabItem {
                    Image(systemName: "gamecontroller.fill")
                        
                    Text("Game")
                        .font(.largeTitle)
                    
                }
                .navigationViewStyle(.stack)
            
            SecondView()
                .tabItem {
                    Image(systemName: "allergens")
                    
                    Text("Sculpture")
                        .font(.largeTitle)
                }
                .navigationViewStyle(.stack)
        
            
            ThirdView()
                .tabItem {
                    Image(systemName: "heart.text.square")
                    
                    Text("Protection Mode")
                        .font(.largeTitle)
        }
        .accentColor(.blue)
        .navigationViewStyle(.stack)
            
            FourthView()
                .tabItem {
                    Image(systemName: "person.circle")
                        
                    Text("About")
                        .font(.largeTitle)
                    
                }
                .navigationViewStyle(.stack)
            
}
        }
}
}
  • You also need to prepare FirstView() to FourthView()

Now look at one of the views:

Sets the tab bar item associated with this view.

1
2
3
4
5
6
TabView {
    ContentView()
        .tabItem {
            Label("Menu", systemImage: "list.dash")
        }

1
2
3
4
5
ThirdView()
   .tabItem {
        Image(systemName: "heart.text.square")
        Text("Protection Mode")
                   .font(.largeTitle)
  • Label is better

tabItem(_:)

Part1 Reference

Adding TabView and tabItem()

PART 2

NavgationView

Simple NavigationView

1
2
3
4
5
6
7
struct ContentView: View {
    var body: some View {
        NavigationView {
            Text("SwiftUI tutorials")
        }
    }
}

You also need to add a Title.

1
.navigationTitle("TEXT")

Buttons with navigation view

Add leading and trailing buttons to the navigation bar using navigationBarItems() modifier. Leading button is an SF Symbol(you can download there)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
NavigationView {
    Text("SwiftUI tutorials")
    .navigationBarTitle("Master view")
    .navigationBarItems(leading:
            Button(action: {
                print("SF Symbol button pressed...")
            }) {
                Image(systemName: "calendar.circle").imageScale(.large)
            },
        trailing:
            Button(action: {
                print("Edit button pressed...")
            }) {
                Text("Edit")
            }
    )
}

Stack

A navigation view style represented by a view stack that only shows a single top view at a time.

If you are doing some iPad Version Development, you may see some differences between iPad and iPhone View. The title seems to have some problems.

Use this to solve.

1
.navigationViewStyle(.stack)

NavigationLink

A view that controls a navigation presentation.

Declaration

1
struct NavigationLink<Label, Destination> where Label : View, Destination : View {

Overview

Users click or tap a navigation link to present a view inside a NavigationView. You control the visual appearance of the link by providing view content in the link’s trailing closure. For example, you can use a Label to display a link:

1
NavigationLink(destination: FolderList(id: workFolder.id)) { Label("Work Folder", systemImage: "folder")}

For a link composed only of text, you can use one of the convenience initializers that takes a string and creates a Text view for you:

1
NavigationLink("Work Folder", destination: FolderList(id: workFolder.id))

Here is a example from Apple developer

1
2
3
4
5
6
7
8
9
10
NavigationView {
    List {
        NavigationLink("Purple", destination: ColorDetail(color: .purple))
        NavigationLink("Pink", destination: ColorDetail(color: .pink))
        NavigationLink("Orange", destination: ColorDetail(color: .orange))
    }
    .navigationTitle("Colors")

    Text("Select a Color") // A placeholder to show before selection.
}

Anyway, there are two parts of the Navigationlink.

One is the input and one is the output.

NavigationLink

Part2 Reference

SwiftUI NavigationView tutorial with examples

PART 3

VStack、HStack、ZStack

HStack: aligns items in a horizontal fashion.

VStack: aligns items in a vertical fashion.

ZStack :stacks items in a layered fashion.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// Stack views vertically and take full height
VStack {
  Spacer()
}

// Stack views horizontally and take full width
HStack {
  Spacer()
}

// Gap between views
VStack(spacing: 20) {}

// Stack views on top of each other in a Z (depth) unit
ZStack { 
    VStack {}
    HStack {}
}

// Take maximum width without Spacer()
.frame(minWidth: 0, maxWidth: .infinity)

// Align elements to the top left
ZStack(alignment: .topLeading) {}

(Source: Design+Code)

Get Started