UIWebViewのロード中にインジゲータを表示する

UIWebViewのロード中にUINavigationBarの右アイテムにインジゲータを表示させる方法を紹介します。

UIWebViewにURLを指定するなどして、ウェブページの読み込みをおこなうとwebViewDidStartLoad:メソッドが呼ばれます。このタイミングでUIActivityIndicatorViewをナビゲーションバーの右アイテムに設定します。

 -(void)webViewDidStartLoad:(UIWebView*)webView
{ 
     UIActivityIndicatorView *actInd 
        = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite]; 
     UIBarButtonItem *actItem = [[UIBarButtonItem alloc] initWithCustomView:actInd]; 
     self.navigationItem.rightBarButtonItem = actItem; 
     [actInd startAnimating]; 
     [actInd release]; 
     [actItem release];
 }

読み込みが完了した時点で、以下のコードのようにナビゲーションバーの右アイテムを空にします。

- (void)webView:(UIWebView*)webView didFailLoadWithError:(NSError*)error
{
    self.navigationItem.rightBarButtonItem = nil;
}

自動継続課金プロダクトの実装例「AKB48」

おそらく国内で初めて自動継続課金を実装したアプリである「AKB48」の例をとって、どのように課金処理をおこなっているかスクリーンショットを交えて紹介していきます。

ブログを見ようとすると会員になる必要があるとアラートがでます。これはアプリ側が出しているアラートです。「はい」をタップすると、月額会員になろう画面が表示されます。

月額会員になろう画面では、月額会員になるための月額会員になるボタンとリストアボタンが用意されています。アプリ内課金を実装する際には、必ずリストア機能を実装していなければいけません。

iTunesから見た自動継続課金プロダクト

iTunesで自動継続課金プロダクトがどのように表示されているのか調べてみましょう。

UINavigationBar上でセグメンテッドボタンを使う

NavigationBarにUISegmentedControlを設置する方法を紹介します。

// セグメンテッドコントロールに表示する文字列を定義する
NSArray* items = [NSArray arrayWithObjects:@"写真", @"地図", nil];
 
// セグメンテッドコントロールのインスタンス生成とプロパティの設定
UISegmentedControl* segControl = [[[UISegmentedControl alloc] initWithItems:items] autorelease];
segControl.selectedSegmentIndex = 1;
segControl.frame = CGRectMake(0,0,100,30);
 
// NavigationBarに設定できるようにUIBarButtonItemのsubviewに設定する
UIBarButtonItem* segItem = [[[UIBarButtonItem alloc] initWithCustomView:segControl] autorelease];
self.navigationItem.rightBarButtonItem = segItem;

実行すると下図のように表示されます。

UITableViewに背景画像を設定する

UITableViewに背景を設定してみましょう。

画像をソースにしてパターン画像を作って(UIColor colorWithPatternImageメソッド)、設定すると駄目にスクロールさせた時にセルの表示が残念な事になってしまいます。

tableView:UITableView:cellForRowAtIndexPath:NSIndexPathメソッドで、cellのtextLabelのbackgroundColorプロパティに透過色を設定します。これでセルの背景は透明となります。

-(void) tableView:(UITableView *)tableView willDisplayCell:(UITableViewCell *)cell forRowAtIndexPath:(NSIndexPath *)indexPath
{
    cell.textLabel.backgroundColor = [UIColor clearColor];
}

viewDidLoadメソッドで、TableViewの画像を任意の背景画像へ設定します。

// 背景に画像を設定する
UIImage* image = [UIImage imageNamed:@"woo_001.jpg"];
UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
[self.tableView setBackgroundView:imageView];
[imageView release];

これで一通り完了。あとは、見栄えを良くするためのシャドーを設定しておきましょう。tableView:UITableView:cellForRowAtIndexPath:NSIndexPathメソッドで、以下のような設定をおこないます。

cell.textLabel.shadowColor = [UIColor whiteColor];
cell.textLabel.shadowOffset = CGSizeMake(0.0, 1.0);