TableView에서 Pull Down Refresh(끌어 당겨 새로고침) 구현하기

PullDownRefresh.zip

UITableView를 사용해서 데이터를 로딩할 때 버튼을 둬서 리프레시를 할 수도 있지만, twitter나 facebook앱 처럼 TableView를 아래로 당기면 리프레시가 되는 TableView를 구현해 보려고 한다.

[Pull Down Refresh를 구현 한 예]

이 refresh를 처음부터 구현을 하려면 많이 힘들겠지만 다행이도 다른 개발자가 라이브러리 화 시켜놓은 라이브러리가 있으며, 이 라이브러리를 통해 쉽게 구현할 수 있다.
해당 라이브러리는 여기에서 다운로드 할 수가 있다. 

xCode 4.2버전을 통해 프로젝트를 진행해보도록 하겠다.(스토리보드로 UI를 꾸며 보겠다.)

1. 프로젝트를 생성한 후(스토리보드 사용에 체크를 하고) "library"라는 이름과 "images"라는 이름으로 그룹을 만든다.
 

 2. 위의 링크에서 다운로드 받은 파일 중 PullRefreshTableViewController.h, PullRefreshTableViewController.m 그리고 arrow.png 이미지를 추가 한다.

 
3. 해당 라이브러리를 사용하기 위한 Quartz.Core 프레임웍을 추가 한다.

4. PullRefreshTableViewController를 상속받은 MainTableViewController를 생성한다.

5.story board를 오픈한 후 초기에 생성되어있는 ViewController를 삭제 한 후 TableViewController를 끌어다 올려 놓는다.그리고 해당 TableViewController의 클래스를 위의 3단계에서 만든 MainTableViewController로 지정한다.

6. MainTableViewController.h에 tableView에서 데이터를 담을 NSArray형 변수를 하나 생성한다. 그리고 m파일에서는 UITableView를 사용하기위한 method를 구현해 준다.

 

 
7. 이후에 iOS시뮬레이터를 실행시키고 데이블을 당기면 다음과 같이 refresh가 되는 화면을 볼수가 있다.

이렇게 tableView를 당기면 라이브러리로 추가 했던 PullRefreshTableViewController의 method중 refresh라는 메소드가 호출이 된다. 그렇기 때문에 우리가 새로 만든 MainTableViewController에서 해당 method를 override해주어 개발하고자 하는 내용을 추가 해주면 된다.

 위 코드에서도 볼수 있듯이 데이터로딩이라던가 필요한 로직이 끝나면 PullRefreshTableViewController에 있는 method인 stopLoading이라는 메소드를 호출하여 loading....이라는 메세지를 숨겨 주면 된다.

이상으로 쉽게 PullDownRefresh를 구현하는 방법을 알아 보았다