2011年10月1日土曜日

[iOS]UITableViewを下に引っ張って更新するUI


Twitterクライアントでよく見かけるテーブルを下に引っ張るとアイコンが回転してロード中を示すUIがあります。
左の画像みたいなもの。

これを実現する便利なライブラリは2つあります。

1つ目は「PullToRefresh」というもの。
左の画像は「PullToRefresh」のGitHubのReadmeから引っ張って来たものです。
簡単なのはこちらで、Readmeに書いてある通り(英語ですが迷わない程度に簡単です)です。
ごくごく簡単なサンプルも付属しているので、こちらも併せて読めば簡単です。
でもこれはUITableViewControllerを拡張する形になっているので、複数のパーツから構成されている画面に存在するUITableViewを拡張したい、というケースでは使えません。

そういうケースでは「EGOTableViewPullRefresh」を使います。

1)EGORefreshTableHeaderView.h/mをコピーする
2)FrameworkにQuarzCoreを追加する
3)対象のUITableViewを持つControllerクラスでEGORefreshTableHeaderDelegateの実装を宣言
4)同様にUIScrollViewDelegateも実装宣言する
5) EGORefreshTableHeaderViewのインスタンス変数を定義
6)下記のような感じで初期化する
  EGORefreshTableHeaderView *view = [[EGORefreshTableHeaderView alloc]
initWithFrame:CGRectMake(0.0f, 0.0f - self.tableView.bounds.size.height,
self.view.frame.size.width, self.tableView.bounds.size.height)];
view.delegate = self;
[self.tableView addSubview:view];
_refreshHeaderView = view;
[view release];
[_refreshHeaderView refreshLastUpdatedDate];
 最後のrefreshLastUpdatedDateは引っ張ったときに出てくる最終更新日時を設定するものです。適宜呼んでやりましょう。

7) UIScrollViewのdelegateを以下のように実装する
- (void)scrollViewDidScroll:(UIScrollView *)scrollView{
[_refreshHeaderView egoRefreshScrollViewDidScroll:scrollView];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{
[_refreshHeaderView egoRefreshScrollViewDidEndDragging:scrollView];
}
8)
EGORefreshTableHeaderDelegateで定義されるメソッドを実装する
- (void)egoRefreshTableHeaderDidTriggerRefresh:(EGORefreshTableHeaderView*)view
 ※ロード中アイコンが表示されている間にやっておきたい処理を実装する(非同期で)
- (BOOL)egoRefreshTableHeaderDataSourceIsLoading:(EGORefreshTableHeaderView*)view
 ※ロード中かどうかをBOOL値で返す(NOを返したタイミングでロード中解除)
- (NSDate*)egoRefreshTableHeaderDataSourceLastUpdated:(EGORefreshTableHeaderView*)view
 ※最終更新日時を返す。基本的には[NSDate date]しておけばよい


0 件のコメント:

コメントを投稿