[SwiftUI] TextField, Button, Toggle을 사용하여 SwiftUI로 간단한 로그인 화면 업그레이드 구현

저번에 썼던 글을 좀 더 업그레이드 해서 가져와봤어요!

최대한 UIKit과 비슷하게 만들어볼려구 했습니다.

https://sy-catbutler.tistory.com/18

[SwiftUI] TextField, Button, Toggle을 사용하여 SwiftUI로 간단한 로그인 화면 구현해보기

 

 

추가한 항목은

 

- Alert창 추가

- next 누르면 다음 TextField로 이동

- TextField 외에 뷰의 다른 부분 터치 시 자동을 키보드 내리기

- 앱 실행시 아이디 텍스트 필드가 첫번째 응답

 

먼저 Alert 창은 경우를 만들었습니다.

데이터로 세팅해 놓은 아이디와 비밀번호와 일치하지 않을때와 토글이 비활성화 일때로 나누었어요.

 

데이터는 이렇게 미리 만들어 놓은 데이터를 사용했구요. (수정이 필요합니다.. :__: )

Toggle("Agree to ierms and conditions", isOn: $isToggle)

Spacer()

Button {
    showAlert = true
} label: {
    if loginCheck(id: id, pwd: password) && isToggle == true {
        NavigationLink {
            LoginSecondView()
        } label: {
            SignInButton()
        }
    } else if loginCheck(id: id, pwd: password) && isToggle == false {
        SignInButton()
            .alert(isPresented: $showAlert) {
                Alert(title: Text("동의 약관을 확인해주세요"), message: Text("이용 약관 확인하기"), dismissButton: .default(Text("확인"))) }
    } else {
        SignInButton()
            .alert(isPresented: $showAlert) {
                Alert(title: Text("로그인 실패"), message: Text("아이디/비밀번호를 확인 해주세요"), dismissButton: .default(Text("확인"))) }
    }
}

 

이렇게 조건을 걸어줘서 했습니다... 근데.. 

성공하면 다음 페이지로 넘어가긴 하는데.. 지금보니 showAlert가 그때도 true네요

이거는 .. 조금 더 손 보는걸로..

블로그 작성하면서 이상한거 찾기..~~!!

 

 

그리고 2,4번을 같이 말해보자면..

@FocusState var firstResponder: Bool // 키보드 첫번째로 포커스 맞추려고 생성한 변수
@FocusState private var focusField: FocusText? // 엔터키 조절 변수

이렇게 상태를 포커스하는 변수를 하나씩 만들구여

 

아이디 텍스트 필드를 첫번째 응답자로 하기 위해서 코드의 순서가 이상하지만..

(.onAppear는 제일 바깥쪽에 붙여야 하는거 아시져.. 보기 편하라고 이렇게 가져온거에요)

응답을 하도록하고 onAppear에서 true로 값 설정을 해주었어요.

TextField("E-mail", text: $id)
	.focused($firstResponder)
    
    
.onAppear {
    firstResponder = true
}

 

그리고 Next로 다음으로 탭하기 위해서는..

포커스 하는 종류를 열거형으로 만든 다음에.

// 키보드 enter 누르면 id -> password로 이동하게 만들기
private enum FocusText {
    case id
    case passward
}

위에서 조절 만든 조절 변수를 사용해서..

각 텍스트 필드마다 값을 조정해줍니다.

// ID 텍스트 필드
HStack {
    Image(systemName: "person").frame(width: 20)
        .font(.system(size: 25))
        .foregroundColor(.gray)
    TextField("E-mail", text: $id)
        .focused($firstResponder)
        .focused($focusField, equals: .id)
        .onSubmit { focusField = .passward } 
        .onTapGesture { isEditing = true } // 다른 뷰 눌렀을 때 키보드 내려가도록

}

// Password 텍스트 필드
HStack {
    Image(systemName: "key").frame(width: 20)
        .font(.system(size: 25))
        .foregroundColor(.gray)
    SecureField("Password", text: $password)
        .focused($focusField, equals: .passward)
        .submitLabel(.continue)
        .onTapGesture { isEditing = true } // 다른 뷰 눌렀을 때 키보드 내려가도록
        .onSubmit {
            focusField = nil
        }
}

여기서 지금 foucused로 아이디의 텍스트 필드인지 확인하고..

거기서 next 버튼을 눌렀다면 포커스를 비밀번호로 넘겨주는 거에요.

 

그리고 비밀번호에서도 다음을 누르면

nil을 반환해서 키보드가 아예 믿으로 내려가도록 설정했습니다.

 

그리고 여기서 다른 뷰를 눌렀을 때 키보드가 내려가도록 .. 하는 설정도 볼 수 있는데 (이게 3번)

아직까지 스유에는 없어서 UIKit에 있는 함수를 가져다와서 써야했어요.

 

그래서 이런 함수를 따로 정의해준뒤

// 키보드 밑으로 내리기
private func dismissKeyboard() {
    UIApplication.shared.sendAction(#selector(UIResponder.resignFirstResponder), to: nil, from: nil, for: nil)
}

각 텍스트 필드에 onTapGesture로 키보드가 내려갈 수 있도록 설정해주었어요.

 

근데 여기서 이렇게 OntapGesture랑.. 포커스 사용하니까

텍스트 필드에 기존에 있던 Remove 버튼이 사용이 안 되는거에요?

그래서.. overlay로 위에 쌓아주는 것으로 바꿔놓았어요.

혹시 왜인지 아시는 분과.. 해결방법을 아시는 분.. 말씀.. 부탁드립니다!!!

 

어쩌다 보니 후다닥 설명이 끝나버렸는데..

예.. 쓰다가 오류를 발견했기 때문에 다시 손을 봐야겠네요.

고치자마자 글은 수정해보겠습니다..

그럼 오포끝!!