TOKOROM BLOG

iOSとかVimとかその他日々の雑多な技術情報

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

Permalink

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

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

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

と記載されています。

その一方で、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に変更するだけです。

1
2
3
4
5
6
7
8
9
10
// #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種のスタイルを選択できます。

外観の変更

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// #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を使う場合

1
2
// Podfile
pod 'SSGentleAlertView'

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

1
pod install

を実行するだけです。

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

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

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

Comments