LIFE GOES TO A PARTY: iOSアプリ開発事始09：GitHubライブラリ「EGOTableViewPullRefresh」を実際にサンプルプログラムに実装してみました！

今回はGitHubで公開されているオープンソースのライブラリからプルリフレッシュを行なう「EGOTableViewPullRefresh」をダウンロードして、実際にサンプルアプリに実装するまでを行ってみる試みです。「EGOTableViewPullRefresh」は、プルリフレッシュしてくれる機能、例えばテーブルビューの画面でプル（引っ張る）アクションを行なうことで情報を更新してくれたりする。今回、学習教材として使用させていただいたのは、@IT（アットマーク・アイティ）「生産性ガチアゲなオープンソースiOSライブラリ（2）：iOSアプリのUIを爆速で激ヤバにする2つのライブラリ (1/4) 」の記事です。「習うより慣れろ」ということで、実演リポートを記します。

生産性ガチアゲなオープンソースiOSライブラリ（2）
　iOSアプリのUIを爆速で激ヤバにする2つのライブラリ(1/4)

GitHub（ギットハブ）はソフトウェア開発プロジェクトのための共有ウェブサービスであり、Gitバージョン管理システムを使用する。 Ruby on RailsおよびErlangで記述されており、GitHub社によって保守されている。主な開発者はChris Wanstrath、PJ Hyett、Tom Preston-Wernerである。 GitHub商用プランおよびオープンソースプロジェクト向けの無料アカウントを提供している。 2009年のユーザー調査によると、GitHubは最もポピュラーなGitホスティングサイトとなった。
出典：GitHub - Wikipedia

今回のシステム環境
OS X Mountain Lion 10.8.4
Xcode 4.6.3

ライブラリから「EGOTableViewPullRefresh」をダウンロード

まずは、GitHubのライブラリから「EGOTableViewPullRefresh」をダウンロードします。GitHubのトップページの検索窓に「EGOTableViewPullRefresh」を入れて検索結果からダウンロードすることもできます。手順としては、今回はライブラリのタイトルが分かっているのでGitHubのトップから説明しますね。ちなみに、オープンソースソフトウェア（OSS）で公開されているものは、アカウント無しでもダウンロードができるようになっているそうです。今回はアカウント無しで行ないます。

GitHubサイトへGo

トップページ

該当タイトルをクリック

「Download ZIP」ボタンでダウンロード

ZIPファイルの解凍を指定して「OK」ボタンをクリック

解凍ファイルを確認

Xcodeでサンプル・プロジェクトを作成

Xcodeを起動して新しくプロジェクトを作成して、「EGOTableViewPullRefresh」をそのプロジェクトに追加します。

プロジェクトの新規作成

テンプレート「Empty Application」を選択

プロジェクト情報の入力･設定

プロジェクトの保存

ワーク画面を表示

ファインダで「EGOTableViewPullRefresh」を開く

プロジェクトに「EGOTableViewPullRefresh」を追加

ソースプログラム「EGOTableViewPullRefresh」の追加完了

「Objective-C class」を追加

File Template Library

Objective-C class

任意の保存名を記入して保存

「.h」と「.m」のファイルを生成

SampleAppViewController.h

SampleAppViewController.m

ARC（Automatic Reference Counting）設定の変更

「EGOTableViewPullRefresh」はARCに対応していないということで、設定を変える必要があるということです。

ARCとは、iOS5から追加された自動リファレンスカウンタでリファレンスカウンタ方式のメモリ管理を自動で（正確にはコンパイラが）行ってくれるというものです。ARCの詳細は「[iOS5] ARC (Automatic Reference Counting) : Overview - iOS 開発ブログ Natsu’s note」を参考にしてください。
生産性ガチアゲなオープンソースiOSライブラリ（2）：iOSアプリのUIを爆速で激ヤバにする2つのライブラリ (1/4) - ＠IT

その設定変更の手順は、表示された「Build Phases」一覧の中の「Compile Sourses」の「EGORefreshTableHeaderView.m」を一部変更、「Link Binary With Libraried」に「QuartzCore.framework」を追加します。

「Build Phases」をクリック

Build Phases

「Build Phases」の一覧リスト表示

Build Phases

Target Dependencies

Compile Sources

Link Binary With Libraries

Copy Bundle Resources

EGORefreshTableHeaderView.mに「-fno-objc-arc」を追加

Compile Sources

EGORefreshTableHeaderView.m

Compiller Flags

-fno-objc-arc

「QuartzCore.framework」を追加

Link Binary With Libraries

QuartzCore.framework

Link Binary With Libraries

＋

Choose frameworks and libraries to add:

QuartzCore.framework

設定変更の確認

Compile Sources

EGORefreshTableHeaderView.m

-fno-objc-arc

Link Binary With Libraries

QuartzCore.framework

iOSシュミレータを起動してみる

ソースコードの変更・追加

「AppDelegate.m」ファイルのコード変更

AppDelegate.m

#import "AppDelegate.h"

@implementation AppDelegate
@synthesize managedObjectContext = _managedObjectContext;
@synthesize managedObjectModel = _managedObjectModel;
@synthesize persistentStoreCoordinator = _persistentStoreCoordinator;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    [self.window makeKeyAndVisible];
    return YES;
}

赤字

#import "AppDelegate.h"
#import "SampleAppViewController.h"
@implementation AppDelegate
@synthesize managedObjectContext = _managedObjectContext;
@synthesize managedObjectModel = _managedObjectModel;
@synthesize persistentStoreCoordinator = _persistentStoreCoordinator;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
    self.window.backgroundColor = [UIColor whiteColor];
    self.window.rootViewController = [[SampleAppViewController alloc] init];
    [self.window makeKeyAndVisible];
    return YES;
}

