[swift] alert 속 textField 구현하기 1 (in Code)

 

alert 속 textField 구현하기 1 (with Code)

 

 

나는 이제 만들게 될 간단한 과자 주문 앱을 만들 때, Alert를 사용하게 되는데,,,

ㅎㅎ쉽지가 않네??

 

 

너무 어렵네??

솔직히 이해를 모대,,,모다고 써버렸네?

 

 

그래서 만든 어설픈 Alert 연습! 그런데 이제 textFields를 곁들인,,,

 

 

간단한 로그인 화면이라고 할 수 있겠는데,,, [입력하기] 버튼을 누르면 Alert 창이 뜨고 거기에 Id, Password를 입력하면 화면에 뙇!!

 

 

(지금 생각해보니, 그냥 첫화면에서 아디와 비번을 바로 입력하면 되지만은,,,Alert를 위한 억제 예제,,ㅎ,,)

 

---

1. 레이블 배치

첫 화면에 보일 레이블, 버튼의 객체를 생성해야겠쥬?

 

class ViewController: UIViewController {
    //아이디와 비번을 입력하세요.
    var mainLbl = UILabel()
    
    //아이디 & 비밀번호 레이블
    var idLbl = UILabel()
    var passwordLbl = UILabel()
    
    //텍스트 필드에서 입력받은 값을 표현할 레이블
    var userId = UILabel()
    var userPassword = UILabel()
    
    //[입력하기] 버튼
    var inputButton = UIButton()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
 }

 

 

2. 레이블 및 버튼의 스타일 설정하기

그 후에 ViewDidLoad에서 레이블과 버튼의 스타일에 대한 설정을 해줍니다.

레이블 텍스트 - UILable.text 이용

버튼 타이틀 - SetTitle(_:for:) 이용

버튼 배경 - backgroundColor이용

버튼 폰트 - UIFont.boldSystemFont(ofSize:)

 

 

    override func viewDidLoad() {
        super.viewDidLoad()
        //초기 레이블 값 설정
        mainLbl.text = "아이디와 비밀번호를 입력하세요."
        idLbl.text = "ID : "
        passwordLbl.text = "PASSWORD: "
        
        //버튼 타이틀, 배경색, 폰트크기 변경
        inputButton.setTitle("입력하기", for: .normal)
        inputButton.backgroundColor = .purple
        inputButton.titleLabel?.font = UIFont.boldSystemFont(ofSize: 25)
        
        //레이블과 버튼 뷰에 올리기
        view.addSubview(mainLbl)
        view.addSubview(idLbl)
        view.addSubview(passwordLbl)
        view.addSubview(userId)
        view.addSubview(userPassword)
        view.addSubview(inputButton)
        
        //버튼 액션 올리기
        inputButton.addTarget(self, action: #selector(buttonTapped(_:)), for: .touchUpInside)
        
        setUI()
    }

 

그 후에 만든 버튼을 뷰에 올리는 작업도 해주어야 합니다.

버튼 올리기 - addSubview

 

 

버튼액션 올리기와 SetUI()는 나중에 설명드릴테니, 일단은 무시하세요!

 

 

3.  각 레이블과 버튼의 오토레이아웃 잡기

setUI라는 메서드에서 각 레이블과 버튼이 오토레이아웃을 잡아줍니다.

레이블들은 foreach로 모아 모아 설정해줍니다. (translatesAutoresizingMaskIntoConstraints, 볼드체)

 

    //각 레이블과 버튼의 오토레이아웃 잡기
    func setUI() {
        [mainLbl, idLbl, passwordLbl, userId, userPassword].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
            $0.font = UIFont.boldSystemFont(ofSize: 23) //폰트 볼드체
        }
        
        inputButton.translatesAutoresizingMaskIntoConstraints = false
        
        
        NSLayoutConstraint.activate([
            mainLbl.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            mainLbl.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            mainLbl.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 300),
            
            idLbl.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            idLbl.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            idLbl.topAnchor.constraint(equalTo: mainLbl.bottomAnchor, constant: 50),
            
            
            userId.leadingAnchor.constraint(equalTo: idLbl.leadingAnchor, constant: 50),
            userId.topAnchor.constraint(equalTo: mainLbl.bottomAnchor, constant: 50),
            
            
            passwordLbl.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            passwordLbl.topAnchor.constraint(equalTo: idLbl.topAnchor, constant: 50),
            
            
            userPassword.leadingAnchor.constraint(equalTo: passwordLbl.trailingAnchor, constant: 10),
            userPassword.topAnchor.constraint(equalTo: idLbl.topAnchor, constant: 50),
            
            
            inputButton.centerXAnchor.constraint(equalTo: view.safeAreaLayoutGuide.centerXAnchor),
            inputButton.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 50),
            inputButton.topAnchor.constraint(equalTo: userPassword.topAnchor, constant: 50)
        ])
    }

 

그리고 메서드를  ViewDidLoad에서 실행해주면, 화면이 로드될 때 제가 잡은 오토레이아웃이 샤라락~ 펼쳐지겠져?

그래서 ViewDidLoad에서 setUI()를 해준 것입니다.

 

---

 

내일은 (다음에는?ㅎㅎ) 진짜 핵심인 버튼 누르면 Alert창이 구현되도록 해보겠습니다.

(ㅎㅎ본론은 다음편에,,)