[iOS/Swift] TableView 로 초간단 TodoList 만들기

이전에 포스팅한 UITableView, UITableViewCell, Protocols 을 이용해서 앱을 실제로 만들어볼게요.
공식문서를 보고 정리했던 내용들이라 어렵게 작성한것 같아서 실습으로 한 번 더 환기하려고 합니다!

개발 순서는 다음과 같아요 🙂

1. Storyboard 에서 TableView 추가하기
2. TableView 내에 TableCell 구성 만들기
3. CustomCell 클래스 만들고 연결하기
4. TableView Protocol 준수하기
5. 앱 실행하기

---

1. Storyboard 에서 TableView 추가하기

스토리보드를 이용해서 UI 개발을 진행하고 있습니다. TableView 와 TableViewCell 을 추가해줍니다!

2. TableView 내에 TableCell 구성 만들기

Table View 내부에 Table View Cell 을 추가해주고, Cell 내부에 Button, Label 을 추가해주었어요. Auto layout 을 통해서 레이아웃 조정도 해준 상태입니다.

여기서 버튼은 시스템 이미지를 이용했고, Default 상태에서는 circle, Selected 상태에서는 checkmark.circle.fill 로 설정했어요.

3. CustomCell 클래스 만들고 연결하기

UITableViewCell 을 상속받는 Custom Class 를 만들어주고, 스토리보드에서 Cell 의 inspector 에서 지정을 해주어야합니다. TodoCell 이라는 이름으로 만들었고, 아래 두 곳에 작성해주면 됩니다.

Custom Class 는 UITableViewCell 을 만든것에 대한 지정이고, Identifier 는 Cell 을 재사용하기 위해 사용되는 식별자입니다.

스토리보드에서 Assistant 로 코드창을 함께 열어서, 버튼과 라벨을 checkButton과 todoLabel 으로 outlet 을 만들어줍시다. 데이터를 통해 각 셀의 Label 을 지정해주기 위함입니다.

여기서 checkButtonTapped method 는 버튼이 눌렸을 때, 라디오버튼처럼 체크가 되기 위해 버튼의 isSelected 속성이 토글되도록 코드를 추가했습니다.

4. TableView Protocol 준수하기

코드에서 ViewController 가 UITableViewDataSource 프로토콜을 준수한다는 것을 명시해줍니다. 이전 글에서 작성했듯이, 필수인 두 개의 함수 tableView(_:numberOfRowsInSection:), tableView(_:cellForRowAt:) 를 작성했습니다.

중요한역할! 스토리보드에서 TableView -> View Controller 로 컨트롤+드래그 하여 dataSource, delegate 를 연결해줘야합니다.

tableView(_:numberOfRowsInSection:) 는 특정 section 에 표시할 row 의 개수를 묻는 method 입니다. 지금은 section 이 하나밖에 없는 예제이므로 todos 리스트의 개수를 반환했습니다.

tableView(_:cellForRowAt:) 는 cell 을 어떻게 표현할지에 대해 묻는 method 입니다.

cell 을 가져오기 위한 방법은 다음과 같습니다.

• tableView.dequeueReusableCell(withIdentifier: ) 함수를 통해서 TodoCell 을 가져옵니다.
• as? TodoCell 을 통해서 TodoCell 로 다운캐스팅합니다.
• if let else 구문을 통해서 다운캐스팅이 되지 않은 경우, 비어있는 UITableViewCell() 을 반환하도록 합니다.
• 성공적으로 다운캐스팅이 되었다면, cell 은 TodoCell instance 가 됩니다.

cell 을 가져온 후, 데이터를 통해 cell 을 update 하기 위한 방법입니다.

• indexPath 는 section, row 값을 가지므로, row 를 index 에 할당해줍니다.
• 미리 만들어둔 todos 리스트의 index 에 해당하는 값을 todoLabel.text 값으로 할당해준다.

cell 을 update 한 후, cell 을 반환하면 됩니다!

5. 앱 실행하기

모두 완료한 상태에서 앱을 실행하면 정상적으로 테이블뷰가 나타나며, 버튼을 통해 체크할 수 있습니다!

초간단 투두리스트였기 때문에, Section 도 없고 삭제나 디테일 페이지도 없지만 도움이 되셨으면 좋겠습니다 :D

다음에 글을 업데이트 하게된다면 row 를 스와이프해서 삭제하는 것까지 업데이트 해볼게요!

---

참고 문서

• [iOS] TableView 의 기초 :: UITableView, UITableViewCell
• [iOS] TableView 를 위한 Protocol :: Datasource, Delegate
• 디자인적인 요소(버튼)은 패캠 강의를 참고했습니다.

추천 가이드

• https://developer.apple.com/tutorials/app-dev-training/getting-started-with-today
• 앱개발 시 필요한 내용들을 대부분 담고 있는 예제입니다. 앱개발 초반이라면 추천드려요!