안녕하세요! 이번 프로젝트는 todoList 구현입니다.
오늘은 todolist를 보여줄 테이블뷰와 완료시 체크할 버튼을 구현해보았어요 🌻
테이블 뷰를 사용한 todoList 구현하기
UI 구성
- View
- Todo List Label
- date Label
- Table View
- TodoTable View Cell
- checkbox Button
- todo Text Label
- TodoTable View Cell
Main.storyboard에 AutoLayout으로 UI를 구성하였어요!
TableView 구현하기
우선 TableView를 구현하기 위해 ViewController에 TableView와 Outlets를 연결해주었어요.
class ViewController: UIViewController {
@IBOutlet weak var tableview: UITableView!
override func viewDidLoad() {
super.viewDidLoad()
}
}
TableView를 구현하기 위해서는 꼭 두 가지의 프로토콜을 채택해야 합니다. 저는 본 클래스와의 구분을 위해 확장을 이용하여 프로토콜을 채택해주었어요!
extension ViewController: UITableViewDataSource, UITableViewDelegate {
func setting() {
tableview.dataSource = self
tableview.delegate = self
tableview.rowHeight = 60
}
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// 리턴되는 테이블 뷰 개수
return tododataArray.count
}
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TodoTableViewCell", for: indexPath) as! TodoTableViewCell
cell.todoText.text = tododataArray[indexPath.row].title
cell.selectionStyle = .none
return cell
}
}
위의 코드에서 보는 것과 같이 UITableViewDataSource와 UITableViewDelegate를 채택을 해야하는데요?! 이 두가지 프로토콜을 채택한다면 tableView(_ tableView: , numberOfRowsInSection section: ) -> Int 함수와 tableView(_ tableView: , cellForRowAt indexPath: ) -> UITableViewCell 함수를 꼭 구현하셔야 합니다. 또한 테이블 뷰도 델리게이트 패턴이기 때문에 ⭐️tableview.dataSource = self 와 ⭐️tableview.delegate = self 라는 코드를 꼭 넣어주셔야 해요.
- tableView(_ tableView: , numberOfRowsInSection section: ) -> Int : 테이블 뷰의 셀 개수를 정하는 함수
- tableView(_ tableView: , cellForRowAt indexPath: ) -> UITableViewCell : 테이블 뷰 셀 컨트롤러와 연결하는 함수
라고 생각하시면 이해가 쉬우실 것 같아요!
그럼 UITableViewCell 함수도 구현을 해주어야겠죠?!
TableViewCell 구현하기
[ TableViewCell 파일 생성하기 ]
UITableViewCell은 새로운 viewController 이기 때문에 새로운 파일을 형성해주어야 해요.
네비게이션 바의 오른쪽 마우스를 클릭하여 New File을 선택해줍니다.
그 중 Cocoa Touch Class 를 선택하여 Next 버튼을 클릭해주세요. 그럼 아래와 같은 화면이 뜹니다.
Subclass of 에서 UITableViewCell을 선택하여 원하는 Class 이름으로 바꾸고 Next 버튼을 클릭하여 파일을 생성해줍니다.
UI에서 UITableViewCell 안에 구현했던 Button과 Lable은 이 새로운 UITableViewCell의 클래스와 연결해주셔야합니다.
import UIKit
class TodoTableViewCell: UITableViewCell {
@IBOutlet weak var todoText: UILabel!
override func awakeFromNib() {
super.awakeFromNib()
// Initialization code
}
@IBAction func checkButtonTapped(_ sender: UIButton) {
// 버튼 클릭했을 때의 코드
}
override func setSelected(_ selected: Bool, animated: Bool) {
super.setSelected(selected, animated: animated)
// cell이 클릭되었을 시 다음화면으로 넘어가는 함수
}
}
Check Box Button 구현하기
[ Button에 Check Box 이미지 적용 ]
todoList에서 완료한 작업을 체크할 수 있는 방식을 Button을 통해 구현하였습니다. 우선 iconfree에서 제가 사용할 체크박스 이미지를 다운 받았어요. 하나는 체크 되어있지 않은 이미지, 하나는 체크 되어있는 이미지로 다운받았습니다! 동그란 이미지가 끌리더라구요ㅎㅎ. 그리고 해당 이미지를 Assets 에 넣어주었습니다.
UI의 TodoTableViewCell에 구현한 CheckBoxButton을 클릭한 뒤 속성을 수정할 수 있는 어트리뷰트 네비게이션에서 Type : Custom, Style : Default 로 설정하였습니다. 이렇게 하면 사용자 커스텀 버튼으로 변경이 돼요!
이젠 이미지를 씌어주기 위해 기본값인 StateConfig : Default 를 클릭하여 Background에 아이콘 이미지(체크 되어있지 않은 이미지)를 넣어주었구요. 선택된 경우인 StateConfig : Selected 를 클릭하여 Background에 아이콘 이미지(체크 되어있는 이미지)를 넣어주었어요.
해당 버튼이 연결되어 있는 TodoTableViewCell에 아래의 코드를 붙여준다면 버튼을 클릭할 때마다 이미지가 변하는 것을 확인할 수 있습니다!
@IBAction func checkButtonTapped(_ sender: UIButton) {
if sender.isSelected {
sender.isSelected = false
}else {
sender.isSelected = true
}
}
시연 영상
테이블 뷰의 구현을 위해 임의적으로 tableView에 데이터를 넣어두었어요.
오늘 계획했던 Lv.1 성공!
