[iOS] SCNetworkReachabilityGetFlags のブロックの件

2011年7月8日金曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

以前、Cocoaの日々: ネットワーク接続状況を知る[2] SCNetworkReachabilityGetFlags はブロックする という記事を書いたがそのブロックの原因がわかった。


SCNetworkReachabilityCreateWithName


以前は、SCNetworkReachability のインスタンスを作るのにホスト名ベースの関数を使っていた。こんな感じ。
SCNetworkReachabilityCreateWithName(kCFAllocatorDefault,
   [@"xcatsan.com" UTF8String]);
この後、接続性をチェックする為に SCNetworkReachabilityGetFlags() を呼び出すとブロックするケースがあった、というのがその記事の内容だったのだが、その理由は DNSによる名前解決に時間がかかっていた為と思われる。

通常は 3G か Wifi がつながればインターネットへの接続ができて DNSによる名前解決が成功するのでこのブロック現象は起きない。ただモバイルルーターを使っていて、例えば
iPhone --◯--> Wifiルータ --×--> 3G
となっていた場合、iPhoneから見るとネット(Wifi)接続OKだが実際にはインターネットにつながっていない。地下鉄で利用しているとこんなケースがありうる。
この時に先ほどのホスト名ベースの関数 SCNetworkReachabilityCreateWithName() を使うと SCNetworkReachabilityGetFlags() を呼び出した時に、そのホスト名の名前解決を試みようとする。インターネットにはつながっていないので名前解決は当然失敗するのだが、Wifiネットワークには繋がっているので名前解決の処理を待ち続ける。その結果、タイムアウトが発生するまで SCNetworkReachabilityGetFlags() でブロックが起きる。

なお、そもそも Wifiルータへ接続できない場合は名前解決を試みないのでこの現象は起きない。
iPhone --×--> Wifiルータ --×--> 3G

また同じ記事で書いていた「初回のタイムラグ」はこの DNSの名前解決にかかる時間だと思われる。なお名前解決したからといってICMPなどを使って実際に到達可能性を調べているわけではない。


SCNetworkReachabilityCreateWithAddress


SCNetworkReachability のインスタンスを作る関数は他にも何種類かある。そのなかには IPアドレスを指定する関数もある。
SCNetworkReachability.h

SCNetworkReachabilityRef
SCNetworkReachabilityCreateWithAddress  (
      CFAllocatorRef   allocator,
      const struct sockaddr  *address
      )    __OSX_AVAILABLE_STARTING(__MAC_10_3,__IPHONE_2_0);
この関数を使うとDNS名前解決が発生しないので、それを原因とする SCNetworkReachabilityGetFlags() におけるブロッキングが発生しない(はず)。使い方はこんな感じ。
struct sockaddr_in sockaddr;
        bzero(&sockaddr, sizeof(sockaddr));
        sockaddr.sin_len = sizeof(sockaddr);
        sockaddr.sin_family = AF_INET;
        inet_aton("0.0.0.0", &sockaddr.sin_addr);        

        reachability_ =
            SCNetworkReachabilityCreateWithAddress(NULL, (struct sockaddr *) &sockaddr);
なおこの IPアドレスは接続性のチェックには使われていないようで適当なもの例えば 0.0.0.0 でも動作する。


DNS名前解決


DNSの利用について簡単な確認をやってみた。以下、結果。
a) iPhoneのWifi設定で DNS設定あり
  ホスト名ベース   => 接続 OK
  IPアドレスベース => 接続 OK

 b) iPhoneのWifi設定で DNS設定なし(設定項目を空)
  ホスト名ベース   => 接続 NG
  IPアドレスベース => 接続 OK

他の現象と合わせ、やっぱりホスト名ベースの場合は DNS名前解決を試みていると思われる。


NetworkReachability のまとめ


これまでの試行錯誤でわかった結果をまとめておく。
・デバイスの接続状態のみを判断する
・3G 接続できていれば、接続可能
・Wifi接続できていれば、接続可能(その場合、3Gより優先される)
・指定したホストに ping(ICMP)は飛ばしていない
・APIへホスト名を渡した場合、デバイスが接続可能なら名前解決を実行する
・名前解決に時間がかかると SCNetworkReachabilityGetFlags() はブロックする
 (名前解決のタイムアウトは実測値で 60秒程度)
・APIへIPアドレスを渡す場合、IPアドレスが実在しなくても接続チェックに影響を与えない。
  (例)0.0.0.0


ライブラリ


これらを受けて以前公開したライブラリを修正した。
[参照] Cocoaの日々: [iOS] ネットワーク接続状況取得ライブラリを公開

最新コードはこれ。
dev5tec/FBNetworkReachability - GitHub
以前は非同期(通知)ベースだったが、新バージョンでは同期、非同期の両方で使える。

