UIWebViewの上にインジケーターを表示させる


こちらのサイトを参考にさせて頂きました。
さくらのあたま: iphoneアプリ UIWebviewを呼び出しながら、UIActivityIndicatorViewを表示する方法

ほぼコピペしたのですが、インジケーターが見辛かったので、半透明のグレーの四角形の中にインジケータを表示させることにしました。

interface部分にUIViewを追加しました。

UIView * indicatorBackView;
UIActivityIndicatorView * indicator;


実装部分はこちら
(layerを使っているのでQuartzCore.hのインポートが必要)

#import 

// .....

- (void)viewDidLoad
        // ....
        // webViewの設置などをここまでに行っておいて
        // 以下インジケーターの設置部分のみ
	indicatorBackView = [[UIView alloc] initWithFrame:CGRectMake((self.view.bounds.size.width/2)-50, (self.view.bounds.size.height/2)-60, 100, 100)];
	indicatorBackView.backgroundColor = [UIColor grayColor];
	indicatorBackView.alpha = 0.5;
	[[indicatorBackView layer] setCornerRadius:5.0];
	[self.view addSubview:indicatorBackView];
	
	indicator = [[UIActivityIndicatorView alloc]initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhiteLarge];
	indicator.frame = CGRectMake(indicatorBackView.bounds.size.width/2-20,indicatorBackView.bounds.size.height/2-20,40,40);
	[indicatorBackView addSubview:indicator];
}

//WEBの読み込みを開始したら
- (void)webViewDidStartLoad:(UIWebView*)aWebView {
	//インジケーターの表示
	indicatorBackView.hidden = NO;
	[indicator startAnimating];
	[UIApplication sharedApplication].networkActivityIndicatorVisible = YES;
}

//WEBの読み込み成功したら
- (void)webViewDidFinishLoad:(UIWebView*)aWebView {
	//インジケーターの非表示
	[indicator stopAnimating];
	indicatorBackView.hidden = YES;
	[UIApplication sharedApplication].networkActivityIndicatorVisible = NO;
}

//WEBの読み込みに失敗したら
- (void)webView:(UIWebView*)aWebView
didFailLoadWithError:(NSError*)error {
	//インジケーターの非表示
	[indicator stopAnimating];
	indicatorBackView.hidden = YES;
}


のようにしました。

実行すると、ページ読み込み時にはこのように表示されます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です