SwiftUI로 만드는 간단한 로그인 화면

GW 중에 SwiftUI로 무언가 앱을 만드는 개인 목표를 세우고 실제로 만들 때 얻은 지식을 공유합니다.

이번에는 최소한의 외형의 로그인 화면의 구성을 소개하고 싶습니다.

실행 환경

Xcode 11.4.1

macOS 10.15.4

iOS 13.4.1

※ 2020년 5월 단계

완제품

App 이름, 입력 양식, 로그인 버튼의 간단한 구성
앱 이름을 로고로 바꾸고 행간 채우기 등은 속성 따로 조정하십시오

라이트 모드

다크 모드

자동으로 다크 모드 대응 & 다 단말의 레이아웃에 대응해 줍니다.

코드

import SwiftUI

struct LoginView: View {
    @State var inputEmail: String = ""
    @State var inputPassword: String = ""

    var body: some View {
        NavigationView {
            VStack(alignment: .center) {
                Text("SwiftUI App")
                    .font(.system(size: 48,
                                  weight: .heavy))

                VStack(spacing: 24) {
                    TextField("Mail address", text: $inputEmail)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: 280)

                    SecureField("Password", text: $inputPassword)
                        .textFieldStyle(RoundedBorderTextFieldStyle())
                        .frame(maxWidth: 280)

                }
                .frame(height: 200)

                Button(action: {
                   print("Login処理")
                },
                label: {
                    Text("Login")
                        .fontWeight(.medium)
                        .frame(minWidth: 160)
                        .foregroundColor(.white)
                        .padding(12)
                        .background(Color.accentColor)
                        .cornerRadius(8)
                })

                Spacer()
            }
        }
    }
}

UIKit 시대를 아는 몸으로 하면 굉장히 깨끗이 하고 있어 초학자나 디자이너라도 이해하기 쉽네요.
Storyboard에서 벗어나 코드만으로 화면 구성하고 싶었지만, AutoLayout의 번잡함이나 레이아웃의 확인의 수고 등으로 할 수 없었던 스스로로부터 하면 이것은 혁명적이네요.

게다가 그리드 레이아웃 또한 선언적 신택스는 React등의 웹계 쿠마의 프런트엔드의 흐름에도 따라 있어 친화성이 높을까.

조금 당황한 것은 초기 무렵에 접한 무렵은 margin 가 있었다고 생각했지만, VStack의 spacing 로 바뀐 것 같았지만 어떨까?
버튼의 내용의 외형을 바꾸는 방법이 구구하면 여러가지 나왔습니다만, 개인적으로는 내용의 Text 뷰를 참는 것이 1번 심플할까 생각합니다.

SwiftUI의 앞으로

2019년 6월에 SwiftUI가 발표되고 곧바로 접했을 무렵보다 프로퍼티나 여러 인터페이스 등이 변경되고 있거나, 일본어의 기술 정보가 적기 때문에 조금 손질했습니다만, Obj-C가 Swift로 바뀌었습니다 그렇듯 앞으로 메인 개발은 SwiftUI로 이행해 나갈 것이라고 생각하고 있습니다.
현재, UIKit를 사용하지 않으면 실현할 수 없는 구현이 있거나, 혼입한 것을 하는 것에 적합하지 않습니다만, 그것도 앞으로 해소되어 갈 것이라고 생각합니다.
그야말로 다음 달 WWDC에서 SwiftUI는 큰 업데이트가 있다고 밟고 있습니다!