以前のコードはここに残してある。
dev5tec/FBNetworkReachability at v1 - GitHub

[iOS] UITableView でプルダウンすると再読込するユーザインタフェースを実装

2011年7月7日木曜日 | Published in | 7 コメント

このエントリーをはてなブックマークに追加

(2011-08-22 追記)
矢印画像のアニメーションにひっかかりが発生する件は解決策が見つかった。下記を参照のこと。
Cocoaの日々: Blocks を使ったアニメーションのひっかかりを解消する



[前回] Cocoaの日々: [iOS] UITableView でセルをスワイプするとスライドするユーザインタフェースを実装

今回も Twitterアプリのまね。UITableView をプルダウンした時に出てくるあのユーザインターフェイスを実装してみた。

"pull down to refresh" と呼ばれているらしい。


サンプル


まずはサンプルの動作から。

ここでプルダウンすると上部にメッセージが現れる。
さらに引き下げるとメッセージが変わる。左の画像もクルッと回転して上向きになる。
ここで指を離すとしばらく止まる。サンプルでは単純に2秒のウェイトを入れてある。
2秒すぎると自動的に上へスクロールして最初の状態に戻る。


実装


表示ロジック


プルダウンすると現れるエリアの表示には UITableView のヘッダ(tableHeaderView)をつかう。Xib で UIView を一つ作り、これを UITableViewへ紐付けておく。
- (void)viewDidLoad
{
       :
    self.tableView.tableHeaderView = self.headerView;
}
ただこのままだと初期表示でこのヘッダが表示されてしまう。
そこで UIScrollView の contentInsets プロパティを調整してヘッダを見えなくする。contentInsets は Xib でもコードでも変更可能。
ヘッダビューの高さが 60ポイントなので cotentInsets.top = -60 としてやると表示エリアが下に 60ポイント下がり、初期状態ではヘッダ部分が隠れるようになる。
これが最初に見えている状態。指で下にドラッグするとヘッダ部分が現れるようになる。
この状態で指を離すとスクロールして最初の状態(ヘッダが隠れる状態)に戻る。一方、下へのドラッグ距離がある閾値(60ピクセル+α)を越えたところ指を離した時には、contentInsets.top = 0 を設定してやる。こうするとスクロールしてもヘッダ表示された状態でピタリと止まる。
処理が終わったら(サンプルでは2秒間のウェイトが入れてある) contentInsets.top = -60 へ戻してやる。すると最初のヘッダが隠れた表示に戻る。なお contentInsets も UIViewアニメーションの対象なので +[UIView animateWithDuration:aniamations:] を使うとヘッダが隠れるまでがアニメーションになる(逆に使わないと一瞬で切り替わり、やや不自然になる)。

コードではヘッダの表示制御用にメソッドを用意してある。こんな感じ。
- (void)_setHeaderViewHidden:(BOOL)hidden animated:(BOOL)animated
{
    CGFloat topOffset = 0.0;
    if (hidden) {
        topOffset = -self.headerView.frame.size.height;
    }
    if (animated) {
        [UIView animateWithDuration:0.2
                         animations:^{
                                self.tableView.contentInset = UIEdgeInsetsMake(topOffset, 0, 0, 0);
                         }];
    } else {
        self.tableView.contentInset = UIEdgeInsetsMake(topOffset, 0, 0, 0);        
    }
}
上記を適切なタイミングで呼んでやる。なおアニメーションを制御の対象にしているのは一番最初の初期表示時にはアニメーションを使わないため。


カスタムヘッダビュー


ヘッダ用にカスタムクラス HeaderView を用意した。
typedef enum {
    HeaderViewStateHidden = 0,
    HeaderViewStatePullingDown,
    HeaderViewStateOveredThreshold,
    HeaderViewStateStopping
} HeaderViewState;

@interface HeaderView : UIView {
    
}

@property (nonatomic, retain) IBOutlet UILabel* textLabel;
@property (nonatomic, retain) IBOutlet UILabel* detailTextLabel;
@property (nonatomic, retain) IBOutlet UIImageView* imageView; 
@property (nonatomic, retain) IBOutlet UIActivityIndicatorView* activityIndicatorView;

@property (nonatomic, assign) HeaderViewState state;

- (void)setUpdatedDate:(NSDate*)date;

