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

스터디에서 유킷, 스유 퐁당퐁당 스터디를 하는데 저번에 스유로 로그인

화면을 했으니 이번에는 유킷으로 구현해보자!라고 해서 구현해본 화면입니당

아직은 정말 화면과 기능(?)만 구현했기 때문에.. 다음페이지로 넘어가는 그런거 업슴요..

(전체 코드는 맨 밑에 있어요!!)

 

구현 조건은 스유와 동일했어요!

이메일 텍스트 필드는 이메일 키보드가 나오도록 설정

비밀번호 텍스트 필드는 암호화 되어서 보이도록 설정

이메일, 비밀번호 텍스트 필드에 값이 있고, 토글이 활성화 되어야 버튼도 활성화 되도록 설정

 

이번에는 스토리보드 베이스로 구현해 놓았습니다! 

레이아웃은 대충 요로케 저번 스유와 비슷한 모양으로 잡았어요.

 

저번 스유때랑은 다르게 추가한 로직이 있었는데..

1. 일단 아이디와 비밀번호가 10글자 미만이면 잘못된 입력이라고 표시가 되면서 로그인 불가
2. 잘못된 입력이거나 토글버튼이 활성화 되어있지 않으면 로그인 불가
3. 키보드 관련 기능 추가
   * 화면에 들어왔을 때 키보드가 첫응답이 되도록 만들기
   * 키보드에서 enter키 누르면 로그인에서 비밀번호 텍스트 필드로 넘어가게 구현하기
4. 입력하고 있는 텍스트 필드에 테두리 활성화 되도록 하기

스유할 때 못해본것을 최대한 해볼려고 넣어보았습니다..

 

---

 

먼저 1번, 2번부터 해결해봅시다!!

로그인 조건을 검증할 때 사용하는 변수들을 Bool 타입으로 만들어줬어요.

 

그리고 함수로 검증 조건을 구현

뒤에 || 요고는 입력전에는 아무것도 뜨면 안 되니까 맨 처음에 넣어준거였는데

굳이 저렇게 안 하더라도 .. 맨처음에는 안 뜨더라구여? 그래서 일단은 주석 처리

 

---

 

그리고 토글 위에서 만든 토글의 상태를 알려주는 Bool 타입의 변수는 

토글을 IBAction으로 빼서.. 상태값을 변경하도록 했어요! 

 

그래서 이렇게 설정한 Bool 타입의 결과들은 버튼이 눌릴 때 검사해서

로그인에 성공했는지 실패했는지를 알려줄 수 있도록 만들었어요.

그래서 label에 어떻게 표시 되나면, 위에서 본 사진처럼 실패, 성공 이렇게 나와요.

 

 

 

저기서 사용되는 enum들은.. 따로 파일을 빼서 정의해놓았습니당

// 에러 문구 열거형으로 설정하기
enum Text {
    static var idError: String {
        return "아이디를 확인해주세요"
    }
    static var idSuccess: String {
        return "성공했습니다!"
    }
    static var pwdError: String {
        return "비밀번호를 확인해주세요"
    }
}

// 열거형으로 색상 설정해주기
enum Colors {
    static let error: UIColor = .red
    static let success: UIColor = .blue
}

 

 

그리고 10글자 미만이면 텍스트필드 바로 밑에 상태를 표시하고 싶다고 했잖아여?

요고는 어떻게 했냐면.. TextField의 shouldChangeCharactersIn를 사용해서 구현했어요.

shouldChangeCharactersIn는 텍스트 필드 글자 내용이 (한글자 한글자) 입력되거나

지워질 떄 호출이 되면서 입력할지말지 허락도 구하는 메서드입니다!!

 

머라머라 설명이 많은데.. 간략하게 말하면 그냥 뒤에가 잘려서 들어와서

replacing을 사용해서 잘린 마지막 인덱스의 글자를 가져왔다~.. 이런 의미입니다.

(더 좋은 해결법 아시는 분 구해요...)

어쨌든 그래서.. switch를 사용해서 각 필드에 입력되는 값이

10미만인지 아닌지를 판별해서 그에 맞는 레이블이 표시되도록 만들어줬어요!

여기까지가 1,2번 내용!!

 

---

이제 3,4번을 해볼게요.

텍스트 필드의 여러 메서드 중에서

