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

はじめに

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

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

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

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

プロジェクト作成と pod install

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

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

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

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

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

Storyboard

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

ViewController

#import <SimpleNumpad/SimpleNumpad.h>

@interface ViewController () <IDPNumpadViewControllerDelegate>

@property (nonatomic) IDPNumpadViewController *numpadViewController;

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

SimpleNumpad.h を import し、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 標準の電卓アプリのような配色

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

notoroid/SimpleNumpad - GitHub

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

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

    }];
}

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

    }];
}

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

デリゲートメソッド

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

IDPNumpadViewController は、内部に入力値のプロパティを持ち、キーが押された際、電卓のように１桁ずつ数値を更新していきます。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 を検討してみてはいかがでしょうか。