[iOS][Objective-C] 数値入力をベンリでクールにしてくれる SimpleNumpad

ios_ui

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

はじめに

iOS Simulator Screen Shot Aug 10, 2015, 14.02.02

数値入力シーンでは、UITextField を使った数値入力が使われることも多いと思います。UITextField のインスタンスのプロパティ keyboardTypeUIKeyboardTypeNumberPad にすると、こんな表示になります。

ただ、Enter キーが標準では用意されていないため自分で作成しなければなりません。また、見た目的にもうちょっと変えたいなと思うことがあるのではないでしょうか。

iOS Simulator Screen Shot Aug 10, 2015, 15.13.16

そこで、今回は、札幌のnotoroidさんが制作された、チョットした数値入力をベンリでクールにする、SimpleNumpad をご紹介します。Enter キーは最初からついていますし、見た目を変えることもできます。

今回は、プロジェクトに SimpleNumpad を導入し、カンタンなサンプルを作成するところまでをご紹介します。

プロジェクト作成と pod install

Screen Shot 2015-08-07 at 15.29.05

Single View Application テンプレートを使ってプロジェクトを作成します。

次に、プロジェクトフォルダ内に Podfile を作成します。

pod 'SimpleNumpad', :git => 'https://github.com/notoroid/SimpleNumpad.git'

上記を Podfile に追加し、pod install します。

一旦プロジェクトを閉じ、(プロジェクト名).xcworkspace ファイルを開きましょう。

Storyboard

Screen Shot 2015-08-10 at 16.03.58

シンプルに、UILabel で数値の表示欄を作りました。

ViewController

#import <SimpleNumpad/SimpleNumpad.h>

@interface ViewController () <IDPNumpadViewControllerDelegate>

@property (nonatomic) IDPNumpadViewController *numpadViewController;

@property (weak, nonatomic) IBOutlet UILabel *numberLabel;

SimpleNumpad.himport し、IDPNumpadViewControllerDelegate に適合していることを宣言しています。IDPNumberpadViewController 型の numpadViewController (とアクセサ)を宣言しています。

また、数値を表示するためのラベルを宣言しています。これは Storyboard 上のラベルとリンクしています。

viewDidLoad

    self.numpadViewController = [IDPNumpadViewController numpadViewControllerWithStyle:IDPNumpadViewControllerStyleCalcApp inputStyle:IDPNumpadViewControllerInputStyleNumber showNumberDisplay:false];
    self.numpadViewController.delegate = self;

IDPNumpadViewController 型のインスタンスを生成しています。指定イニシャライザを使い、ナンバーパッドのスタイルなどを設定しています。その後、デリゲートのセットを行っています。

スタイル名 テーマカラー・配色
IDPNumpadViewControllerStyleDefault
IDPNumpadViewControllerStyleStandard iOS 標準の電卓アプリのような配色
IDPNumpadViewControllerStylePro 灰色
IDPNumpadViewControllerStyleRetro
IDPNumpadViewControllerStyleMelancholy 水色
IDPNumpadViewControllerStyleMemories
IDPNumpadViewControllerStyleFusion
IDPNumpadViewControllerStylePeach
IDPNumpadViewControllerStyleGreen 黒・緑
IDPNumpadViewControllerStylePurple 黒・紫
IDPNumpadViewControllerStyleCalcApp iOS 標準の電卓アプリのような配色

Screen Shot 2015-08-10 at 15.27.11

スタイルは豊富に用意されています。作者の notoroid さんによると、新しいスタイルについて募集中だそうです。SimpleNumpad の中身を見て、GitHub ページからプルリクエストを送ってみると良いかもしれません。

notoroid/SimpleNumpad - GitHub

ナンバーパッドの表示・非表示関連

- (void)showNumberPad
{
    [self presentViewController:self.numpadViewController animated:true completion:^{

    }];
}

- (void)dismissNumberPad
{
    [self dismissViewControllerAnimated:true completion:^{

    }];
}

UIViewControllerpresentViewController:animated:completion: でナンバーパッドを表示し、dismissViewControllerAnimated:completion: で非表示にします。 画面表示と同時に表示したい場合は、viewDidAppear: などに表示の記述するとよいでしょう。

デリゲートメソッド

// ナンバーパッド内部の値が変更された時に呼ばれる
- (void) numpadViewControllerDidUpdate:(IDPNumpadViewController *)numpadViewController {
    NSInteger value = (NSInteger)(numpadViewController.value);
    [self.numberLabel setText:[NSString stringWithFormat:@"%ld", value]];
}

IDPNumpadViewController は、内部に入力値のプロパティを持ち、キーが押された際、電卓のように1桁ずつ数値を更新していきます。numpadViewControllerDidUpdate: はそうして内部の数値が変化した際に呼ばれます。IDPNumpadViewController 内に数値表示欄を簡単に表示することもできますが、今回は、値がアップデートされた時点でラベルを更新することで、数値表示を実現します。

// Enterキーが押された時呼ばれる
- (void)numpadViewControllerDidEnter:(IDPNumpadViewController *)numpadViewController
{
    self.value = numpadViewController.value;
    [self dismissNumberPad];
    NSString *message = [NSString stringWithFormat:@"IDを確認しました。\n%ld", (NSInteger)(self.value)];
    UIAlertController *alertController = [UIAlertController alertControllerWithTitle:@"入力完了" message:message preferredStyle:UIAlertControllerStyleAlert];
    [alertController addAction:[UIAlertAction actionWithTitle:@"OK" style:UIAlertActionStyleDefault handler:^(UIAlertAction *action) {
        [self showNumberPad];
    }]];
    [self presentViewController:alertController animated:true completion:^{
    }];
}

Enter が押されると、numpadViewControllerDidEnter: が呼ばれます。今回は、アラートを表示し、その内部に入力した値を表示します。

使ってみる

ボタンのアニメーションがとても滑らかでいい感じです。実機でタップすると、ソフトタッチのキーを押し込んでいる感覚が得られます。いいですね!

まとめ

SimpleNumpad は手軽に数値入力シーンをリッチにしてくれる OSS です。標準のナンバーパッドスタイルなキーボードのかわりに SimpleNumpad を検討してみてはいかがでしょうか。