[iOS] UITableView + UITableViewCell (1): 테이블 뷰 사용해보기

UITableView

UITableView은 테이블 형태로 한 줄에 하나의 정보를 보여주는 용도로 사용되는 뷰입니다. 아이폰의 설정 앱이나, 연락처 앱이 UITableView를 사용하는 대표적인 애플리케이션입니다. 오늘은 UITableView에 대한 기본적인 개념과 사용방법들을 정리해보도록 하겠습니다.

 

UITableView 구성요소

먼저 테이블 뷰를 구성하는 요소들을 알아보겠습니다.

Section과 Row

모든 테이블 뷰는 섹션과 행을 가지고 있습니다. 섹션은 컨텐츠들의 분류를 의미하고 행은 각 콘텐츠를 보여주는 테이블의 행을 의미합니다. 각 행에는 대부분 서로 다른 콘텐츠가 들어가겠죠? 그래서 각 행을 뷰로 표현할 수 있고 이 뷰를 UITableViewCell이라고 합니다. 

 

UITableViewCell

UITableViewCell은 위와 같이 구성됩니다. 테이블 뷰가 어떤 상태인지에 따라, 그리고 각 셀이 어떤 내용을 담고있냐에 따라 다르게 구성될 수 있습니다. 만약 각 셀이 콘텐츠의 내용만을 담고 있다면, 첫 번째인 Content Only 구성처럼 내용만 보여주면 되겠죠. 

이 연락처 앱 처럼요!

 

그럼 with accessory view는 어떨까요?

Accessory View도 연락처 앱에서 쉽게 확인할 수 있었는데요, 셀의 가장 우측에 있는 화살표, 정보 등과 같은 작은 아이콘이 Accessory View에 해당합니다.

 

Edit Mode도 연락처 앱에서 확인해볼 수 있습니다! 우측 상단에 편집 버튼을 누르면 말 그대로 편집 모드로 들어가겠죠? 한번 눌러보겠습니다.

이렇게 통화내역을 편집할 수 있는 모드가 되면서 삭제를 할 수 있는 Delete Control이 생성된 것을 확인할 수 있습니다. 

 

그럼 이제 UITableView를 사용하는 간단한 앱을 만들어 보겠습니다!

UITableView 추가하기

XCode 라이브러리에서 검색을 해보면 Table View와 Table View Controller를 모두 추가할 수 있도록 되어있습니다. Table View는 기존 컨트롤러에 새로운 뷰로 테이블 뷰를 추가하고자 할 때 사용할 수 있고, Table View Controller는 테이블 뷰를 사용하는 새로운 씬을 만들고자 할 때 사용할 수 있습니다. 그리고 가장 큰 차이는 Table View는 화면을 가득 채우지 않고 뷰의 일부분에 테이블 뷰를 넣을 수 있다는 것이죠. 

 

우리는 일단 테이블 뷰만 보여줄 생각이니 Table View Controller를 선택하겠습니다. 

 

기존에 있던 ViewController를 삭제하고, 새로운 테이블 뷰 컨트롤러를 추가했습니다. 그리고 애플리케이션이 시작되면 바로 테이블 뷰를 보여주기 위해서 오른쪽 인스펙터에서 시작 시 이 뷰 컨트롤러를 사용하겠다는 옵션을 체크할게요!

 

그럼 이제 본격적으로 이것저것 만져볼까요?

Static Cell Content 사용하기

먼저 런타임에 동적으로 셀을 추가하거나 내용을 바꿀 수 없는 Static Cell부터 사용해보겠습니다. 커스터마이징은 최소화되겠지만 변하지 않는 데이터를 사용자에게 계속 보여줘야 하는 테이블 뷰라면 유용하게 쓸 수 있겠죠?

만들어진 뷰 컨트롤러에서 Table View를 선택하면 우측 인스펙터에 Content를 선택할 수 있는 옵션을 확인할 수 있습니다. 이 옵션을 Static Cells로 변경해봅시다!

 

변경하고 실행해보면 이렇게 빈 테이블이 나오는 것을 볼 수 있습니다. 그럼 각 셀을 설정하고 섹션도 한번 나눠볼게요. 

 

이렇게 생긴 연락처 앱과 비슷한 모양으로 만들어보려고 하는데요, 위에 프로필 부분은 어려울 것 같으니까 제외하고 테이블 부분만 만들어봅시다..! 일단 섹션을 2개로 설정했습니다. 연락처 앱에 가면 가나다 순으로 연락처가 섹션으로 나뉘어서 보이죠? 그리고 섹션의 이름이 보이는데 이 이름을 설정해주겠습니다.

 

좌측에서 섹션을 선택하고, 우측 인스펙터에서 헤더를 설정합니다. 그리고 실행해보면?

요렇게 섹션이 연락처 앱처럼 나뉜 것을 볼 수 있습니다!! 섹션 간 여백이나 글자의 크기나 색상을 iOS가 알아서 예쁘게 잡아줘서 진짜 좋은 것 같아요..

 

그럼 연락처를 추가해볼게요. 연락처를 추가하려면 각 셀을 건드려야겠죠? 이번에는 왼쪽 내비게이터로 가서 셀을 선택해주겠습니다.

 

오른쪽 인스펙터에서 여러 가지 설정을 할 수 있습니다. 스타일 중에서 연락처 앱과 가장 비슷한 Basic을 선택하고 샘플로 연락처 이름을 몇 개 넣어볼게요.

 

 

자동으로 레이블이 추가됐습니다! 이 레이블만 채워주면 되겠죠?

 

이런 식으로 섹션과 셀을 추가할 수 있습니다..! 셀에 여러 요소들이 있는데 한 번씩 사용해보고 싶어서요, 이번에는 연락처 앱의 최근 통화목록을 따라서 만들어볼게요.

 

 

요 화면의 테이블 부분입니다! 

 

이번에는 콘텐츠 부분에 연락처 이름, 위치, 날짜가 있고 셀의 제일 끝에 Accessory View도 있습니다.

 

이번에는 섹션을 하나로 줄이고 마땅한 기본 스타일이 없어서 Custom으로 설정하고 3개의 레이블을 추가했습니다. 내용을 채워줄까요?

그럴듯하게 텍스트는 만들어졌네요! 이제 오른쪽에 보이는 정보 아이콘을 Accessory View로 추가해볼게요.

 

셀을 선택하고 오른쪽을 보면 Accessory 옵션이 있습니다! 여기서 Detail을 선택하고 실행해주세요~!

오 이제 진짜 연락처 앱 같아졌네요!! 근데 셀을 하나하나 다 만들어주고 있으니 너무 번거롭네요.. 

 

개발자라면 수작업보다는 자동화를 해야겠죠..! 그래서 다음 포스트부터는 UITableViewController를 상속받는 컨트롤러 클래스를 하나 만들어서 내용을 자동으로 채워주도록 해보겠습니다!!