XcodeでUIActionSheetを追加する方法【初心者向け】

XcodeでUIパーツを追加することで、より使いやすいiPhoneアプリを開発することができます。そんなUIパーツのうち、「UIActionSheet（アクションシート）」を追加する方法を初心者向けに解説した記事です。

コードの入力も必要ですが、難しい内容ではないのでぜチャレンジしてください。

 

なお本記事は、TechAcademyのiPhoneアプリ開発オンラインブートキャンプの内容をもとに紹介しています。

 

UIActionSheetとは

UIActionSheetは、ユーザーに対して複数の選択肢を提示して、ユーザーがアクションを選択するものです。

文字で説明するよりもこちらの画像を見ていただく方がイメージが湧くと思います。

 

サンプル1

この画像では、メールアプリを想定しており、「返信」「転送」「キャンセル」の3つを選択肢として提示した場合です。

 

サンプル2

この例では、削除の確認をする画面です。

この時、「削除」ボタンは目立つ色に設定し、かつ一番上に配置するようにアップルのガイドラインに定められています。

 

このようにユーザーにアクションを選択させる場合や、アクションの確認を取る場合にUIActionSheet使います。

 

 

UIActionSheetの実装方法

UIActionSheetが何かを理解したら、実装していきましょう。

UIActionSheetはUIKitの部品をStoryboardでViewにドロップして作成するわけではありませんので、ソースコードを記述する必要があります。先ほど紹介したサンプル1と2を使って実際にどのように記述するのか紹介します。

 

サンプル1の実装方法

サンプルとして、Toolbarを配置してToolbar ButtonItemがタップされた時にUIActionSheetを表示する方法を説明します。

Storyboardでこの画像のようにToolbarとToolbar ButtonItemを配置します。Toolbar Button Itemの種類はActionにしました。

 

ToolbarからUIActionSheetを表示させる必要があるので、IBOutletを作成します。Toolbarを選択してヘッダーファイルに右クリックでドラッグして命名してください。

ドラッグすると下記のコードが自動的に生成されます。

@property (weak, nonatomic) IBOutlet UIToolbar *toolBar;

 

ここで、ToolBar ButtonItemがタップされたことを検知する必要がありますので、同様に右クリックでヘッダーファイルにドラッグしてIBActionを作成します。

先ほどと同じように、下記のコードが自動的に生成されます。

– (IBAction)showActionSheet:(id)sender;

 

また、アクションシートのボタンがタップされた時の処理を自分自身で行いますので、UIActionSheetDelegateを設定します。

@interface ViewController : UIViewController

 

さらに、.mファイルに下記のコードができています。

– (IBAction)showActionSheet:(id)sender
{
}

 

この中に以下のコードを記述します。

UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:nil delegate:self cancelButtonTitle:@”キャンセル” destructiveButtonTitle:nil otherButtonTitles:@”返信”, @”転送”, nil];[actionSheet showFromToolbar:_toolBar];

ここで、UIActionSheetのインスタンスを生成します。タイトルはなし、delegateはselfとします。キャンセルボタンは扱いが特殊ですので、cancelButtonTitleに表示する文字列を設定します。

続いて、otherButtonTitlesにユーザーが選択可能なアクションを記述します。nilでターミネートするのを忘れないでください。今回は「返信」と「転送」を用意しました。

 

最後にUIActionSheetを表示しています。今回はToolbarから表示していますので、「showFromToolbar:」としていますが、他にもTabBarの場合は「showFromTabBar:」を、どちらもない場合は「showInView:self.view」のように記述します。

 

 

二つ目のサンプルの作成

二つ目のサンプルは「取り扱い注意」のアクションを含むUIActionSheetです。

前述の通り、目立つ色でアクションシートの一番上に表示するように、Appleのガイドラインで定められています。この場合には「destructiveButtonTitle」を使います。

 

.mファイル中の下記のコードを変更します。

– (IBAction)showActionSheet:(id)sender
{
}

 

変更後はこうなります。

UIActionSheet *actionSheet = [[UIActionSheet alloc]initWithTitle:nil delegate:self cancelButtonTitle:@”キャンセル” destructiveButtonTitle:@”削除” otherButtonTitles: nil];
[actionSheet showFromToolbar:_toolBar];

destructiveButtonTitleに値を設定することにより、一番上に目立つ状態で表示されます。

 

 

[PR] iPhoneアプリの開発で挫折しない学習方法を動画で公開中

delegate処理

ここまで実装方法を説明してきましたが、今のままではボタンを押しても何も反応しません。ボタンが押された時に、どういう処理をするかはdelegateメソッドに記述する必要があります。

サンプル1の場合、「replyMail」と「forwardMail」というメソッドが用意されていると仮定すると下記のようになります。

– (void)actionSheet:(UIActionSheet *)actionSheet clickedButtonAtIndex:(NSInteger)buttonIndex
{
switch (buttonIndex) {
case 0:
[self replyMail];
break;
case 1:
[self forwardMail];
break;
default: break; } }

一つ目のボタン（返信）がタップされたらreplyMailを、二つ目のボタン（転送）がタップされたらforwardMailを、それぞれ呼び出します。

キャンセルの場合は特に何も処理をしなくて良いはずなので、その記述は特にしていません。

buttonIndexも0オリジンであることに気を付けてください。

 

これで、UIActionSheetを追加する方法の説明は以上です。

他のパーツも追加したい場合は、UIAlertView追加する方法も合わせてご覧ください。

[お知らせ]TechAcademyでは初心者でも8週間でオリジナルアプリが作れるiPhoneアプリ開発オンラインブートキャンプを開催しています。