【iOS開発】UIKeyboardTypeNumberPadの上部にReturnボタンを実装する話

【iOS開発】UIKeyboardTypeNumberPadの上部にReturnボタンを実装する話

iOS開発でテキストエリアをタップした際にキーボードが出てくるという仕様。
どのようなアプリにでもありえる仕様ですが、Objective-Cでこれを実現しようとするといくつかの罠がある。
世の中に存在する情報をかき集めても上手く罠抜けが出来ず、苦労したので上手く行ったコードを1つの記事にまとめて記録しておきます。

 

罠とは

UITextFieldでキーボードの種類を”UIKeyboardTypeNumberPad”に設定した人は誰しも陥る罠。

らいか
あれ・・?「Return」キーが無いぞ

調べてみるとUIToolbarをStoryBoardではなくViewDidLoad内に記述することで回避できる。というのが回避方法っぽかったのでそれを採用することに。
目指すべきゴールはここ。

【iOS開発】UIKeyboardTypeNumberPadの上部にReturnボタンを実装する話

この画像のようにテンキーの上に閉じるボタンと決定ボタンを実装すること。
こういうテンキーっていうのは、他のアプリで結構見るんですが実装方法を丁寧に書いてくれているサイトが少ない。(時期が悪い?)
なので、自分で調べまくって色んなサイトに散らばっている情報を集めることに。
まるでドラゴンボールを集める孫悟空の気分並に1箇所に情報がまとまっていない!

// NumberPadKeyboardの上部に「閉じる」ボタンと「決定」ボタンの実装
    UIToolbar* numberToolbar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 50)];
    numberToolbar.barStyle = UIBarStyleDefault;
    numberToolbar.items = [NSArray arrayWithObjects:
                           [[UIBarButtonItem alloc]initWithTitle:@"閉じる" style:UIBarButtonItemStylePlain target:self action:@selector(cancelNumberPad)],
                           [[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:nil action:nil],
                           [[UIBarButtonItem alloc]initWithTitle:@"決定" style:UIBarButtonItemStyleDone target:self action:@selector(doneWithNumberPad)],
                           nil];
    [numberToolbar sizeToFit];
    InputWage.inputAccessoryView = numberToolbar;

これを実装することで、キーボードの上に閉じるボタンと決定ボタンを実装することができる。
ただし、これだけじゃ実装は不十分で閉じるボタンと決定ボタン押下時の挙動を定義してやる必要がある。

// 閉じるボタン押下時の挙動
-(void)cancelNumberPad{
    [self InsertWage];
    [InputWage resignFirstResponder];
}

// 決定ボタン押下時の挙動
-(void)doneWithNumberPad{
    [self InsertWage];
    [InputWage resignFirstResponder];
}

これだけでもまだ不足している。resignFirstResponderで呼び出す先が必要なので以下を実装する。

// TextField:InputWageに入力が終わりReturnされたら閉じる
-(BOOL)textFieldShouldReturn:(UITextField *)sender{
    wage = (int)[sender.text integerValue];
    [sender resignFirstResponder];
    return true;}

私のアプリ用の雑な処理が混ざってるけど、これで閉じるボタンと決定ボタンをテンキー上に作成できる。

らいか
どこにも情報が載ってないけど、そもそも基本的な実装すぎて、知らない事自体が初心者過ぎるんじゃないかと思ってきた
【iOS開発】UIKeyboardTypeNumberPadの上部にReturnボタンを実装する話

SNSへのシェアはこちらから!

ABOUTこの記事をかいた人

工業高等専門学校を卒業後、NTTグループのSI企業に就職。数々の炎上案件を鎮火するために日本各地を5年間転々とする。2015年に一般ユーザ向けのWebシステム開発案件のチームリーダとして業務に従事し、改めて”Webのものづくりの楽しさ”に気付きWeb制作会社に転職。Web制作やアクセス解析を使ったオウンドメディアの運用改善などを行っていく中で、もっとユーザー目線でWebをただ制作するだけではなく企画や運用まで幅広い領域で仕事がしたいと感じるようになり、Webディレクターのキャリアを目指す。日本中のビジネスホテルに詳しく、犬や猫よりも鳥派。