UIAlertViewよりもおとなしいメッセージダイアログを利用する

この記事は投稿日から1年以上が経過しています。

UIAlertViewは警告目的のダイアログ

そもそもUIAlertViewはエンドユーザになんらかの警告をするときに利用するもので、iOSヒューマンインターフェースガイドラインにも、

一般にアラートは、次のような場合には不要です。
* なんらかの情報、特にアプリケーションの標準機能に関する情報を目に付かせるためだけの場合。
  代わりに、アプリケーションのスタイルに調和し、目を引く情報表示の方法を設計すべきです。

と記載されています。

その一方で、UIAlertViewは簡単に利用でき、なんらかの情報を表示するのにどうしても使いたくなってしまいます。
それならばUIAlertViewの外観を変えて使えば、というのも考えられますが、ところがどっこいUIAlertViewはAppearanceの変更を一切サポートしていません。

警告目的のアラートダイアログの外観がアプリによって変更されると、エンドユーザからすればそれがなんらかの警告であると認知しづらくなってしまうからだと思われます(アラートダイアログについては全アプリで共通であるべきという思想)。

警告目的ではない普通のメッセージダイアログ

それでは、警告目的でない汎用的に使える普通のメッセージダイアログがあったほうが良いねという話になり、作ってみました。

https://github.com/tokorom/SSGentleAlertView

このSSGentleAlertViewは、

  • UIAlertViewと同じコードで利用できる
  • UIAlertViewとは違い、外観を変更できる
  • デフォルトではUIAlertViewよりもおとなしめなダイアログ表示になる

という3点に留意して作っています。

画像パーツやカラーリングなどはUIデザイナの Atsushi Morino さんに作ってもらってるのでちゃんとしてます。

外観

自分でカスタマイズしない場合でも、次の3種のスタイルが選べます。

Default

SSGentleAlertViewDefault

Black

SSGentleAlertViewBlack

Native

SSGentleAlertViewNative

サンプルコード

UIAlertViewを使うときのコードのUIAlertViewの部分をSSGentleAlertViewに変更するだけです。

// #import "SSGentleAlertView.h"

SSGentleAlertView* alert = [SSGentleAlertView new];
alert.delegate = self;
alert.title = @"SSGentleAlertView";
alert.message = @"This is GentleAlertView!\nUIAlertView is too strong to use for ordinary messages.";
[alert addButtonWithTitle:@"Cancel"];
[alert addButtonWithTitle:@"OK"];
alert.cancelButtonIndex = 0;
[alert show];

なお、インスタンスを作る際に[[SSGentleAlertView alloc] initWithStyle:SSGentleAlertViewStyleBlack] のようにすることで、3種のスタイルを選択できます。

外観の変更

また、外観を変更することも簡単にできます。例えば、

// #import "SSGentleAlertView.h"
// #import "SSDialogView.h"

// 背景画像を別のものに差し替え
alert.backgroundImageView.image = [UIImage imageNamed:@"dialog_bg"];
// ダイアログ部分の画像はなしにする
alert.dialogImageView.image = nil;

// タイトルラベルとメッセージラベルの色を変更
alert.titleLabel.textColor = [UIColor colorWithRed:1.0 green:0.5 blue:0.0 alpha:1.0];
alert.titleLabel.shadowColor = UIColor.clearColor;
alert.messageLabel.textColor = [UIColor colorWithRed:0.4 green:0.2 blue:0.0 alpha:1.0];
alert.messageLabel.shadowColor = UIColor.clearColor;

// ボタンの背景画像とフォント色を変更
UIButton* button = [alert buttonBase];
[button setBackgroundImage:[SSDialogView resizableImage:[UIImage imageNamed:@"dialog_btn_normal"]] forState:UIControlStateNormal];
[button setBackgroundImage:[SSDialogView resizableImage:[UIImage imageNamed:@"dialog_btn_pressed"]] forState:UIControlStateHighlighted];
[button setTitleColor:UIColor.whiteColor forState:UIControlStateNormal];
[button setTitleColor:UIColor.whiteColor forState:UIControlStateHighlighted];
[alert setButtonBase:button];
[alert setDefaultButtonBase:button];

のようにすると、いつものUIAlertViewとは全く別もののダイアログに変更することも可能です。

SSGentleAlertViewCustomize

インストール方法

CocoaPodsを使う場合

// Podfile
pod 'SSGentleAlertView'

Podファイルに上記を追記して

pod install

を実行するだけです。

Gitやその他の方法でインストールする場合

git clone git://github.com/tokorom/SSGentleAlertView.git
// git submodule add git://github.com/tokorom/SSGentleAlertView.git Externals/SSGentleAlertView

や、その他の方法でSSGentleAlertViewをダウンロードしてください。 ダウンロードしたら、SSGentleAlertViewというサブディレクトリをXcodeのプロジェクトに追加してください。

所の執筆・監修した書籍

iOS 11 Programming

iOS 11 Programming

  • 著者:堤 修一,吉田 悠一,池田 翔,坂田 晃一,加藤 尋樹,川邉 雄介,岸川 克己,所 友太,永野 哲久,加藤 寛人,
  • 製本版,電子版
  • PEAKSで購入する