Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 118

Notice: A non well formed numeric value encountered in /var/www/html/devdiary/wp/wp-content/plugins/crayon-syntax-highlighter/crayon_formatter.class.php on line 119

[iPhone Tutorial] 개봉영화 목록 표시 – UITableView, UISegmentedControl 활용 (1)

앱개발시 활용 가치가 가장 높은 UITableView 를 사용한 예제를 만들어보겠습니다.
정보성 앱을 만들 때는 필수죠. 일단, 결과물부터 보겠습니다.

기능은 매우 심플합니다. 시작인만큼 가볍게 하죠.
– 배열에 있는 데이터를 테이블뷰에 표시하기
– 제목순 또는 개봉일순으로 정렬하기

 

1. 프로젝트 만들기
일단, 프로젝트를 만들어볼까요.
File > New > Project > Single View Application 을 선택한 뒤, 아래 그림과 같이 설정합니다.

프로젝트명 : movielist
– Use Storyboards : 스토리보드는 사용하지 않습니다. iOS 5.0 이상 사용자만 사용 가능하기 때문이죠.
– Use Automatic Reference Counting : ARC는 사용합니다. 사용범위에 따라 iOS 5.0 이상 사용자만 가능하기도 하지만, 예제의 사용범위에서는 iOS 4.0 이상 사용자라면 문제 없습니다.

 

2. 컨트롤 배치하기
ViewController.xib 파일을 열어 table view와 segmented control을 아래와 같이 배치합니다.
예제에서는 데이터를 10개만 넣을 예정인데, 스크롤 효과를 잘 보려면 각 셀의 높이 값을 키우는 것이 좋습니다. Row Height 값을 44에서 60으로 수정합니다. 44로 설정해놓으면 딱 한 화면에 10줄이 들어가서 스크롤하는 느낌이 잘 안 나거든요. ^^

  

 

3. UITableView 세팅하기
테이블뷰 구현시에는 반드시 numberOfRowsInSection, cellForRowAtIndexPath 함수가 구현되어야 하며, 헤더 파일에서는 datasource 와 delegate 설정을 해줘야 합니다.
먼저 ViewController.h 입니다.

 

그 다음 ViewController.m  에는 아래와 같이 입력합니다.

 

마지막으로 xib 파일도 수정을 해줘야 합니다. 헤더 파일에서 선언한 myTableView 를 2번에서 만든 테이블뷰와 연결합니다. 그리고 TableView의 delegate, datasource 도 함께 연결합니다.

 

4. 배열에 영화 정보 입력하기
ViewController.h 에 아래와 같이 titleArray, releaseArray 를 추가합니다. 실제로는 protocol, synthesize 코드를 넣어야 하지만, 여기서는 생략합니다. (실제로는 넣어주세요 ^^)

 

ViewController.m 에는 각각 해당 메소드를 아래와 같이 입력합니다.
viewDidLoad : titleArray에는 제목을, releaseArray에는 개봉일을 각 10개씩 순서대로 저장

 

numberOfRowsInSection : titleArray의 개수를 리턴합니다. 즉, 셀이 10개임을 알려줌

 

cellForRowAtIndexPath : textLabel에는 제목을, detailTextLabel에는 개봉일을 표시

 

이제 실행하면 아래와 같이 표시됩니다.

 

아직 정렬 기능은 구현하지 않았지만, 정말 이대로 끝난걸까요 ? 겉보기에는 그렇게 보일 수 있지만, 이렇게 구현하면 안 됩니다. 좌측과 우측의 내용이 서로 연결되어 있지 않기 때문입니다. 건축학 개론이 3/22에 개봉했고, 디스 민즈 워가 2/29에 개봉했다는 의미로 보이지만, 데이터상에는 첫째줄에 건축학 개론과 3/22가 출력되고, 둘째줄에 디스 민즈 워와 2/29가 출력됐을 뿐, 서로간에 묶여있지 않습니다. 이렇게 되면 정렬 기능이 올바르게 구현되기 어렵습니다. 이제 제목과 개봉일 데이터를 묶어보도록 하죠.

 

그 내용은 다음 포스팅에서 다루도록 하겠습니다.