textFieldDidBeginEditing : 텍스트 필드의 입력을 시작할 때 호출됨 (시작할지 말지의 여부를 확인하는 것)

textFieldDidEndEditing : 텍스트 필드의 입력이 실제 끝났을 때 호출 (시점)

textFieldShouldReturn : 텍스트 필드의 엔터키가 눌러지면 다음 동작을 허락할것인지 말것인지

 

요 3개의 텍스트 필드 메서드를 사용했어요.

먼저 테두리의 활성 여부는 textFieldDidEndEditing, textFieldDidBeginEditing를 활용해서

입력이 시작이 호출될 때 테두리를 넣어주고 끝났을 때 다시 0으로 바꾸어주는 형식으로 구현했습니다.

 

 

그리고 키보드에서 enter키를 누르면 아이디에서 비밀번호 텍스트 필드로,

비밀번호 텍스트 필드에서 키보드 내리는 것으로 구현하기 위해서는 shouldReturn을 사용했어요.

 

첫응답이 키보드로 올라오게 하는 것도 추가했습니다.

idInputField.becomeFirstResponder() 요고를 사용해서

첫번째 응답을 아이디 텍스트필드로 설정해서 구동하면, 아이디가 첫 응답자가 되도록 만들었습니다.

 

추가로 keyboard 타입으로 키보드에 @가 나오도록 설정했고..

.isSecureTextEntry = true로 설정해서 비밀번호 입력을 암호화로 표시되도록 만들었어요.

다른 부분을 눌렀을 때 내려가는 것은 touchesBegan을 사용하여 뷰를 없애는 걸 넣어줬어요!

 

그리고..덧붙여서 그 x 눌러서 지우는 부분은

 

 

 

어쨌든! 이렇게 해서 구현은 다 했습니다. 

요고 스유보다 더 촘촘히 짜여있어서 스유도 이렇게까지 만드는게 이번 스터디 과제에요.

이번 포스팅이 너무 ~했고~했어요 인것 같은데.. 일단 쓰고 봅니다..

그래서 실행은 어떻게 되냐면... 

 

더 좋은 방법이 있거나 개선이 필요해보이는 부분은 알려주시면 빠르게 고쳐보겠습니다..!!

그럼 이만 오포끝!!

 

 

++) 전체코드

import UIKit

class ViewController: UIViewController {
    
    // MARK: - IBOutlet 연결
    @IBOutlet weak var idInputField: UITextField!
    @IBOutlet weak var idLabel: UILabel!
    @IBOutlet weak var pwdLabel: UILabel!
    @IBOutlet weak var pwInputField: UITextField!
    @IBOutlet weak var resultLabel: UILabel!
    @IBOutlet weak var Button: UIButton!
    
    // toggle
    @IBOutlet weak var agreeToggle: UISwitch!
    
    

    // MARK: - isValid 설정
    private var toggleValid: Bool = false // 토글 검증
    private var isValidId: Bool = false // 아이디 검증
    private var isValidPwd: Bool = false // 비밀번호 검증
    
    private var isValid: Bool {
        return isValidId && isValidPwd
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setUp()
    }
    
    func setUp() {
        // 델리게이트 설정
        idInputField.delegate = self
        pwInputField.delegate = self
        
        // 구동 시, ID 텍스트 필드를 첫번째 응답자로 설정하기
        idInputField.becomeFirstResponder()
        
        idInputField.placeholder = "Enter your ID"
        pwInputField.placeholder = "Enter your Password"
        idInputField.layer.cornerRadius = 10
        pwInputField.layer.cornerRadius = 10
        
        idInputField.keyboardType = .emailAddress
        pwInputField.isSecureTextEntry = true // 비밀번호 ** 표시
        
        resultLabel.text = ""
        idLabel.text = ""
        pwdLabel.text = ""
        
        // 버튼 스타일 설정
        Button.layer.cornerRadius = 20
        Button.backgroundColor = .blue
        Button.tintColor = .white
    }

     // MARK: - toggle 함수 연결부분
    @IBAction func switchValue(_ sender: UISwitch) {
        if sender.isOn {
            toggleValid = true
        } else {
            toggleValid = false
        }
    }
    
    // 검증 함수 설정
    private func validationId(id: String) -> Bool {
        return id.count >= 10 // || id.count == 0
    }
    
