UIView、UILabel、UIActivityIndicatorViewで「読み込み中」を表示してみる

インジケーターをくるくるさせて、何らかの処理中であることを知らせるためのビューを作った際のメモ。

こういったライブラリは以下のようなものが既にあります。

• MBProgressHUD - GitHub
• SVProgressHUD - GitHub

実際はライブラリを使ったほうが良いと思いますが、今回はちょっとやってみたくなったので。

完成図

開発環境、プロジェクト

開発環境は、Xcode4.3.3、エミュレータはiPhone iOS5.1です。プロジェクトは「Single View Application」を選択。

ソースコード

Viewの角を丸くするのには「QuartzCore.framework」を使用します。プロジェクトへの追加をお忘れなく。

ViewController.h

#import <QuartzCore/QuartzCore.h>

@interface ViewController : UIViewController{
  UIView *_loadingViewGround;
  UIView *_loadingView;
  UIActivityIndicatorView *_indicator;
  UILabel *_yomikomi_label;
}

ViewController.m

/*** インジケーターをスタートさせるメソッド ***/
-(void) indicatorStart
{
    /*下地*/
    _loadingViewGround = [[UIView alloc] initWithFrame:[[self view] bounds]];
    [self.view addSubview:_loadingViewGround];
    
    /*土台*/
    _loadingView = [[UIView alloc] initWithFrame:CGRectMake(60,100,200,110)];  //適当なサイズと位置指定
    [_loadingView setBackgroundColor:[UIColor viewFlipsideBackgroundColor]];  //背景色
    _loadingView.layer.cornerRadius = 10;  //Viewの角を丸くする
    _loadingView.clipsToBounds = YES;
    [_loadingView setAlpha:0.8];  //透明
    [_loadingViewGround addSubview:_loadingView];  //表示
    
    /*インジケーター*/
    _indicator = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];  //インジケーターのサイズ指定
    [_indicator setFrame:CGRectMake (79, 15, 40, 40)];  //適当なサイズと位置指定
    [_loadingView addSubview:_indicator];  //表示
    
    /*ラベル*/
    _yomikomi_label = [[UILabel alloc] initWithFrame:CGRectMake(-23, 26, 250,90)];  //適当なサイズと位置指定
    _yomikomi_label.text = @"読み込み中...";    //表示テキストの指定
    _yomikomi_label.font = [UIFont fontWithName:@"Arial Rounded MT Bold" size:18.0f];  //フォント指定
    _yomikomi_label.textAlignment = UITextAlignmentCenter;  //テキストをセンター指定
    _yomikomi_label.backgroundColor = [UIColor clearColor];  //背景色
    _yomikomi_label.textColor = [UIColor whiteColor];  //テキストカラー
    [_loadingView addSubview:_yomikomi_label];  //表示

    [_indicator startAnimating];  //インジケーター スタート
    
}

/*** インジケーターをストップさせるメソッド ***/
-(void) indicatorStop
{
    [_indicator stopAnimating];  //インジケーター ストップ
    [_loadingViewGround removeFromSuperview];
    [_loadingView removeFromSuperview];
    
    [_loadingViewGround release];
    [_loadingView release];
    [_yomikomi_label release];
    [_indicator release];
}

読み込み中を表示させる際は、読み込み中に処理させたいメソッドなどを、上で作成したindicatorStartメソッドとindicatorStopメソッドで挟むようにして呼ぶようにしてください。

今回のソース

準備中

おわり

今回作ったものをクラス化してどこからでも呼べるようにすれば使い勝手が上がりますが、素直にライブラリ使いましょう（笑）