@end
ラベルなどの表示項目の保持の他、矢印画像のアニメーション、UIActivityIndicatorView の表示制御をここで行わせる。またプルダウンの状態管理もここで行う。プルダウンの状態は4つ定義している。
typedef enum {
    HeaderViewStateHidden = 0,          // ヘッダが隠れた状態
    HeaderViewStatePullingDown,         // プルダウン状態1(ただし閾値は超えていない)
    HeaderViewStateOveredThreshold,     // プルダウン状態2(閾値を越えている)
    HeaderViewStateStopping             // プルダウン停止状態(処理中)
} HeaderViewState;
状態毎にラベルの表示内容、矢印画像の向き、UIActivityIndicatorView の表示・非表示を決める。state プロパティのセッターメソッドを自前で用意してこの処理を書いておく。
- (void)setState:(HeaderViewState)state
{
    switch (state) {
        case HeaderViewStateHidden:
            [self.activityIndicatorView stopAnimating];
            self.imageView.hidden = YES;
            break;

        case HeaderViewStatePullingDown:
            [self.activityIndicatorView stopAnimating];
            self.imageView.hidden = NO;
            self.textLabel.text = @"引き下げて...";
            if (state_ != HeaderViewStatePullingDown) {
                [self _animateImageForHeadingUp:NO];
            }
            break;
            
        case HeaderViewStateOveredThreshold:
            [self.activityIndicatorView stopAnimating];
            self.imageView.hidden = NO;
            self.textLabel.text = @"指をはなすと更新";
            if (state_ == HeaderViewStatePullingDown) {
                [self _animateImageForHeadingUp:YES];
            }
            break;

        case HeaderViewStateStopping:
            [self.activityIndicatorView startAnimating];
            self.textLabel.text = @"更新中...";
            self.imageView.hidden = YES;
            break;
    }

    state_ = state;
}
画像の回転は前回のブログで紹介した。
Cocoaの日々: [iOS] transform を使った画像のお手軽回転アニメーション

こんな感じ。
- (void)_animateImageForHeadingUp:(BOOL)headingUp
{
    CGFloat startAngle = headingUp ? 0 : M_PI + 0.00001;
    CGFloat endAngle = headingUp ? M_PI + 0.00001 : 0;

    self.imageView.transform = CGAffineTransformMakeRotation(startAngle);           
    [UIView animateWithDuration:0.1
         animations:^{
             self.imageView.transform =
                CGAffineTransformMakeRotation(endAngle);
         }];
}
headingUp によって上→下、下→上のアニメーションを切り替えている。


※画像入手元および画像作者
入手元:Arrow, Up icon | Icon Search Engine
作成者: Kyo Tux (ホームページ kyo-tux on deviantART


プルダウンの検出


プルダウンの検出には UIScrollViewDelegate を使う。こんな感じ。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    if (self.headerView.state == HeaderViewStateStopping) {
        return;
    }

    CGFloat threshold = self.headerView.frame.size.height;

    if (PULLDOWN_MARGIN <= scrollView.contentOffset.y &&
        scrollView.contentOffset.y < threshold) {
        self.headerView.state = HeaderViewStatePullingDown;

    } else if (scrollView.contentOffset.y < PULLDOWN_MARGIN) {
        self.headerView.state = HeaderViewStateOveredThreshold;
        
    } else {
        self.headerView.state = HeaderViewStateHidden;
    }
}
図にすると多分わかりやすい。

ドラッグ状態(≒スクロール状態)が閾値を越えているかどうかによってヘッダのプルダウン状態を変えている。先ほど見たようにヘッダは state の値によってラベルの表示を変えたり、矢印画像のアニメーションを実行している。 contentOffset.y はヘッダの表示・非表示にかかわらずその上の部分が基準(0)となる。ここを基準に PULLDOWN_MARGIN よりも上まで表示するようにプルダウンした時に閾値を越えたと判断する( HeaderViewStateOveredThreshold)。また PULLDOWN_MARGIN からヘッダの高さまでの間の時はプルダウン状態(HeaderViewStatePullingDown)とみなし、それより下は非表示状態(HeaderViewStateHidden )

プルダウン中に指を離した時の処理はこう。
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate
{
    if (self.headerView.state == HeaderViewStateOveredThreshold) {
        self.headerView.state = HeaderViewStateStopping;
        [self _setHeaderViewHidden:NO animated:YES];
        
        [self performSelector:@selector(_taskFinished) withObject:nil afterDelay:2.0];
    }
}
scrollViewDidEndDragging:willDelegate: は UIScrollView を指でドラッグした後、指を離したときに呼び出される。このメソッドが呼び出された時(=指を離した時)にプルダウン状態が HeaderViewStateOveredThreshold ならヘッダを表示状態(位置固定)にしている。サンプルでは2秒のディレイを入れていて、これが終わったら再びヘッダを閉じる処理を入れている。
- (void)_taskFinished
{
    self.headerView.state = HeaderViewStateHidden;
    [self.headerView setUpdatedDate:[NSDate date]];
    [self _setHeaderViewHidden:YES animated:YES];
}
なお UIScrollViewDelegate でプルダウンを検出するアイディアは下記の本がヒントになった。


