2011/09/04

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を追加します。
    ?
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    #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を作成します。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
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を用いてビューが消える時のコールバックを設定することもできます。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
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の導入と利用について簡単に説明しました。

関連項目

ラベル: ,

0 件のコメント:

コメントを投稿

注: コメントを投稿できるのは、このブログのメンバーだけです。

登録: コメントの投稿 (Atom)