UIKit_유투브_신동규 - #5 UI 실습

 

 

각 Component 넣어서 실제 UI 화면과 비슷하게 만들기

 

하나의 component를 다른 component로 감싸고 싶을 때

lazy var loginTextField: UITextField = {
    let tf = UITextField()
    tf.placeholder = "ID"
    return tf
}()

lazy var loginTextFieldView: UIView = {
    let view = UIView()
    view.layer.cornerRadius = 10
    view.layer.borderColor = UIColor.tertiarySystemGroupedBackground.cgColor
    view.layer.borderWidth = 1
    // loginTextFieldView 안에 loginTextField 넣기
    view.addSubview(loginTextField)

    loginTextField.translatesAutoresizingMaskIntoConstraints = false
    loginTextField.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
    loginTextField.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
    loginTextField.leftAnchor.constraint(equalTo: view.leftAnchor, constant: 10).isActive = true
    loginTextField.rightAnchor.constraint(equalTo: view.rightAnchor, constant: -10).isActive = true

    return view
}()

넣고자 하는 component를 감싸는 component의 subView로 선언하고

감싸는 component의 안에서 여러가지 constraint를 넣을 수 있음

·

·

·

 

라이트모드인지 다크모드인지 판단하는 코드

func configureColors() {
    if self.traitCollection.userInterfaceStyle == .dark {
        loginButton.setTitleColor(UIColor.black, for: UIControl.State.normal)
        loginButton.backgroundColor = .white
    } else {
        loginButton.setTitleColor(UIColor.white, for: UIControl.State.normal)
        loginButton.backgroundColor = .black
    }
}

func configureViewComponents() {
        ...
        ...

        configureColors()
}

self.traitCollection.userInterfaceStyle로 다크모드, 라이트모드 판단

적용시키기 위해 configure 하는 메인 함수 아래에 위 함수 추가!

·

·

·

 

다크모드일 때에는 잘 적용됨 → 화이트모드일때는 적용 안됨

디바이스의 테마가 변경 될 때마다 발동하도록 하려면!

 override func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?) {
    // 디바이스가 변경 될 때마다 발동
    configureColors()
}