StaticCellTableView.zipiOS에서 가장많이 사용하는 UI는 바로 테이블 뷰이다. 테이블 뷰는 리스트형태의 데이터를 보여주기위해 사용하기도 하지만, 설정화면을 TableView로 구성하기도 한다.
[TableView로 설정화면을 구성한 예]
이렇게 설정을 TableView로 만들었을때 해당 Cell들은 고정적이며 동적으로 처리해야 할일이 없다. 그런데도 이전버전의 방식으로 구현을 하려면 Custom Cell을 xib로 만들고 이것들을 배열로 만드는 불편한 작업을 할 뿐만 아니라, 테이블을 구현하기 위한 각종 delegate method까지 구현을 해줘야 한다.
이렇게 불편한 점을 개선하고자 xCode4.2(iOS5)에서는 "static cell"이라는 일종의 TableView 타입을 제공해 줌으로서, Cell의 갯수가 변하지 않는 상황에서 쉽게 셀을 구성하도록 해주는 기능입니다. 해당기능은 xCode 4.2에서 제공하는 story board에서 사용할 수 있습니다.
작성 방법
1. 프로젝트 생성을 다음과 같이 진행합니다.
두번째 화면에서 Use Storyboard 에 체크를 한후 프로젝트를 생성합니다.
그럼 다음과 같은 구조의 프로젝트가 생성이 됩니다.
2. 첫번째로 ViewController.h가 상속받고 있는 Class를 UIViewController 에서 UITableViewController로 변경합니다.
3. MainStoryboard.storyboard파일을 선택합니다. 그후 오른쪽 아래쪽의 library창에서 TableViewController를 끌어다가 빈 화면으로 올려놓습니다.(기존에 있던 view위에 올리는 것이 아닙니다.)
빈공간으로 끌어올려 아래 그림처럼 두개를 나란히 배치시킵니다.
4. 맨 좌측의 화살표를 드래그 하여 TableView Controller에 붙입니다.
이렇게 화살표를 붙이면 TableViewController가 시작점이 되면서 앱을 실행 시키면 가장 먼저 이 Controller가 보여지게 됩니다.
5. 이제 이전의 View Controller(좌측에 있던)는 사용할 일이 없음으로 삭제 합니다.
6. 이제 좌측 상단의 object 영역에서 TableView를 선택하고 속성창에서 content를 "static cells"로 변경합니다.
7. Storyboard에 있는 TableViewController의 File's Owner가 ViewController라고 지정해 줍니다.
좌측의 "Table view Controller Scene"에서 Table View Controller를 선택하고 오른쪽 상단의 Identity Inspector창에서 Custom Class를 ViewController로 지정합니다.
이상으로 static cell을 사용하기 위한 기본설정은 모두 끝났습니다. 이제 TableView의 속성의 설정을 통해 static cell을 만들어 보겠습니다.
왼쪽상단의 TableView를 선택하면 우측 inspector창에 다양한 TableView들의 속성이 나오게 되는데, 이것들을 통해 다양한 모양의 TableView를 구성할 수 있습니다.
저는 섹션의 갯수와 table style만 변경하여 다음과 같은 모양을 만들었습니다.
[설정된 화면 모습]
이후 각셀 위로 library창에서 UI들을 끌어다가 셀에다 놓으면 바로 Custom cell을 만들어 낼 수 있습니다.
그리고 각 셀을 선택을 하면 각셀의 세부설정(accessory타입 같은)을 할 수 있으니 필요한 데로 만들면 됩니다.
이후 각셀 위로 library창에서 UI들을 끌어다가 셀에다 놓으면 바로 Custom cell을 만들어 낼 수 있습니다.
그리고 각 셀을 선택을 하면 각셀의 세부설정(accessory타입 같은)을 할 수 있으니 필요한 데로 만들면 됩니다.
[실행결과 화면]
물론 IBOutlet 과 IBAction으로 연결하여 각 셀의 view들을 제어할 수 있습니다.
'Mobile > IOS' 카테고리의 다른 글
| ActionSheet 위에 PickerView + Toolbar 올리기 (0) | 2011.11.20 |
|---|---|
| UITableView - 10. CustomCell에서 셀 안의 버튼 이벤트 처리하기 (0) | 2011.11.19 |
| UITableView - 8. Interface Builder를 이용한 Custom Cell 만들기 (3) | 2011.11.18 |
| UITableView - 7. 테이블 셀 이동하기 (0) | 2011.11.18 |
| UITableView - 6. 테이블 데이터 삭제 하기 (0) | 2011.11.17 |
