SwiftUIで作るシンプルなログイン画面

7143 ワード
iOS Swift iPhone Xcode SwiftUI iPhone テキストリンク

GW中にSwiftUIで何かアプリを作るという個人目標を立てて、実際に作成した際に得られた知見を共有します。

今回は最低限の見た目のログイン画面の構成を紹介したいと思います。

実行環境

  • Xcode 11.4.1
  • macOS 10.15.4
  • iOS 13.4.1

※ 2020年5月段階

完成品

App名、 入力フォーム、ログインボタンのシンプルな構成
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などのWeb界隈のフロントエンドの流れにも沿っていて親和性が高いかと。

ちょっと戸惑ったのは初期のころに触ったころはmarginがあったと思ったのだが、VStackのspacingに置き換わった気がしたけどどうだろう？
ボタンの中身の見た目を変える方法がググると色々出てきましたが、個人的には中身のTextビューを弄るのが1番シンプルかと思います。

SwiftUIのこれから

2019年の6月にSwiftUIが発表されてすぐに触った頃よりプロパティや諸々のインターフェイスなどが変更されていたり、日本語の技術情報が少ないので少々手こずりましたが、Obj-CがSwiftに置き換わったようにこれからメインの開発はSwiftUIに移行していくと思っております。
現状、UIKitを使わないと実現できない実装があったり、込み入ったことをするのに向いていませんが、それもこれから解消されていくと思います。
それこそ来月のWWDCでSwiftUIは大きいアップデートがあると踏んでいます！