[Xcode 12.3] Introduction to Apple Platform App Development-Object Edition- [Swift UI]

What is SwiftUI

SwiftUI is a UI framework that builds the application UI of the Apple platform with Declarative Syntax with the development language Swift.

Like SwiftUI, Flutter is a well-known framework for building application UIs for Apple products, and the differences are summarized in the table below.

When developing apps for the Apple platform, we will focus on the official Apple framework SwiftUI.

SwiftUI

text

Text

text

Text("<String>")

Link

Link

Link(destination: <URL>) { Text("<label>") }

Text Field & Secure Field

↑ No input (placeholder text is displayed)

↑ Text field. State during input

↑ Secure text field. State during input

Text fields and secure text fields

@State private var value: String = ""

//Linking is possible by setting the values ​​of TextField and SecureField to the same property.
TextField("<Placeholder text>", text: $value)
SecureField("<Placeholder text>", text: $value)

Text editor

Text editor

@State private var value: String = ""

TextEditor(text: $value)  //Text editors do not implement placeholder text by default

button

System Button

button

Button(action: <Execution method>) { <label> }

Editor button

↑ Editor is inactive

↑ The editor is active

Editor button

EditButton()

Switch (Toggle Button)

switch

@State private var flg: Bool = True

Toggle(isOn: $flg) {
    <label>
}

Sign In With Apple Button

Sign-in button

import Authentication Services  //Packages required to implement ASAuthorizationAppleIDButton

struct SignInWithAppleButton: UIViewRepresentable {
    func makeUIView(context: Context) -> ASAuthorizationAppleIDButton {
    //ASAuthorizationAppleIDButton is Apple's standard button component,
    //It is not provided as a standard component of SwiftUI, so it must be implemented as a View component of SwiftUI.
        let button = ASAuthorizationAppleIDButton()
        return button
    }

    func updateUIView(_: ASAuthorizationAppleIDButton, context _: Context) [}
}

SignInWithAppleButton()

If you want to implement authentication function, [here] See (https://inon29.hateblo.jp/entry/2020/03/07/171915).

Picker

Picker

Picker-

Picker(selection: .<Selected value property name>, label: Text(<label>)) {
    Text(<label>).tag(<Selection value>)
}

Color Picker

Color picker

ColorPicker("<label>", selection: .constant(.<Default color>))

Date Picker

Date picker

DatePicker(selection: .constant(Date()), label: { Text("<label>") })

list

List

list

List { <content> }

Label

label

Label("<label>", systemImage: "<symbol>")

Section

section

Section(header: Text(<label>)) {
    <content>
}

Disclosure Group

↑ Closed state

↑ Open state

Outline (Outline Group)

↑ No List Ver.

↑ With List Ver.

outline(Since the implementation was difficult, I wrote the source code)

struct CityData: Identifiable {  //The data used in the Outline Group must conform to the Identifiable protocol
    //Structure"CityData"Property is id, name,3 sites
    let id = UUID()  //UUID(Unique ID)… 128-bit hexadecimal number
    let name: String
    var sites: [CityData]?  //Type method result()Will be assigned later by

    static func result() -> [CityData] {  //Type method(Static method)Definition adds static keyword
        let city1 = [CityData(name: "Site A"), CityData(name: "Site B")]
        let city2 = [CityData(name: "Site C"), CityData(name: "Site D")]

        return [CityData(name: "city1", sites: city1),
                CityData(name: "city1", sites: city1)]
    }  //Depending on the type method, the values ​​of sites will be as follows
       // [name: city1, sites: Optional([name: site A, sites: nil], [name: Site B, sites: nil]) 
       //  name: city2, sites: Optional([name: site C, sites: nil], [name: Site D, sites: nil])]
}

struct ContentView: View {
    var body: some View {
        List {
            ForEach(CityData.result()) { city in  // CityData.sites name: city1,Execute the following processing for each of city2
                OutlineGroup(city, children: \.sites) { site in  // CityData.sites.sites name: site A,Execute the following processing for each of site B
                    Text(site.name)
                }
            }
        }
    }
}

Identifiable protocol

public protocol Identifiable {
    associatedtype ID: Hashable  //Type parameters(=Placeholder)"ID"Is"Hashable"Conforms to protocol
    var id: Self.ID { get }  //Property"id"Is read-only and the instance's own type parameter"ID"Fits
}

Hashable protocol

public protocol Hashable{
    func hash(into hasher: inout Hasher)
    var hashValue: Int { get }  

Group Box

Group box

GroupBox(label: <label>) { <content> }

group

DisclosureGroup("<label>") { <content> }

Form

Form

Form { <content> }

View

Navigation View, Navigation Link

↑ Before screen transition

↑ After screen transition

Navigation link

NavigationView {  //NavigationLink is described within the scope of NavigationView
    NavigationLink(destination: <View protocol compliant instance>) { <label> }
}

Progress View

Progress view

ProgressView(value: <0~Progress value of 1>)

Scroll View

Scroll view

ScrollView(.<direction>) {
    VStack {   //In the case of vertical direction, put together with VStack
        <content>
    }
    .frame(maxWidth: .infinity)  //Maximize coverage
}

Slider & Stepper

↑ Slider

↑ Stepper

Slider and stepper

@State private var value: Double = 0

//Linking is possible by setting the values ​​of Slider and Stepper to the same property.
Slider(value: $value, in: 0...100)
Stepper(value: $value, in: 0...100) {
    <label>
}

Tab View

Tab bar

@State private var selection = 0 //Properties that hold selection tabs

TabView(selection: $selection) {
    Text("<content>").tabItem { Text(<label>) }.tag(0)
    Text("<content>").tabItem { Text(<label>) }.tag(1)
}