[iOS 앱 개발 - Swift] Table View : 테이블 뷰

[iOS 앱 개발 - Swift] Table View : 테이블 뷰

테이블뷰는 스크롤을 올리고 내리는 액션으로 많은 양의 정보를 보여줄 수 있는 형태의 UI 입니다. 일렬로 쭉 세워놓은 정보들이라 볼 수 있겠네요. 주로 수직방향으로만 스크롤이 가능합니다. 이 행들은 섹선 (Section) 이라는 단위로 묶을 수 있고, 헤더와 푸터를 통해 섹션의 위아래에 추가로 정보를 담을 수도 있습니다.

 

테이블 뷰의 형태

테이블 뷰는 크게 두가지 형태로 구분이 가능합니다. 모든 행이 이어져있는 일반 테이블 뷰 (Plain TableView), 중간중간에 공백으로 구분되어있는 *그룹 테이블 뷰 *(Group TableView) 로 나눌 수 있습니다.

1. 일반 테이블 뷰

여러개의 섹션을 가질 수 있고, 각 섹션은 헤더나 푸터를 가질 수 있습니다.

주로 indexing을 통한 탐색 / 옵션 선택 등의 상황에 이용됩니다.

2. 그룹 테이블 뷰

여러개의 섹션을 기준으로 그룹화가 되어있는 테이블 뷰입니다. 글 앞에 있는 이미지 예시가 바로 테이블 뷰예요!

특정 기준에 따라 정보들을 분류하여 배치하기에 효과적입니다. 사용자가 구분된 정보를 한 번에 알아볼 수 있게 합니다.

 

테이블 뷰 만들기

소스코드로 테이블뷰를 만들어 사용하는 것도 가능은 하지만, (코드의 양과 버그의 양은 정비례관계이므로 ㅋㅋㅋ) 스토리보드에서 테이블뷰를 생성해 이용하는 것이 일반적인 방법입니다. 기본적으로 테이블뷰를 생성하면 "동적 프로토타입"으로 설정되어있습니다. 셀의 개수가 상황에 따라 바뀔 수도 있고, 셀 하나만 디자인을 해도 다른 셀에 적용할 수 있기에, 셀의 개수나 레이아웃을 고정된 형태로 사용하지 않는 이상 기본 설정을 따르도록 합시당.

---

테이블 뷰 셀 : TableView Cell

셀은 테이블 뷰의 구성원소의 이름입니다. UITableViewCell 클래스에 기본적인 스타일이 정해져 있고, 여기에 서브 뷰를 추가하거나 셀을 수정해 커스텀 셀을 디자인할 수도 있습니다.

테이블 뷰 셀의 구조

셀은 기본적으로 "Content Only", "With Accessory View", "In Edit Mode" 3가지의 구조를 가지고 있습니다. 이 중에서 주로 사용되는 것은 With Accessory View 입니다.

From 애플 Docs

테이블 뷰 셀의 구조

셀은 기본적으로 "Content Only", "With Accessory View", "In Edit Mode" 3가지의 구조를 가지고 있습니다. 이 중에서 주로 사용되는 것은 With Accessory View 입니다.

 

With Accessory View에서 컨텐츠 영역에는 문자열, 이미지, 식별자 등이 위치하고, 액세서리 영역에는 상세보기, 재정렬 등의 조작을 위한 객체가 위치합니다.

 

만약 여기서 테이블 뷰를 편집모드로 전환하면 셀의 구조도 함께 바뀝니다. 삭제/ 추가 컨트롤 객체를 위한 공간이 생기고, 재정렬 컨트롤이 악세서리 뷰에 생성됩니다. 두 컨트롤 객체를 이용해 삭제/추가/순서전환을 할 수 있습니다.

 

테이블 뷰 셀의 프로퍼티

기본적으로, 셀에는 이름, 설명, 사진 3가지의 프로퍼티가 정의되어 있습니다. 만약 이미지가 포함된다면 이미지가 왼쪽에 삽입되고 이름과 설명이 오른쪽으로 밀려나 위치하게 됩니다.

 

 

기본 프로퍼티를 이용해 셀을 디자인하면 단순하고 익숙한 테이블 뷰를 만들 수 있습니다. 그러나 만약 앱에 어울리는 컨셉 / 디자인의 셀을 따로 디자인하고자 한다면, 컨텐츠 뷰안에 서브뷰를 삽입해서 구성해주거나 UITableViewCell의 서브클래스를 만들어 디자인해줄 수 있습니다.

 

---

이 글은 edwith 부스트코스 iOS 프로그래밍 강좌를 보고 공부하면서 내용을 정리해 올리는 포스트입니다. 아이폰 앱개발에 관심이 있으신 분이라면 아래에 첨부한 링크를 한 번 확인해보세요. 네이버 아이디로 강의를 수강할 수 있고, 코드리뷰를 제외한 모든 강좌와 강의자료가 무료로 개방되어있으니 부담없이 수강할 수 있을거예요! 네이버 iOS 개발 블로그를 운영하셨던 야곰님이 강의를 맡아 함께 5개의 프로젝트를 진행하면서 개발에 필요한 지식을 얻고 결과물을 내면서 공부할 수 있어 굉장히 마음에 드는 강좌라고 생각됩니다. 흥미가 있으신 분들은 한 번 확인해보세요!

 

https://www.edwith.org/boostcourse-ios/lecture/16886/

[LECTURE] 2) 테이블뷰 셀이란? : edwith