「SampleAppViewController.h」ファイルのコード変更

#import <Foundation/Foundation.h>

@interface SampleAppViewController : NSObject

@end

赤字

#import <Foundation/Foundation.h>
#import <UIKit/UIKit.h>
#import "EGORefreshTableHeaderView.h"
@interface SampleAppViewController : UITableViewController
<
EGORefreshTableHeaderDelegate,
UITableViewDelegate,
UITableViewDataSource
>
{
    // 更新中を表示するViwe
    EGORefreshTableHeaderView *_refreshHeaderView;
    BOOL _reloading;
    // Cellの文字列、更新時に変更
    NSString *_cell_string;
}
@end

「SampleAppViewController.m」ファイルのコード変更

#import "SampleAppViewController.h"

@implementation SampleAppViewcontroller

@end

赤字

#import "SampleAppViewController.h"

@implementation SampleAppViewController
- (void)viewDidLoad {
    [super viewDidLoad];
    _cell_string = @"Before";
    if (_refreshHeaderView == nil) {
        // 更新ビューのサイズとデリゲートを指定する
        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;
    }
    // 最終更新日付を記録
    [_refreshHeaderView refreshLastUpdatedDate];
}
// セルの数
- (NSInteger)tableView:(UITableView *)tableView
 numberOfRowsInSection:(NSInteger)section {
    return 10;
}
// テーブルのセル表示処理
- (UITableViewCell *)tableView:(UITableView *)tableView
         cellForRowAtIndexPath:(NSIndexPath *)indexPath {
    static NSString *CellIdentifier = @"Cell";
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:CellIdentifier];
    if (cell == nil) {
        cell = [[UITableViewCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:CellIdentifier];
    }
    // 表示されるセルのテキストを設定
    cell.textLabel.text = [NSString stringWithFormat:@"%@ - %d", _cell_string, indexPath.row];
    // Update後だったら文字色を変更
    if ([_cell_string isEqualToString:@"Update"]) {
        cell.textLabel.textColor = [UIColor brownColor];
    }
    return cell;
}
// スクロールされたことをライブラリに伝える
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    [_refreshHeaderView egoRefreshScrollViewDidScroll:scrollView];
}
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView
                  willDecelerate:(BOOL)decelerate {
    [_refreshHeaderView egoRefreshScrollViewDidEndDragging:scrollView];
}
// テーブルを下に引っ張ったら、ここが呼ばれる。テーブルデータをリロードして3秒後にdoneLoadingTableViewDataを呼んでいる
- (void)egoRefreshTableHeaderDidTriggerRefresh:(EGORefreshTableHeaderView*)view{
    _reloading = YES;
    // 非同期処理
    NSOperationQueue *queue = [[NSOperationQueue alloc] init];
    [queue addOperationWithBlock:^{
        // 更新処理など重い処理を書く
        // 今回は3秒待ち、_cell_stringをUpdateに変更
        [NSThread sleepForTimeInterval:3];
        _cell_string = @"Update";
        [self.tableView reloadData];
        // メインスレッドで更新完了処理
        [[NSOperationQueue mainQueue] addOperationWithBlock:^{
            [self doneLoadingTableViewData];
        }];
    }];
}
// 更新終了
- (void)doneLoadingTableViewData{
    // 更新終了をライブラリに通知
    _reloading = NO;
    [_refreshHeaderView egoRefreshScrollViewDataSourceDidFinishedLoading:self.tableView];
}
// 更新状態を返す
- (BOOL)egoRefreshTableHeaderDataSourceIsLoading:(EGORefreshTableHeaderView*)view{
    return _reloading;
}
// 最終更新日を更新する際の日付の設定
- (NSDate*)egoRefreshTableHeaderDataSourceLastUpdated:(EGORefreshTableHeaderView*)view{
    return [NSDate date];
}
@end

@IT

生産性ガチアゲなオープンソースiOSライブラリ（2）：iOSアプリのUIを爆速で激ヤバにする2つのライブラリ (1/4)

サンプルプロジェクトを実際に動かしてみる

最初の画面

リストを下に引っ張る

はい！画面がリフレッシュされました

いやぁ、長かったですね。今回の目的、GitHubのライブラリをインストールするところからプログラムへの組み込み、実際に起動して正常に動作するかということでした。一応、目的達成です。

LIFE GOES TO A PARTY

ページ

2013-08-05

iOSアプリ開発事始09：GitHubライブラリ「EGOTableViewPullRefresh」を実際にサンプルプログラムに実装してみました！

ライブラリから「EGOTableViewPullRefresh」をダウンロード

Xcodeでサンプル・プロジェクトを作成

ARC（Automatic Reference Counting）設定の変更

ソースコードの変更・追加

サンプルプロジェクトを実際に動かしてみる

関連記事　－iOSアプリ開発事始

NewsSource

0 件のコメント:

コメントを投稿

ページ

2013-08-05

iOSアプリ開発事始09：GitHubライブラリ「EGOTableViewPullRefresh」を実際にサンプルプログラムに実装してみました！

ライブラリから「EGOTableViewPullRefresh」をダウンロード

Xcodeでサンプル・プロジェクトを作成

ARC（Automatic Reference Counting）設定の変更

ソースコードの変更・追加

サンプルプロジェクトを実際に動かしてみる

関連記事 －iOSアプリ開発事始

NewsSource

0 件のコメント:

コメントを投稿

関連記事　－iOSアプリ開発事始