Swift and iOS Workshop

TEST Have you wanted to learn how to make app? Don't know how? Don't even know where to start? Well you've come to the right place!

Swift is a top-tier programming language created by Apple, to develop responsive and efficient mobile apps, server-side applications, and even macOS.

This workshop will go through a tour of Swift and cover how to make a unit converter iOS app.

Getting Started

Swift Structures has been optimized for Swift 4.2 (e.g., Xcode 10.0) or later. The directories are organized as follows:

Source - Code for all Swift data structures, algorithms and source extensions
Example - An empty iOS single-view application template
SwiftTests - Unit tests with XCTest Framework

Swift UI

Since past Apple's keynote, where SwiftUI was announced, tons of docs, examples, videos and tutorials have appeared. The goal of this repository is to gather all this information having an unique place where looking for info about SwiftUI.

SwiftUI is an innovative, exceptionally simple way to build user interfaces across all Apple platforms with the power of Swift. Build user interfaces for any Apple device using just one set of tools and APIs. With a declarative Swift syntax that’s easy to read and natural to write, SwiftUI works seamlessly with new Xcode design tools to keep your code and design perfectly in sync. Automatic support for Dynamic Type, Dark Mode, localization, and accessibility means your first line of SwiftUI code is already the most powerful UI code you’ve ever written.

💻 Requirements

macOS 15 Beta
Xcode 11.0 Beta
iOS 13.0 Beta
iPadOS 13.0 Beta

Directory：

Basic View

Text

Text is used to display one or more lines of text content with the same effect as UILabel, but it is even better.

If you want to create Text, just create it with Text("SwiftUI"); With chained syntax, you can also add multiple attributes to the text, such as fonts, colors, shadows, spacing between top left and right, and so on.

Example:

Text("SwiftUI")
    .color(.orange)
    .bold()
    .font(.system(.largeTitle))
    .fontWeight(.medium)
    .italic()
    .shadow(color: .black, radius: 1, x: 0, y: 2)

View running results

HStack and VStack controls are used to host multiple views, as mentioned later.

🔝

TextField

TextField is used to add a normal input box, which is often used as a text input.

Example：

TextField(self.$name, placeholder: self.nameText, onEditingChanged: { changed in
    print("onEditing: \(changed)")
}) {
    print("userName: \(self.name)")
    self.endEditing(true)
}}
.padding(10)
.frame(height: 50)
.textFieldStyle(.roundedBorder)
.padding(EdgeInsets(top: 0, leading: 20, bottom: 0, trailing: 20))

View running results

🔝

SecureField

SecureField is generally used as a password input. It is used in the same way as TextField. The example and the running effect are the same as TextField.

Image

The Image control is used to display images, example:

Image("icon")
    .resizable()
    .frame(width: Length(100),
           height: Length(100),
           alignment: .center)

View running results

🔝

WebImage

webImage is used to download the web image, use the URLSession to download the original Image after successful download; you can also use Kingfisher in the downloadWebImage function .

Example：

var body: some View {
        Image(uiImage: self.uiImage ?? placeholderImage)
            .resizable()
            .onAppear(perform: downloadWebImage)
            .frame(width: Length(80),
                   height: Length(80),
                   alignment: .center)
            .tapAction {
                print("Tap ")
        }
    }

View running results

🔝

Button

Button is used to respond to click events.

Example:

Button(action: {
    print("Tap")
}) {
   Text("I'm a Button")
}

View running results

🔝

PullDownButton

Waiting for release.

ItemBasedPopUpButton

Waiting for release.

NavigationButton

NavigationButtonPage is used to push to the next navigation page.

Example:

NavigationButton(destination: NavigationButtonPage()) {
    Text("NavigationButton").bold().color(.orange).font(.largeTitle)
    }.navigationBarItem(title: Text("Page"))

View running results

🔝

PresentationButton

PresentationButton is used to pop up a page.

Example:

