[iPhone] TableView Custom Cell 만들기

아이폰 어플리케이션에서 기본적인 테이블뷰의 사용만으로는 많은 정보를 함축적으로 전달 할 수 없습니다. 이럴때 TableView의 Cell을 Custom해서 만들어줍니다.

1. 프로젝트 생성

Navigation-based Application으로 프로젝트를 생성해줍니다.

(Ctrl + space를 사용해) Interface Builder를 실행시켜줍니다.

비어있는 xib 파일을 만들어줍니다.

정상적으로 만들어졌다면 아래와 같이 File's Owner등 2개의 파일이 보입니다.

File's Owner의 클래스를 만들려는 클래스 이름으로 지정해 줍니다.

그리고 Library를 이용해 Table View Cell을 끌어다 놓습니다.

새로 끌어다 놓은 Table View Cell의 클래스도 위처럼 바꾸어 줍니다.

그리고 File's Owner의 Class설정 부분 옆에 있는 화살표 (바로 위 이미지와 같은)를 클릭합니다.

아래와 같은 이미지가 뜨면 Superclass를 UITableViewCell로 지정해 줍니다.

Inheritance를 눌러 Outlets으로 변경합니다.

커스텀 할 Cell에 들어갈 뷰들을 만들어줍니다.

위의 과정들을 끝낸 후 저장(command + s)을 합니다.

이때 이름은 위의 만들려는 클래스 이름과 같게 해줍니다.

폴더는 프로젝트 폴더에 만들어 주면 됩니다.

정상적으로 지정되었다면,  프로젝트에 xib파일을 추가할 지를 묻습니다.

체크를 해주면 됩니다.

아래와 같이 xib파일이 생성된걸 확인 할 수 있습니다.

다시 인터페이스 빌더로 돌아와 My Cell Test 를 더블 클릭하면 아래와 같이 컨텐트 뷰 창이 뜹니다. Library에서 커스텀 할 셀에 들어갈 뷰들을 끌어다 올려 놓습니다.

이제 Outlet을 뷰에 연결해 줍니다.

My Cell Test에서 마우스 오른쪽 버튼을 클릭해서 플러스 모양이 떠있는 부분을 클릭+드래그 해 컨텐트 뷰에 연결해 줍니다.

정상적으로 Outlet을 설정했다면 파일 -> Write class file... 을 클릭해 클래스 파일을 생성해 줍니다. 경로는 지금 만든 프로젝트의 경로로 지정해 줍니다.

아래와 같은 창이 나오면 체크후 add를 클릭합니다.

MyCellTest라는 이름의 m파일과 h파일이 생성된걸 볼 수 있습니다.

코드를 확인해 보면, 위에서 만들었던 Cell의 뷰들이 생성되 있습니다.

property 선언이 없어서 선언해 주었습니다.

여기까지하면 커스텀 테이블 뷰의 생성이 완료된 것이고,

이제 여러가지 처리를 통해 데이터를 입력하고, 

기존의 RootViewController와 연결해 주고 사용하면 됩니다.