アクションシートの基本をマスター:UIActionSheet

UIActionSheetとは

下図のようにスッと出てくる選択画面です。
UIActionSheet01

UIActionSheetの使い方

ボタンをタップすると、アクションシートが出る
サンプルプログラムを作ってみます。

まず、ヘッダーファイルに以下の一行を追加します。
このデリゲートがないとアクションシートで選択しても何も起きません。

#import <UIKit/UIKit.h>

@interface TestViewController : UIViewController

<UIActionSheetDelegate>

@end

 

次に、ボタンの設置をします。


-(void)BtnPush:(UIButton*)button{
    NSLog(@"ボタンが押されました");
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //ボタンの生成と配置
    //詳しくはUIButtonの説明ページを参照
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [btn setFrame:CGRectMake(110,210,100,40)];
    [btn setTitle:@"テストボタン" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [btn addTarget:self
            action:@selector(BtnPush:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
        
}

 

ボタンがタップされたときに呼び出されるメソッド内に、
次のようにしてアクションシートを生成します。

-(void)BtnPush:(UIButton*)button{
    NSLog(@"ボタンが押されました");
    
    //アクションシートの生成と設定
    UIActionSheet *sheet = [[UIActionSheet alloc] init];
    
    //デリゲートをセット
    sheet.delegate = self;
    
    //タイトルとボタンの文言設定
    sheet.title = @"選択してください。";
    [sheet addButtonWithTitle:@"ボタン0"];
    [sheet addButtonWithTitle:@"ボタン1"];
    [sheet addButtonWithTitle:@"ボタン2"];
    [sheet addButtonWithTitle:@"ボタン3"];
    
    //赤ボタンをボタン0に設定
    sheet.destructiveButtonIndex = 0;
    
    //キャンセルボタンをボタン3に設定
    sheet.cancelButtonIndex = 3;
    
    //アクションシートのスタイルを
    sheet.actionSheetStyle = UIActionSheetStyleBlackTranslucent;
    
    //アクションシートを表示
    [sheet showInView:self.view];
    [sheet release];
    
}

アクションシートのポイントをまとめておきます。

  • 変数名.title = @”XXX”; でタイトルセット
  • [変数名 addButtonWithTitle:@"XXX"]; でボタン追加
  • アクションシートではセットしたボタン順に0から順番に番号がふられます。
    sheet.destructiveButtonIndex = ボタン番号; で赤いボタンを指定
    sheet.cancelButtonIndex = ボタン番号; でキャンセルボタンを指定
  • sheet.actionSheetStyle = スタイル名; でアクションシートの見た目を変更
    UIActionSheetStyleBlackTranslucent・・・後ろが半透明
    UIActionSheetStyleBlackOpaque・・・黒背景
    UIActionSheetStyleDefault・・・デフォルト

 

最後に、アクションシートのボタンがタップされた後、
自動で呼び出されるデリゲートメソッドを書きます。

ポイントは、ボタン番号をswitch文により振り分けることで、
それぞれの動作を記述できることです。

-(void)BtnPush:(UIButton*)button{
    NSLog(@"ボタンが押されました");
    
    //アクションシートの生成と設定
    UIActionSheet *sheet = [[UIActionSheet alloc] init];
    
    //デリゲートをセット
    sheet.delegate = self;
    
    //タイトルとボタンの文言設定
    sheet.title = @"選択してください。";
    [sheet addButtonWithTitle:@"ボタン0"];
    [sheet addButtonWithTitle:@"ボタン1"];
    [sheet addButtonWithTitle:@"ボタン2"];
    [sheet addButtonWithTitle:@"ボタン3"];
    
    //赤ボタンをボタン0に設定
    sheet.destructiveButtonIndex = 0;       
    
    //キャンセルボタンをボタン3に設定
    sheet.cancelButtonIndex = 3;
    
    //アクションシートのスタイルを
    sheet.actionSheetStyle = UIActionSheetStyleDefault;
    
    //アクションシートを表示
    [sheet showInView:self.view];
    [sheet release];
    
}

-(void)actionSheet:(UIActionSheet*)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex {
    
    switch (buttonIndex) {
        case 0:
            //1番目のボタン(cancelButtonTitle)が押されたときのアクション
            NSLog(@"1番目");
            self.view.backgroundColor = [UIColor greenColor];
            break;
            
        case 1:
            //2番目のボタンが押されたときのアクション
            NSLog(@"2番目");
            self.view.backgroundColor = [UIColor redColor];
            break;
            
        case 2:
            //3番目のボタンが押されたときのアクション
            NSLog(@"3番目");
            self.view.backgroundColor = [UIColor blueColor];
            break;
            
        case 3:
            //4番目のボタンが押されたときのアクション
            NSLog(@"4番目");
            self.view.backgroundColor = [UIColor yellowColor];
            break;
    }
    
}

- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
    //ボタンの生成と配置
    //詳しくはUIButtonの説明ページを参照
    UIButton *btn = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [btn setFrame:CGRectMake(110,210,100,40)];
    [btn setTitle:@"テストボタン" forState:UIControlStateNormal];
    [btn setTitleColor:[UIColor redColor] forState:UIControlStateNormal];
    [btn addTarget:self
            action:@selector(BtnPush:) forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:btn];
       
}

今回は、アプリの背景色を変えるようにしてみました。
シミュレータで実行し、以下のように背景色を変えることができます。
UIActionSheet02

コメントを残す

サブコンテンツ

このページの先頭へ