    private func validationPwd(pwd: String) -> Bool{
        return pwd.count >= 10 // || pwd.count == 0
    }
    
    // 화면의 다른 부분을 눌렀을 때키보드 내려가게 만들기
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        self.view.endEditing(true) // view 자체를 완전히 끝내버리겠다.
        idInputField.resignFirstResponder() // 텍스트 필드 하나면 끝내겠다. (무응답으로 만들어버리기)
    }
    
    // 로그인 버튼 눌릴 때
    @IBAction func pressButton(_ sender: Any) {
        if isValid && toggleValid { // 아이디, 비밀번호의 검증과 토글의 값이 true일 때 로그인 성공
            resultLabel.text = Text.idSuccess
            resultLabel.textColor = Colors.success
            
        } else {
            resultLabel.text = "로그인에 실패했습니다"
            resultLabel.textColor = Colors.error
        }
    }
}

// MARK: - Delegate
extension ViewController: UITextFieldDelegate {
    
    //clear할때 태우는거
    func textFieldShouldClear(_ textField: UITextField) -> Bool {
        print(#function)
        resultLabel.text = ""
        
        switch textField {
        case idInputField: // 아이디를 입력하는 텍스트 필드인 경우
            isValidId = false
            idLabel.text = ""
            
        case pwInputField:
            isValidPwd = false
            pwdLabel.text = ""
            
        default: break
        }
        
        return true
    }
    
    // 여기는 아이디 비밀번호 밑의 라벨에 대한 검증을 하는 부분임
    // 입력수를 제한하는 방법 ->  텍스트 필드 글자 내용이 (한글자 한글자) 입력되거나 지워질 떄 호출이 되면서 입력할지말지 허락도 구함
    func textField(_ textField: UITextField, shouldChangeCharactersIn range: NSRange, replacementString string: String) -> Bool {
        // range: 입력된 값의 index 번호값, string 마지막으로 입력된 값 (abcdef 입력시 range: 5, string: f)
        
        // textfield.text -> optional 이면서, 현재입력한 필드보다 하나 앞자리가 값으로 들어옴..
        // let test = textField.text // 그냥 이렇게 가져오면 abcdef 입력해도 가져와지는 값은 abcde
        // replacingCharcters를 사용하기 위해서 타입이 NSString이어야 하기 때문에 텍필의 값을 NSString으로 받아옴
        
        let currentText = NSString(string: textField.text ?? "")
        let finalText = currentText.replacingCharacters(in: range, with: string)
        // 그냥 가져오면 마지막 글자 잘림 -> 그래서 일단은 먼저 가져와서, replacingCharacter를 통해서 마지막 인덱스에 마지막 글자를 넣어줌(추가해서) 최종적으로 입력되는 값을 받아옴

        resultLabel.text = ""
        
        switch textField {
        case idInputField:
            isValidId = validationId(id: finalText)// finalText를 검증함수(10초과면 true 리턴) 진행해서 결과값을 담고
            isValidId ? (idLabel.text = "") : (idLabel.text = Text.idError) // 결과값이 true이면 id라벨을 공백, 아니라면 Text에 에러문구 넣어주고
            idLabel.textColor = Colors.error // 에러 문구 색상 설정해주기
            
        case pwInputField:
            isValidPwd = validationPwd(pwd: finalText)
            isValidPwd ? (pwdLabel.text = "") : (pwdLabel.text = Text.pwdError)
            pwdLabel.textColor = Colors.error
            
        default: break
        }
        
        return true
    }
    
    // 테두리 변경되도록 만들기
    func textFieldDidBeginEditing(_ textField: UITextField) {
        textField.becomeFirstResponder()
        textField.layer.borderWidth = 1
        textField.layer.borderColor = #colorLiteral(red: 0, green: 0, blue: 0, alpha: 1)
    }
    
    // 테두리 입력 완료시 없어지게 만들기
    func textFieldDidEndEditing(_ textField: UITextField) {
        textField.layer.borderWidth = 0
    }
    
    // enter 처리
    func textFieldShouldReturn(_ textField: UITextField) -> Bool {
        if idInputField.text != "", pwInputField.text != "" {
            pwInputField.resignFirstResponder()
            return true
        } else if idInputField.text != "" {
            pwInputField.becomeFirstResponder()
            return true
        }
        return false
    }
}