QuickDialogを用いて簡単にダイアログを作成・表示する

QuickDialogはUITableViewを使わないで簡単にダイアログを作成・表示するiOS用のライブラリで、Apacheライセンスで配布されています。

本記事ではQuickDialogの導入と利用の手順を簡単に説明します。なお、自動参照カウント(ARC)を利用しているので利用にはXCode 4.2 betaが必要です。

導入

1. GitHub for Macをインストールします。

2. GitHubのQuickDialogへ行き、Clone in Macをクリックします。

3. GitHub for Macが起動して必要な設定を埋めてくれているので[OK]をクリック。

4. プロジェクトを作成します。
5. プロジェクトに先ほどCloneしたQuickDialog内のフォルダquickdialogを追加します。
6. プロジェクトの[Build Phase]→[Link Binary with Libraries]にMapKit.Frameworkを追加します。
7. sample/quickdialogexample-Prefix.pchを参考に、Foobar-Prefix.pchに次のようなimportを追加します。

   #import "QuickDialogController.h"
   #import "QuickDialogController+Loading.h"
   #import "QuickDialogStyleProvider.h"
   #import "QLabelElement.h"
   #import "QBadgeElement.h"
   #import "QBooleanElement.h"
   #import "QButtonElement.h"
   #import "QDateTimeInlineElement.h"
   #import "QFloatElement.h"
   #import "QMapElement.h"
   #import "QRadioElement.h"
   #import "QRadioItemElement.h"
   #import "QTextElement.h"
   #import "QWebElement.h"
   #import "QDecimalElement.h"
   #import "QSortingSection.h"
   #import "QDateTimeElement.h"
   

利用法

次のように、QRootElementにいろいろ要素を追加していき、最後にこれを用いてQuickDialogControllerを作成します。

QRootElement* root = [[QRootElement alloc] init];
root.grouped = YES;
root.title = @"ダイアログサンプル";

QSection* detailsSection = [[QSection alloc] initWithTitle:@"いろいろサンプル"];     
[root addSection:detailsSection];

QFloatElement* q1 = [[QFloatElement alloc] initWithTitle:@"スライダー" value:1];
[detailsSection addElement:q1];

QDecimalElement* q2 = [[QDecimalElement alloc] initWithTitle:@"10進数" value:0.25];  
[detailsSection addElement:q2];

QBadgeElement* q3 = [[QBadgeElement alloc] initWithTitle:@"バッジ付き" Value:@"Foo"];
q3.badge = @"1";
[detailsSection addElement:q3];

QBooleanElement* q4 = [[QBooleanElement alloc] initWithTitle:@"Boolean" BoolValue:TRUE];
[detailsSection addElement:q4];

QDateTimeInlineElement* q5 = [[QDateTimeInlineElement alloc] initWithTitle:@"時間" date:[NSDate date]];
[detailsSection addElement:q5];

QuickDialogController* qcont = [[QuickDialogController alloc] initWithRoot:root];
UINavigationController* navigation = [[UINavigationController alloc] initWithRootViewController:qcont];
[self presentModalViewController:navigation animated:YES];

これで次のようなビューが作成されます。

Blocksを用いてビューが消える時のコールバックを設定することもできます。

q1.key = @"slider-value";
q2.key = @"decimal-value";
q3.key = @"badge-value";
q4.key = @"bool-value";
q5.key = @"time-value";

qcont.willDisappearCallback = ^() {
    NSMutableDictionary *dict = [[NSMutableDictionary alloc] init];
    [root fetchValueIntoObject:dict];

    NSString *msg = @"Values:";
    for (NSString *aKey in dict){
        msg = [msg stringByAppendingFormat:@"\n- %@: %@", aKey, [dict valueForKey:aKey]];
    }
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Hello"
                                                message:msg delegate:self cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [alert show];
};

これで、ビューが消えるときに次のようなアラートが表示されます。

テーブルのセルには時間やマップを扱えるものがあります。QuickDialog内にサンプルがありますので試してみるとよいでしょう。

まとめ

QuickDialogの導入と利用について簡単に説明しました。

関連項目

• escoz/QuickDialog - GitHub
• GitHub for Mac