[iOS 정면돌파] 04. No-StoryBoard

H43RO·2021년 8월 15일

iOS swift 스위프트

iOS 정면돌파

목록 보기

4/5

오늘은 스토리보드 없이 프로그래매틱하게 화면을 구성하는 뷰들을 그리고 다양한 속성을 변경하는 방법과, 간단하게 조건문을 활용하여 어떠한 토글 동작 (뷰 색상 변경) 을 하는 로직을 구현해보았다.

Goal : 스토리 보드 없이 ViewController 처음부터 끝까지 완성하기
내용은 이전 포스팅으로부터 이어집니다.

1. 새로 만든 ViewController 에 UILabel 생성하기

MainViewController.swift

// 제목
var titleLabel: UILabel = {
    let label = UILabel()  // 레이블 객체 생성
    label.text = "메인화면"  // 텍스트, 색상, 정렬여부, 폰트 등을 지정
    label.textColor = #colorLiteral(red: 1.0, green: 1.0, blue: 1.0, alpha: 1.0)
    label.textAlignment = .center
    label.font = UIFont.boldSystemFont(ofSize: 50)
    return label  // 이후 해당 객체를 titleLabel 에 대입
}()

2. 배경 색 변경하고 생성한 UILabel 을 뷰에 추가하기

MainViewController.swift

override func viewDidLoad() {
    super.viewDidLoad()
    // 뷰의 배경 색상 지정 후 SubView (아까 생성한 UILabel) 추가
    view.backgroundColor = #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)
    view.addSubview(titleLabel)
}

3. 전에 만든 LoginViewController 에 이동 로직 추가

LoginViewController.swift

class LoginViewController: UIViewController {

    @IBOutlet var loginButton: UIButton!
    
    // 뷰가 생성되었을 때
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 상단 네비게이션 바 부분을 숨김 처리
        self.navigationController?.isNavigationBarHidden = true
        
	// Objc 의 #selector 기능을 활용하여 해당 버튼 클릭 시 수행할 동작 지정
        loginButton.addTarget(self, action: #selector(moveToMainViewController), for: .touchUpInside)
    }
    
    // 로그인 버튼이 눌렸을 때 메인 화면으로 이동
    // - 마찬가지로, NavigationController 에 ViewController 를 푸시하면 됨
    @objc fileprivate func moveToMainViewController(){
        print("LoginViewController - moveToMainViewController() called")
        let mainViewController = MainViewController()
        self.navigationController?.pushViewController(mainViewController, animated: true)
    }
}

여기까지 코드를 작성한 뒤 실행을 하면, 로그인 버튼 클릭시 메인 화면으로 정상적으로 이동하는 것을 확인할 수 있으며 메인 화면의 뷰가 아까 지정한대로 꾸며져있다.

4. 누를 때마다 배경색 변경 동작을 하는 토글 버튼 추가

MainViewController.swift

// 배경색을 변경하는 버튼
let changeButton: UIButton = {
    let button = UIButton(type: .system)
    button.setTitle("배경색 변경", for: .normal)
    button.setTitleColor(.gray, for: .normal)
    button.titleLabel?.font = UIFont.boldSystemFont(ofSize: 20)
    button.backgroundColor = UIColor.white
    button.layer.cornerRadius = 5

    // 안드로이드로 치면 패딩 값을 조정하는 과정
    button.contentEdgeInsets = UIEdgeInsets(top: 5, left: 20, bottom: 5, right: 20)
    button.addTarget(self, action: #selector(changeBackgroundColor), for: .touchUpInside)

    return button
}()

5. 토글 동작을 위한 Bool 변수 추가

MainViewController.swift

var isBackgroundOrange: Bool?

6. 토글 버튼이 눌렸을 때 수행할 메소드 정의

MainViewController.swift

@objc fileprivate func changeBackgroundColor() {
    print("MainViewController - changeBackgroundColor()")
    
    if isBackgroundOrange == true {
        view.backgroundColor = #colorLiteral(red: 0.1411764771, green: 0.3960784376, blue: 0.5647059083, alpha: 1)
    } else {
        view.backgroundColor = #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)
    }
    
    isBackgroundOrange?.toggle()
}

7. SubView(토글버튼) 추가 후 배경색 토글 메소드 연결

MainViewController.swift

// 뷰가 생성되었을 때
override func viewDidLoad() {
    super.viewDidLoad()
    
    isBackgroundOrange = true
    
    view.backgroundColor = #colorLiteral(red: 0.9372549057, green: 0.3490196168, blue: 0.1921568662, alpha: 1)
    view.addSubview(titleLabel)
    
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    // 상위에 있는 뷰의 정 가운데로 놓겠다 (X, Y축 앵커 지정)
    titleLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    titleLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    view.addSubview(changeButton)
    changeButton.translatesAutoresizingMaskIntoConstraints = false
    changeButton.topAnchor.constraint(equalTo: titleLabel.bottomAnchor, constant: 20).isActive = true
    changeButton.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
}