ソフト仕様書

アプリケーションを使用する際に調べたことをまとめたページ。

キーボードの完了ボタン

IPhoneをいじっていると時々こんなものに出くわします。

f:id:mkgroove:20130428125423p:plain

キーボードの上に青い「完了ボタン」やら「前へボタン」「次ボタン」などが配置してあることがあります。
改行などするテキストボックスなどにあると非常に便利ですね。
キーボードの近くにあるので、すぐに操作ができる。

これどうやるんだろうとグーグルを検索してどのページを見ても「ナビゲートバーに閉じるボタンを配置して・・・・・・・」みたいなことしか書かれていません。
確かにそれでも出来るんですが、UIの利便性としてイマイチですよね。

ということで検索しまくりました。
そしたらなんと簡単にできるじゃありませんか。参考ページとこの手のやり方が出ている検索方法はのちほどにして。

まずStoryBoardはTextView以外は使っていません。

1、viewDidLoadメソッドに以下の赤い部分を追加


- (void)viewDidLoad
{


 [super viewDidLoad];
 //ツールバーを生成
 UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
 //スタイルの設定
 toolBar.barStyle = UIBarStyleDefault;
 //ツールバーを画面サイズに合わせる
 [toolBar sizeToFit];
 // 「完了」ボタンを右端に配置したいためフレキシブルなスペースを作成する。
 UIBarButtonItem *spacer = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemFlexibleSpace target:self action:nil];
 // 完了ボタンの生成
 UIBarButtonItem *_commitBtn = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemDone target:self action:@selector(closeKeyboard:)];
 // ボタンをToolbarに設定
 NSArray *toolBarItems = [NSArray arrayWithObjects:spacer, _commitBtn, nil];
 // 表示・非表示の設定
 [toolBar setItems:toolBarItems animated:YES];
 // ToolbarをTextViewのinputAccessoryViewに設定
 self._uiText.inputAccessoryView = toolBar;

}

メッソドを追加します。Closeボタン実行時の処理を記述。
-(void)closeKeyboard:(id)sender{
 [textField resignFirstResponder];
}

これだけです!

ツールバーのスタイル設定「toolBar.barStyle = UIBarStyleDefault;」はお好みの色に変えることもできます。

  • toolBar.barStyle = UIBarStyleBlack;

f:id:mkgroove:20130428132641p:plain

  • toolBar.barStyle = UIBarStyleBlackOpaque;

f:id:mkgroove:20130428132118p:plain

  • toolBar.barStyle = UIBarStyleBlackTranslucent;

f:id:mkgroove:20130428132124p:plain

  • toolBar.barStyle = UIBarStyleDefault;

f:id:mkgroove:20130428132131p:plain

BlackとBlackOpaqueの違いがよくわかりませんね(笑)

Googleで「Objective-C(もしくはiPhoneXCode)、キーボード ツールバー(もしくは間にスペースなしで「キーボードツールバー」」と検索すると色々なやり方が出てきます。
「キーボード 完了ボタン」で最初検索していたのでなかなか出てこなくて苦労しました。

参考ページは
http://works.sabitori.com/2011/06/18/add-button-to-keyboard/
色々なページを参考に四苦八苦やってみましたが、このページを見て拍子抜けしました。
ここではやり方を二つ紹介していました。
参考にされてみてはいかがでしょうか。