SwiftUIでパスワード入力UIを実装する

はじめに

今回はよくあるパスワード入力用UIを実装していきます

実装コード

細かい点などはコメントで記載してあります

struct PasswordInputFieldView: View {
    let titleKey: String
    @Binding var text: String
    var hasError: Bool

    @State var isShowSecure = false
    @FocusState var isTextFieldFocused: Bool
    @FocusState var isSecureFieldFocused: Bool

    private var isFocused: Bool {
        isTextFieldFocused || isSecureFieldFocused
    }

    var body: some View {
        HStack {
            // ZStackで同一箇所に表示してopacityで切り替える
            ZStack {
                TextField(titleKey, text: $text)
                .focused($isTextFieldFocused)
                 .keyboardType(.asciiCapable)
                 .autocorrectionDisabled(true)
                 .textInputAutocapitalization(.none)
                 .opacity(isShowSecure ? 1 : 0)

                SecureField(titleKey, text: $text)
                 .focused($isSecureFieldFocused)
                 .opacity(isShowSecure ? 0 : 1)
            }
            .frame(height: 40)
            // 表示切り替え用ボタン
            Button {
                if isShowSecure {
                    isShowSecure = false
                    isSecureFieldFocused = true
                } else {
                    isShowSecure = true
                    isTextFieldFocused = true
                }
            } label: {
                Image(isShowSecure ? .openEyeIcon : .closeEyeIcon)
                    .frame(width: 24, height: 24)
                    .disabled(true)
            }
            .buttonStyle(.plain)
        }
        .padding(.horizontal, 6)
        .frame(height: 40)
        .background(hasError ? Color.red : Color.white)
        .overlay(
            // 入力欄用の枠組
            RoundedRectangle(cornerRadius: 8)
                .stroke(
                    hasError ? Color.red :
                        isFocused ? Color.blue : Color.black,
                    lineWidth: 1
                )
        )
        .tint(hasError ? Color.red : Color.blue)
    }
}

最後に

実装する機会の多いUIなので自分でもパッとコピペできるように備忘録としての役割が強いですが、どなたかのお役に立てれば幸いです