전체적인 코드는 이전에 정리했었던,
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()
}
이렇게 간단해진다!
이렇게 해서 실행해보면!
이렇게 설정한대로 나오는 것을 확인할 수 있다.
스토리보드로 먼저 만들어서 잘 돌아가는지 확인 후, 코드로 바꿔보는 연습을 해봤다.
바꾸는 과정에서 아직 코드로 오토레이아웃 잡는게 어색하고, 모르는 부분이 많은 것 같다는 생각이 들었다.
이번 개인과제를 하면서, 많이 찾아보고 연습해봐야겠다.
728x90
'iOS 앱 개발 종합반 > TIL' 카테고리의 다른 글
개인과제_책 검색 앱 만들기_TIL (8) | 2024.05.07 |
---|---|
8주차_3일차_앱 개발 심화_동영상 앱 만들기_TIL (4) | 2024.05.01 |
7주차_5일차_앱 개발 숙련_Closure(클로저)_개인공부_TIL (0) | 2024.04.19 |
7주차_4일차_앱 개발 숙련_개인공부_TIL (2) | 2024.04.18 |
7주차_2일차_앱 개발 숙련_ScrollView & Pull to Refresh_TIL (0) | 2024.04.16 |