본문 바로가기
UIKit

코드베이스로 UITextField 구현하기

by 리버🐦‍🔥 2023. 10. 6.
<UITextField>
  • 단일 행의 텍스트 입력을 허용하는 뷰
  • 텍스드 필드에서 키보드 입력을 받고 텍스트를 편집
[Method & Property]
  • placeholder: 아무것도 적혀있지 않을 때 보여줄 텍스트를 지정한다.
  • delegate: 사용자와 상호 작용하고 입력 이벤트를 처리하기 위해 딜리게이트를 지정한다. 이 때, UITextField가 속한 Controller에 “UITextFieldDelegate” 프로토콜을 추가해야 한다.
등… 프로퍼티 및 메서드 추가로 공부해보기!
//
//  UITextFieldTest.swift
//  UIKit-Study
//
//  Created by Kyungsoo Lee on 2023/09/30.
//

import UIKit

class UITextFieldTest: UIViewController, UITextFieldDelegate {
    // MARK: - UITextField
    private lazy var uiTextField: UITextField = {
        let textField = UITextField()
        textField.placeholder = "글자를 입력하세요."
        textField.backgroundColor = .lightGray
        textField.textColor = .black
        // UITextField가 속한 컨트롤러에 "UITextFieldDelegate" 프로토콜을 추가해야 한다.
        // 사용자와 상호 작용하고 입력 이벤트를 처리하기 위해 프로토콜을 추가
        textField.delegate = self
        textField.translatesAutoresizingMaskIntoConstraints = false
        
        return textField
    }()

    // MARK: - viewDidLoad
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        self.view.backgroundColor = .systemGray
        
        // 뷰 추가(아직 layout 설정 안된 상태)
        self.view.addSubview(uiTextField)
        
        setLayout()
    }

    // MARK: - UITextField 제약조건
    private func setUITextFieldLayout() {
        let uiTextFieldConstraint = [
            // 다른 컴포넌트의 상대적인 위치로 제약조건을 설정할 수도 있다.
            uiTextField.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            uiTextField.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ]
        NSLayoutConstraint.activate(uiTextFieldConstraint)
    }

    // MARK: - 전체 제약조건 설정
    // 컴포넌트들의 레이아웃을 설정한다
    private func setLayout() {
        // 프레임 기반의 레이아웃을 비활성화 하여 오토 레이아웃을 기반으로 설정할 수 있도록 한다.
        
        // UITextField 제약조건 설정
        setUITextFieldLayout()
    }
}

import SwiftUI

@available(iOS 13.0.0, *)
struct UITextFieldTestPreview: PreviewProvider {
    static var previews: some View {
        UITextFieldTest().toPreview()
    }
}