8주차_5일차_앱 개발 심화_TodoList 앱 코드로 만들기_TIL

---

전체적인 코드는 이전에 정리했었던,
TodoList 앱 만들기와 동일하다!

5주차_iOS 앱 개발 입문_1일차_ToDoList 앱 만들기_필수 구현

이번에는 스토리보드를 사용하지 않고,
UI를 코드로 작성하는 연습을 하려고 한다.

SnapKit도 사용해봤다.

VC에서는TableView, NavigationBar, barButtonItem
Cell에서는 titleLabel, onoffSwitch
을 생성하고, Constraints를 잡아주었다.

---

우선, Cell의 identifier를 등록하기 쉽게 아래와 같이 작성해줬다. (Cell 코드에서)

static let identifier = "TodoTableViewCell"

 

VC에서는 navigationBar batButtonItem을 만들어주었다.

    let todoListTableView = UITableView()
    let navigationBar = UINavigationBar()

 

그리고 Cell를 등록해주고, title과 rightBarButton 아이템 추가해주기

        title = "To-Do 등록"
        todoListTableView.register(TodoTableViewCell.self, forCellReuseIdentifier: TodoTableViewCell.identifier)
        todoListTableView.dataSource = self
        todoListTableView.delegate = self
        self.navigationItem.rightBarButtonItem = self.rightButton

 

오른쪽 상단 추가하기 barButton은 이렇게!

    lazy var rightButton: UIBarButtonItem = {
        let button = UIBarButtonItem(title: "추가", style: .plain, target: self, action: #selector(addButtonClicked))
        return button
    }()

TableView의 Constraints는 아래와 같이 해주었다.

        view.addSubview(todoListTableView)
        todoListTableView.translatesAutoresizingMaskIntoConstraints = false
        todoListTableView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 0).isActive = true
        todoListTableView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor, constant: 0).isActive = true
        todoListTableView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor, constant: 0).isActive = true
        todoListTableView.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor, constant: 0).isActive = true

이 코드를 SnapKit을 활용해보면!

        todoListTableView.snp.makeConstraints {
            $0.top.leading.trailing.bottom.equalToSuperview().offset(0)
        }

이렇게 간단해진다!

---

다음! Cell에 있는 titleLabel과 onoffSwitch!!

    let titleLabel = UILabel()
    let onoffSwitch = UISwitch()

이렇게 생성해주고,

contentView.addSubview(titleLabel)
contentView.addSubview(onoffSwitch)

뷰에 넣어주기

titleLabel.translatesAutoresizingMaskIntoConstraints = false
onoffSwitch.translatesAutoresizingMaskIntoConstraints = false
        
titleLabel.topAnchor.constraint(equalTo: self.safeAreaLayoutGuide.topAnchor, constant: 10).isActive = true
titleLabel.leadingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.leadingAnchor, constant: 10).isActive = true
titleLabel.trailingAnchor.constraint(equalTo: onoffSwitch.leadingAnchor, constant: -10).isActive = true
titleLabel.bottomAnchor.constraint(equalTo: self.safeAreaLayoutGuide.bottomAnchor, constant: -10).isActive = true
        
onoffSwitch.trailingAnchor.constraint(equalTo: self.safeAreaLayoutGuide.trailingAnchor, constant: -10).isActive = true
onoffSwitch.centerYAnchor.constraint(equalTo: self.safeAreaLayoutGuide.centerYAnchor).isActive = true

이렇게 constraints 잡아줬다.


이걸 Snapkit을 활용해보면!

        titleLabel.snp.makeConstraints {
            $0.top.leading.equalTo(contentView.safeAreaLayoutGuide).offset(20)
            $0.trailing.equalTo(onoffSwitch.snp.leading).inset(10)
            $0.bottom.equalTo(contentView.safeAreaLayoutGuide).inset(10)
        }
        
        onoffSwitch.snp.makeConstraints {
            $0.trailing.equalTo(contentView.safeAreaLayoutGuide).inset(10)
            $0.centerY.equalToSuperview()
        }

이렇게 간단해진다!

---

0

이렇게 해서 실행해보면!

이렇게 설정한대로 나오는 것을 확인할 수 있다.

---

스토리보드로 먼저 만들어서 잘 돌아가는지 확인 후, 코드로 바꿔보는 연습을 해봤다.
바꾸는 과정에서 아직 코드로 오토레이아웃 잡는게 어색하고, 모르는 부분이 많은 것 같다는 생각이 들었다.

이번 개인과제를 하면서, 많이 찾아보고 연습해봐야겠다.

---