iOS Study : 5주차 - SwiftUI

암호화 된 입력값을 보여주는 방법

SecureField를 사용한다.

import SwiftUI

struct ContentView: View {
    @State var myPassword: String = ""
    @State var isSecureMode: Bool = true
    var body: some View {
        VStack {
            Text(myPassword)
            HStack {
                if isSecureMode {
                    SecureField("Password", text: $myPassword )
                        .textFieldStyle(.roundedBorder)
                }
                else {
                    TextField("Password", text: $myPassword)
                        .textFieldStyle(.roundedBorder)
                }
                Button {
                    isSecureMode.toggle()
                } label: {
                    Image(systemName: "eye")
                }
            }

        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

진행도를 나타내는 방법

ProgressView를 사용

import SwiftUI

struct ContentView: View {
    
    @State var progress: Double = 0
    var body: some View {
        VStack {
            ProgressView("Loading...", value: progress, total: 100)
            Button {
                progress += 5
            } label: {
                Text("Go")
            }
        }
        .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

Text와 Image를 한 번에 보여주는 방법

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            HStack {
                Text(Image(systemName: "bolt"))
                Text("Gang")
            }
            
            Label("Gang", systemImage: "bolt")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

상세 페이지로 이동하게 하는 방법

NavigationView를 사용

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationView {
            NavigationLink(destination: Text("My View1")) {
                ZStack {
                    Color.green
                    Text("Gang")
                }
            }.navigationTitle("Hello")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

iOS 16에서 사라지는 NavigationView를 보완할 방법

NavigationStack을 사용한다.

import SwiftUI

struct ContentView: View {
    var body: some View {
        NavigationStack {
            NavigationLink(value: 3) {
                Text("Gang")
            }.navigationDestination(for: Int.self) { value in
                Text("Gang tried \(value) times")
            }
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

화면이 나올 때, 사라질 때 해야할 일이 있을 때 추가하는 방법

onAppear, onDisappear를 사용한다.

import SwiftUI

struct ContentView: View {
    
    @State var name: String = "NoName"
    @State var isPresented: Bool = false
    
    var body: some View {
        
        NavigationView {
            NavigationLink("Test") {
                Text("Sample")
                    .onAppear {
                        print("On Appear2")
                    }
                    .onDisappear {
                        print("On Disappear2")
                    }
            }
        }
        .onAppear {
            print("On Appear1")
        }
        .onDisappear {
            print("On Disappear1")
        }
        
        
//        VStack {
//            Text(name)
//                .onAppear {
//                    print("On Appear")
//                }
//                .onDisappear {
//                    print("On Disappear")
//                }
//                .sheet(isPresented: $isPresented) {
//                    Text("Modal")
//                }
//
//            Button {
//                isPresented.toggle()
//            } label: {
//                Text("Change")
//                    .onAppear {
//                        print("On Appear2")
//                    }
//                    .onDisappear {
//                        print("On Disappear2")
//                    }
//            }
//
//        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

이번 강의해서 배운 것들을 정리해 봅시다.

import SwiftUI

struct ContentView: View {
    
    @State var userId: String = ""
    @State var userPasswd: String = ""
    @State var hasLoggedIn: Bool = false
    @State var hasShownPasswd: Bool = false
    
    var body: some View {
        VStack {
            HStack {
                Label {
                    Text("ID")
                } icon: {
                    Image(systemName: "person.fill")
                }

                TextField("enter ID", text: $userId)
            }
            Divider()
            HStack {
                Label {
                    Text("PW")
                } icon: {
                    Image(systemName: "lock.fill")
                }
                if hasShownPasswd == true {
                    SecureField("enter Passwd", text: $userPasswd)
                }
                else {
                    TextField("enter Passwd", text: $userPasswd)
                }
                Spacer()
                Toggle(isOn: $hasShownPasswd) {
                }
                
            }
            
            Button {
                if userId == "Gang" && userPasswd == "1234" {
                    hasLoggedIn = true
                }
                else {
                    hasLoggedIn = false
                }
            } label: {
                Text("Sign in")
                    .padding()
                    .background(.green)
            }

        }
        .padding()
        .sheet(isPresented: $hasLoggedIn) {
            Text("Hello Gang")
        }
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}