2012/06/19更新

[XCODE] クルクルっと回るUIActivityIndicatorViewの使い方、カスタマイズ

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

今日は、UIActivityIndicatorViewの使い方やカスタマイズ方法を記載したいと思います。
処理中にクルクルって回って、処理を行っている事をアピールするあいつです。簡単で便利に使えるので、 少し詳しく調べてみました。


UIActivityIndicator View




UIActivityIndicatorViewとは

このViewは、処理を行っていたり、待ち中に表示されたりするUIです。
以下のようなものでクルクルと回って、「処理中だよー」「アプリがフリーズしたわけじゃないよー」と言った 内容を表現することが出来ます。

(UIActivityIndicatorViewの例)
画像




UIActivityIndicatorViewの使い方

使い方はとっても簡単で、UIActivityIndicatorViewのインスタンスを作成して、 追加したいViewの上にサブビューとして追加すればOKです。
また、クルクル回したり、止めたりするのも簡単なメソッド呼び出しで実現出来ます。

(作るところ)
// インスタンスを作成する。
// initで指定するスタイルは、カスタマイズのところで説明を書きます。
UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];

// 現在のサブビューとして登録する
[self.viewaddSubview:indicator];

(動き始めたり、止めたりするところ)
// 動き始める
[indicator startAnimating];

// 停止させる
[indicator stopAnimating];

以上で、使えるようになります。




UIActivityIndicatorViewをカスタマイズする

ここでは、何個か利用パターンに合わせてカスタマイズする方法を記載したいと思います(・∀・)

表示位置を画面の中央にしたい

表示位置を変更する場合には、viewのframeプロパティを変更すればOKです。
画面中央に表示する例を記載します。
// インスタンスを作る
UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
    
// 画面の中央に表示するようにframeを変更する
float w = indicator.frame.size.width;
float h = indicator.frame.size.height;
float x = self.view.frame.size.width/2 - w/2;
float y = self.view.frame.size.height/2 - h/2;
indicator.frame = CGRectMake(x, y, w, h);
        
// クルクルと回し始める
[indicator startAnimating];
    
// サブビューに追加する
[self.view addSubview:indicator];


大きさを変更する

大きさは2種類用意されているようです。インスタンス作成時のスタイル指定で、大きさを指定できます。
// 通常サイズのUIActivityIndicatorViewを作成する
UIActivityIndicatorView *indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];

// 大きなUIActivityIndicatorViewを作成する
UIActivityIndicatorView *indicator = [[UIActivityIndicatorViewalloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];


色を変更する

色は自由に変更できるようです。colorプロパティに、好きな色のUIColorオブジェクトを設定します。
// 赤色にしてみる
indicator.color = [UIColorredColor];


クルクル停止時に非表示にしたい

処理が終了して、クルクルと回していたUIActivityIndicatorViewを止めた際に、 ついでに非表示にする設定があるようです。便利かも(*゚▽゚)ノ
indicator.hidesWhenStopped = YES;




参考資料

今回は、以下のクラスリファレンスを参照しました。詳細は以下をご参照ください。
UIActivityIndicatorView Class Reference




最後に

この便利なUIにもっと早く気付けば良かった。 前にUIImageを切り替えるアニメーションで、同様のものを自作してしまいました。
知識があるのと無いのとでの、作業効率の違いってこーゆうところからも生まれるんだなぁと感じた機能でした。
最後までご覧頂きましてありがとうございました(*゚▽゚)ノ






こんな記事もいかがですか?

RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。