Code-based UI

코드 작성 과정

1. 뷰 계층 구성
2. 제약 잡기

• 간단한 TodoList 앱의 틀 구현해보기
• 주석을 통해 내가 구현한 코드가 어떤 기능을 하는 지를 달아주는 습관을 갖도록 하자

class TodoViewController: ViewController {
  //뷰 세팅
  private let titleLabel = UILabel()
  private let addButton = UIButton()
  private let tableView(frame: .zero)

  override func viewDidLoad() {
      self.viewDidLoad()
      self.tableview.delegate = self
      self.tableView.datasource = self
      configureUI()
      makeConstraints()


  }
  
  // 뷰 계층 설정 & 뷰 설정 코드
  func configureUI() {
      self.view.backgrooundColor = .white
      titleLabel.text = "TODO"
      titleLabel.font = .systemFont(ofSize: 22)
      
      //뷰의 하위 계층에 뷰 설정
      self.view.addSubview(titleLabel)

      addButton.setTitle("Add, for: .normal)
      addButton.setTitleColor(.blue, for:.normal)

      self.view.addSubview(addButton)
      
      tableView.register(TodoCell.self, forCellReuseIdentifier: TodoCell.reuseIdentifier)
      
      self.view.addsubview(tableView)
  }
	
   //뷰 제약 잡기
   func makeConstraints() {

         
 	//titleLabel의 뷰 제약 설정      
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
      titleLabel.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
      titleLabel.centerXAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.centerXAnchor)
    ])
        
    //addButton의 뷰 제약 설정
    addButton.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
      addButton.topAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.topAnchor),
      addButton.trailingAnchor.constraint(equalTo: self.view.safeAreaLayoutGuide.trailingAnchor, constant: -16)
    ])
    
    //tableView의 뷰 제약 설정
    tableView.translatesAutoresizingMaskIntoConstraints = false
    
    NSLayoutConstraint.activate([
      tableView.topAnchor.constraint(equalTo: titleLabel.bottomAnchor),
      tableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor),
      tableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor),
      tableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor),
    ])
   }
}

//테이블뷰 델리게이트 구성
extension TodoViewController: UITableViewDelegate {
  func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
    return 50
  }
}

//테이블뷰 데이터소스 구성
extension TodoViewController: UITableViewDataSource {
  
  //테이블뷰 셀 개수
  func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
    return 100
  }
  
  // 테이블뷰 셀 데이터 설정
  func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    
    let cell = tableView.dequeueReusableCell(withIdentifier: TodoCell.reuseIdentifier, for: indexPath) as? TodoCell
    
    cell?.configureUI()
    cell?.title = ["꽃에 물주기", "밥 먹기", "쇼핑하기", "게임하기"].randomElement() ?? "실패"
    
    return cell ?? UITableViewCell()
  }
  
}

    
    
class TodoCell: UITableViewCell {
// 테이블뷰 셀 설정
	
    //셀 식별자 지정
	static let reuseIdentifier = String(describing: TodoCell.self)
    
    var title: String {
    	get {
        	titleLabel.text ?? ""
        }
        set {
        	titleLabel.text = newValue
        }
    
    //셀의 뷰 구성
	private let titleLabel = UILabel()
    private let isDoneSwitch = UISwitch()
    
    func configureUI() {
    // 셀 뷰 계층 구성
    	self.contentView.addSubview(titleLabel)
        self.contentView.addSubview(isDoneSwitch)
        
        makeConstraints()
    }
    
    private func makeConstriants() {
    // 셀 제약 설정
    titleLabel.translatesAutoresizingMaskIntoConstraints = false
        isDoneSwitch.translatesAutoresizingMaskIntoConstraints = false
        
 		NSLayoutConstraint.active([
        // titleLabel의 제약 설정
        	titleLLabel.leadingAnchor.constraint(equalTo:
           		 self.contentView.trailingAnchor, constant: 16),
            titleLabel.centerYAnchor.constraint(equalTo:
            	self.contentView.centerYAnchor)
        ]}
       	NSLayoutConstraint.active([
        //isDoneSwitch의 제약 설정
        	isDoneSwitch.trailingAnchor.constraint(equalTo:
           		 self.contentView.trailingAnchor, constant: -16),
            isDoneSwitch.centerYAnchor.constraint(equalTo:
            	self.contentView.centerYAnchor)
        ]}
    }
}

스토리보드 없이 코드로만 UI를 구성하는 것은 생각했던 것만큼 복잡하지는 않다. 다만, view의 제약들을 제대로 잡아주지않으면 빌드했을 때 제대로 나오지 않거나 많은 에러를 불러오는 것 같다. 제약을 설정하는 중요성을 다시 한 번 깨닫게 된다