PresentationButton(PageRow(title: "PresentationButton", subTitle: "pop up a page"),
                   destination: Text("I'm Text")) {
                    print("Present 🦄")
                   }

View running results

🔝

EditButton

EditButton is used to trigger the editing state, just use the navigationBarItems setting when using it.

Example:

navigationBarItems(trailing: EditButton())

View running results

🔝

PasteButton

Waiting for release.

Picker

Picker can customize the selector of the data source.

Example:

Picker(selection: $leftIndex, label: Text("Picker")) {
    ForEach(0..<leftSource.count) {
        Text(self.leftSource[$0]).tag($0)
    }
    }.frame(width: UIScreen.main.bounds.width/2)

View running results

🔝

DatePicker

DatePicker is used to select the absolute date of the control.

Example:

DatePicker(
    $server.date,
    minimumDate: Calendar.current.date(byAdding: .year,
                                       value: -1,
                                       to: server.date),
    maximumDate: Calendar.current.date(byAdding: .year,
                                       value: 1,
                                       to: server.date),
    displayedComponents: .date
)

View running results

🔝

Toggle

Toggle is used to switch the selected state, for example:

Togglele(isOn: $isOn) {
    Text("State: \(self.isOn == true ? "Open":"open")")
}.padding(20)

View running results

🔝

Slider

Slider A control for selecting values from a finite range of values, example:

Slider(value: $data.rating)

View running results

🔝

Stepper

Stepper is used to increase or decrease the value, example:

Stepper(value: $value, step: 2, onEditingChanged: { c in
    print(c)
}) {
    Text("Stepper Value: \(self.value)")
    }.padding(50)

View running results

🔝

SegmentedControl

SegmentedControl is used for segmentation condition selection, example:

SegmentedControl(selection: $currentIndex) {
    ForEach(0..<items.count) { index in
        Text(self.items[index]).tag(index)
    }
    }.tapAction {
        print("currentIndex: \(self.currentIndex)")
}

View running results

🔝

WebView

WebView is used to display an open web page, example:

struct WebViewPage : UIViewRepresentable {
    func makeUIView(context: Context) -> WKWebView  {
        return WKWebView()
    }
    func updateUIView(_ uiView: WKWebView, context: Context) {
        let req = URLRequest(url: URL(string: "https://www.apple.com")!)
        uiView.load(req)
    }
}

View running results

🔝

UIViewController

UIViewController is used to display the UIViewController that opens UIKit in SwiftUI and opens the SwiftUI View in UIViewController.

Example:

First define:

struct ControllerPage<T: UIViewController> : UIViewControllerRepresentable {
    
    typealias UIViewControllerType = UIViewController
    
    func makeUIViewController(context: UIViewControllerRepresentableContext<ControllerPage>) -> UIViewController {
        return T()
    }
    
    func updateUIViewController(_ uiViewController: UIViewController, context: UIViewControllerRepresentableContext<ControllerPage>) {
        debugPrint("\(#function)：\(type(of: T.self))")
    }
    
}

Then use this:

NavigationButton(destination: ControllerPage<UIKitController>()) {
    PageRow(title: "UIViewController",subTitle: "Open UIViewController")

}

View running results

🔝

Layout

HStack

HStack is used to arrange the subviews on a horizontal line.

Example:

HStack {
    Text("made in China.")
    Divider() // Just add a line.
    Text("the People's Republic Of China.")
}

View running results

🔝

VStack

VStack is used to arrange the subviews on a vertical line.

Example:

VStack {
    Text("made in China.")
    Divider() // Just add a line.
    Text("the People's Republic Of China.")
}

View running results

🔝

ZStack

ZStack is used to override the subview, aligned on two axes.

Example:

ZStack {
    Text("made in China.")
    Divider() // Just add a line.
    Text("the People's Republic Of China.")
}

View running results

🔝

List

List list container to display a list of data.

Examples:

List(0..<5) { item in
    Text("Hello World !")
}.navigationBarTitle(Text("List"), displayMode: .large)

View running results

🔝

