読者です 読者をやめる 読者になる 読者になる

Sakabou Apps

Sakabou Inc.製アプリのサポートブログ。

UIAlertViewに画像を載せる方法

技術

f:id:y_sakaki:20110603175011p:image

ゲーム2作目もあと少しで完成というところまできました。
今回はゲーム内のチュートリアルとして、UIAlertViewに画像で表示させてみました。

Cocoaの日々: [iOS] UIAlertView 上に UIProgressView を載せる [2] キャンセルボタン表示

こちらの記事を参考にしています。
というか、UIProgressViewがUIImageViewになっただけで、ほぼそのままです。



まず、表示させたい画像を用意します。
今回は、260x300 pxの画像を用いました。
これでタイトルとメッセージ、ボタンと合わせて大体画面いっぱいくらいになります。

やり方としては、
1.UIAlertViewDelegate を設定しておく
2.AlertView に 表示させたい UIImageView を addSubView する
3.アラート表示前に、下記メソッドが呼ばれるので、ここで位置調整をする

- (void)willPresentAlertView:(UIAlertView *)alertView;

といった感じです。


具体的には、

@interface hogehogeController : UIViewController<UIAlertViewDelegate> {

としてデリゲートを設定。

UIAlertViewに画像を配置。

    UIAlertView* alert = [[[UIAlertView alloc]initWithTitle:@"Tutorial"
                                                    message:@"You got Slide & Attack."
                                                   delegate:self
                                          cancelButtonTitle:nil
                                          otherButtonTitles:@"OK", nil
                           ]autorelease];
    alert.tag = 2;
    UIImageView* image = [[UIImageView alloc]initWithImage:[UIImage imageNamed:@"tutorial2.png"]];
    image.center = CGPointMake(142, 194);
    [alert addSubview:image];
    [alert show];
    [image release];

画像の位置は、高さが44pxとなるようにしています。
これは、メッセージの高さが45pxのため、そのちょっと上にしてます。


-willPresentAlertView で大きさや位置を調整

- (void)willPresentAlertView:(UIAlertView *)alertView{
    if (alertView.tag == 2) {
        CGRect frame = alertView.frame;
        frame.origin.y = 20;
        frame.size.height = 450;
        alertView.frame = frame;
        
        for (UIView* view in alertView.subviews){
            frame = view.frame;
            if (frame.origin.y > 44) {
                frame.origin.y += 310;
                view.frame = frame;
            }
        }
    }
}

大きさを変更して、画像より下のViewをずらしています。
ちなみに、タイトル・メッセージ・ボタンひとつのときのheightは、
それぞれ、15, 45, 82 となっています。
今回はメッセージとボタンを移動させました。
tagを指定しているのは、大きさを変えたくないアラートもあるためです。
他にアラートを出さないのであれば必要ありません。

簡単に出来て、見栄えもそれほど悪くないので、結構使えそうです。