[iOS/UI] UITableView란?

안녕하세요 Foma 입니다.

 

오늘 알아볼 것은 테이블뷰입니다.

 

iOS 개발을 하면서 거의 필수로 사용해야하는 클래스이죠.

 

그동안 제공되는 메소드를 사용하면서 대충 사용했는데 오늘은 진짜 하나하나 세세하게 보면서 알아가 보겠습니다.

 

UITableView

---

 

공식 문서에는 "단일 열에 배열된 행을 사용하여 데이터를 표시하는 뷰" 라고 되어있네요.

 

또한 UIScrollView 에 상속받고 있으므로 Scroll이 당연히 가능하고 Scroll 관련된 메소드들도 함께 사용할 수 있습니다.

 

Data Source

---

기본적으로 필요한 데이터소스 메소드는 numberOfSections 와 numberOfRowsInSection 가 있습니다.

 

numberOfSections 은 섹션의 개수를 numberOfRowsInSection 은 섹션안의 행의 갯수를 정하는 메소드 입니다.

 

행 하나하나는 TableViewCell로 이루어져있는데요. 이것은 어떻게 구현할까요?

 

바로 cellForRowAt 이라는 메소드로 행을 구성할 테이블뷰셀을 정해주시면 됩니다.

 

이렇게 보면 이해가 잘 안될수도 있으니 나라와 도시를 띄우는 간단한 예제를 보여드릴게요~

 

먼저 각 나라와 도시 그리고 도시들을 담는 배열을 만들어줍니다.

아래와 같이 섹션을 countries의 갯수만큼 return 해줍니다.

 

각 행의 갯수는 도시들 안에 들어있는 도시의 갯수만큼 return 해줍니다.

 

타이틀은 각 나라안에 있는 이름으로 return 해줍니다.

 

각 행의 셀은 테이블뷰셀을 만들어주신 뒤 도시 이름을 띄울 Label로 구성해줍니다.

그 다음 dequeueReusableCell 을 이용해서 위에서 만들어주신 TableViewCell 로 구성해줍니다.

 

그리곤 cell안에 있는 label은 cities안의 섹션의 각 도시 이름으로 해줍니다.

 

 

여기서 dequeueReusableCell이란?

 

재사용 가능한 셀이란 뜻으로 identifier를 식별자로 사용하는 셀을 재사용하겠다는 것입니다.

 

그렇다면 셀의 identifier는 어디서 정하지?

 

스토리보드로 이동하셔서 테이블뷰셀을 탭하고 identifier를 정해주시면 됩니다.

 

이렇게 모두 하고 실행시켜보면 아래와 같이 섹션에는 나라이름 그리고 이루어진 행들을 도시들로 이루어지게 됩니다.

 

또한 헤더뷰와 푸터뷰를 이용하여 각 테이블뷰의 각 맨 위 부분과 맨 아래 부분을 구성할 수도 있는데요.

 

아래와 같이 스토리보드에 headerView와 footerView를 만들어주시고

 

테이블뷰 컨트롤러에 연결해주신 뒤 tableHeaderView를 headerView로 tableFooterView를 footerView로 해주시면 됩니다.

그러면 아래와 같이 헤더뷰와 푸터뷰가 맨 위와 아래에 구성되게 됩니다.

 

Height

---

그렇다면 각 행의 헤더,로우,푸터의 높이는 어떻게 정할까요?

 

헤더는 heightForHeaderInSection 메소드를

 

로우는 heightForRowAt 메소드를

 

푸터는 heightForFooterInSection 메소드를 사용하시면 됩니다.

 

아래와 같이 설정해주시면

로우를 100으로 주어서 확실히 커진게 보이시나요?

 

Delegate

---

그렇다면 이제 각 행의 셀을 탭했을 때나 슬라이드 등을 하는 딜리게이트를 살펴봅시다.

 

가장 먼저 각 로우를 탭했을 때는 didSelectRowAt 메소드를 사용해주시면 됩니다.

 

cellForRow(at:) 메소드와 함께 사용하여 셀을 선택했을 때 배경색을 바꿔보는 예제를 보여드리겠습니다.

 

선택을 해제했을 때의 메소드도 있습니다.

 

바로 didDeselectRowAt 메소드인데요 이것을 사용하여 선택을 하나만 가능한 것처럼 보이게 할 수 있습니다.

 

바로 아래처럼 말이죠.

 

또한 왼쪽으로 스와이프 했을 때 삭제할 수 있는 테이블뷰를 많이 보셨을거에요.

 

그건 바로 canEditRowAt 와 commit editingStyle: UITableViewCell.EditingStyle를 사용하시면 됩니다.

 

 

그러면 아래처럼 스와이프 했을 때 삭제 버튼을 만들 수가 있습니다.