備考


矢印が上下に回転する処理は若干重め。当初アニメーション時間を 0.2秒にしていたが 3GS ではプルダウンしてアニメーションが起きる時に若干のひっかかりを感じた。今は 0.1秒にしていて多少ましになった。多分コマ数が減った分負荷が下がったのだと思う。この辺りはケースによってはチューニングの必要があるかもしれない。なお、お手本にした Twitterクライアントではこのプチフリーズは起きない。


(2011-08-22 追記)
矢印画像のアニメーションにひっかかりが発生する件は解決策が見つかった。下記を参照のこと。




ソースコード

GitHub からどうぞ。
CustomCellSample at 2011-07-07 from xcatsan/iOS-Sample-Code - GitHub


参考情報


UITableView カスタマイズシリーズ


Cocoaの日々: [iOS] UINib を使ったカスタム UITableViewCell の作り方 Cocoaの日々: [iOS] UINib を使ったカスタム UITableViewCell の作り方(その2)ボタンの処理 Cocoaの日々: [iOS] UINib を使ったカスタム UITableViewCell の作り方(その3)ボタンの処理[改良版] Cocoaの日々: [iOS] UITableView でセルをスワイプするとスライドするユーザインタフェースを実装 今回のコードはこれらをベースに作っている。


関連情報


iphone - Pull down to refresh. - Stack Overflow
"Pull down to refresh" の発案者は Twitter公式クライアントの前身である Tweetie の開発者 Loren Brichter氏が考え出したものらしい。

このアイディアの利用について対価を求めるかの問いに対して Brichter氏は "absolutely not" と明確に否定している。
Twitter / @lorenb: @michellusthof absolutely ...
考え出したセンスもアイディアも素晴らしいし、利用に対する態度も素晴らしい。

[iOS] transform を使った画像のお手軽回転アニメーション

2011年7月6日水曜日 | Published in | 0 コメント

このエントリーをはてなブックマークに追加

1枚の画像を回転させるアニメーションを実現したい。UIView の transform プロパティを使うと非常に簡単にできることがわかった。


サンプル
初期状態。ここで start を押すと
時計回りに回転が始まり

下を向いた状態で終わる。


実装

用意している画像はこの1枚だけ。


※画像入手元および画像作者
入手元:Arrow, Up icon | Icon Search Engine
作成者: Kyo Tux (ホームページ kyo-tux on deviantART



これを UIImageView.image に設定し、transformプロパティを使って回転させる。こんな感じ。
- (IBAction)start:(id)sender {
    
    self.imageView.transform = CGAffineTransformMakeRotation(0);
    [UIView animateWithDuration:0.2
        animations:^{
            self.imageView.transform =
                CGAffineTransformMakeRotation(2*M_PI*180/360.0-0.000001);                         
        }];
}
最初に transform を CGAffineTransformMakeRotation(0)(角度 0)で初期化し、アニメーションブロックで transform を180度回転させた値を設定している。CGAffineTransformMakeRotation の引数の単位はラジアンなので 2π x 度/360 で角度変換する。最後の -0000001 は右側で回転させる為のおまじない。 これが無いと左側での回転となる。こうやってアニメーションブロックに入れておくと回転中の画像が自動的に作られてスムーズなアニメーションが行える。


その他


当初は NSTimer を使ってコンマ数秒毎に角度を変えて自前にアニメーションを行ってみたが、スムーズなアニメーションを作るには試行錯誤が必要でかなり面倒。
- (void)fire:(NSTimer*)timer
{
    angle_ += 30.0;
    self.imageView.transform = CGAffineTransformMakeRotation(2*M_PI*angle_/360.0);

    if (angle_ >= 180.0) {
        angle_ = 0;
        self.button.enabled = YES;
        [timer invalidate];
    }
}

- (IBAction)start:(id)sender {
    
    [NSTimer scheduledTimerWithTimeInterval:0.05
                                     target:self
                                   selector:@selector(fire:)
                                   userInfo:nil
                                    repeats:YES];
}
上記は 30度単位で回しているがカクカク感が多少ある。UIView のアニメーションを使うとこの当たりの調整が不要で簡単にアニメーションができるので非常に便利。画像も1種類用意しておけば使いまわせるのもいい。


ソースコード


GitHub からどうぞ。
RotateImageSample at 2011-07-06 from xcatsan/iOS-Sample-Code - GitHub


参考情報


CGAffineTransformMakeRotation
transform プロパティの使い方はここが参考になった。

iPhoneアプリ開発、その(64) トランスフォ〜ム|テン*シー*シー
CoreGrapshicsを操作する場合は CGContextRotateCTM などを使う。transformプロパティを使わずに自力で描画しているケースはこちらが参考になる。

人気の投稿(過去 30日間)