ScrollView

ScrollView is a scroll view container.

Example:

ScrollView {
    Text("SwiftUI").padding(20)
    Divider()
    Image("icon").resizable()
        .frame(width: 300, height: 300, alignment: .center)
    Divider()
    Text("Views and ... user interface.")
    }
    .border(style, width: 1,cornerRadius: 10)
    .padding(10)
    .navigationBarTitle(Text("ScrollView"))

View running results

🔝

ForEach

ForEach is used to present a view based on a collection of existing data.

Example:

let data = (0..<5).map { $0 }
var body: some View {
    ForEach(data) { e in
        Text("Hello \(e)")
            .bold()
            .font(.system(size: 25, design: .monospaced))
            .padding(5)
}

View running results

🔝

Group

Group is used to aggregate multiple views, and the properties set on the Group will be applied to each child view.

Example:

Group {
    Text("Hello World !")
    Text("Hello World !")
    }

View running results

🔝

GroupBox

Waiting for release.

Section

Section is used to create the header/footer view content, which is generally used in conjunction with the List component.

Example:

Section(header: Text("I'm header"), footer: Text("I'm footer")) {
    ForEach(0..<3) {
        Text("Hello \($0)")
    }
}

View running results

🔝

NavigationView

NavigationView is used to create a view container that contains the top navigation bar.

Example:

NavigationView {
    Text("🧚‍♂️🧚‍♀️🧜‍♂️🧜‍♀️🧞‍♂️🧞‍♀️").blur(radius: 5)
    Text("Swifter Swifter").bold().color(.orange).font(.largeTitle)
}.navigationBarTitle(Text("NavigationView"))

View running results

🔝

TabBar

TabBar is used to create a view container that contains the bottom TabBar.

Example:

TabbedView(selection: $index) {
    ForEach(0 ..< imgs.count) { item in
        TabItemPage(index: item)
            .tabItemLabel(Image(self.imgs[item]))
            .tag(item)
    }
}

View running results

🔝

HSplitView

Waiting for release.

VSplitView

Waiting for release.

🔝

Alert

Alert is used to display a bullet reminder that needs to be associated with a trigger event.

Example:

presentation($showsAlert, alert: {
                Alert(title: Text("Hello"))
            })

View running results

🔝

ActionSheet

ActionSheet is used to pop up a selection box.

Example:

ActionSheet(title: Text("Title"),
            message: Text("Message"),
            buttons:
    [.default(Text("Default"), onTrigger: {
        print("Default")
        self.showSheet = false
    }),.destructive(Text("destructive"), onTrigger: {
        print("destructive")
        self.showSheet = false
    }),.cancel({
        print("Cancel")
        self.showSheet = false
    })])

View running results

🔝

Modal is used to pop up a view.

Example:

Modal(Text("Modal View"),onDismiss: {
    print("View Dismiss !")
})

View running results

🔝

Popover is used to pop up a view, see the results below.

Example:

Popover(content: Text("Popover View")) {
    print("Popover Dismiss !")
}

View running results

🔝

🎓 Courses

Learn SwiftUI. by Meng To
SwiftUI Quick Start Guide with iOS 13 and Xcode 11 . by DevTechie Interactive

Questions

Have a question? Feel free to contact me on Twitter

andikaleonardo/Swift-for-Dummies

Swift and iOS Workshop

Getting Started

Swift UI

Directory：

Basic View

Layout

State and Data Flow

Gestures

Basic View

Text

TextField

SecureField

Image

WebImage

Button

PullDownButton

ItemBasedPopUpButton

NavigationButton

PresentationButton

EditButton

PasteButton

Picker

DatePicker

Toggle

Slider

Stepper

SegmentedControl

WebView

UIViewController

Layout

HStack

VStack

ZStack

List

ScrollView

ForEach

Group

GroupBox

Section

NavigationView

TabBar

HSplitView

VSplitView

Alert

ActionSheet

Modal

Popover

🎓 Courses

Questions