目指せ!iPhoneアプリ開発エキスパート

第7回 応用テクニック

この記事を読むのに必要な時間:およそ 4.5 分

キーボードを閉じるためのボタン

ところが,これをバーゲン教師で適用しようとすると大きな問題が出てきます。キーボードの種類を「Number Pad」「Phone Pad」にした場合,右下のボタンはバックスペースキーとなってしまい,入力完了を受け取るきっかけとなるボタンが存在しないのです。

入力完了ボタンがないキーボードの例

入力完了ボタンがないキーボードの例

そこでこれらの入力完了ボタンがないキーボードを用いる場合には,自前で入力完了ボタンを用意しておく必要があります。

Viewにラウンドレクトボタンを配置してそれを入力完了ボタンに設定してみましょう。ラウンドレクトボタンをキーボードに覆われない場所に配置して,Touch Downにアクションを割り当てます。

入力完了ボタンの設置とアクションの接続

入力完了ボタンの設置とアクションの接続

入力完了の合図は,テキストフィールドに接続されたアウトレットoutlet(もしくは任意のアウトレット名)に対して次のメッセージを実行することで通知されます。

[outlet endEditing:YES];

これで,キーボードの完了ボタンに相当するものができました。実際には入力を強制終了しているので,テキストフィールド側にアクションの設定は必要なく,ボタンを押すと無条件でキーボードが消えてくれます。ビルドして動作を確かめてみましょう。

入力完了ボタンを押すとキーボードが消える

入力完了ボタンを押すとキーボードが消える

ボタンをキーボードに連動させる

この入力完了ボタンは,キーボードからの文字入力中だけ表示されていれば良いものです。キーボードが表示されていないときにこのボタンが押されても,とくに何も起きませんが,常に表示されていると紛らわしいので,キーボードが表示されている間だけこのボタンを表示するようにしてみましょう。

まずは,ボタンを出したり消したりするメッセージを実行するために,ボタンに対するアウトレットを作成します。これをラウンドレクトボタンに接続し,プログラムからはアウトレットを通してボタンの表示,非表示を切り替えます。

ボタンを表示するのはテキストフィールドの入力が開始された時ですので,入力開始時に呼び出されるアクションを設定します。アクションを作成し,テキストフィールドの「Editing Did Begin」に接続します。

アクションの中では,ボタンに接続されたアウトレット outlet(もしくは任意のアウトレット名)に対して次のメッセージを実行します。

[outlet setHidden:NO];

これで入力開始時にボタンが表示されるようになりました。次は入力完了時にボタンを消す処理です。ボタンが押された際のアクションはすでに作成していますので,その中で次のメッセージを実行します。

[outlet setHidden:YES];

これで入力完了時にボタンが消えるようになりました。

さらにアプリ起動時はこのボタンは消しておきたいので,インスペクタを使ってボタンの初期状態を非表示にしておきます。ラウンドレクトボタンが選択されている状態で,インスペクタの「Drawing」から「Hidden」を選択します。

Xcodeに戻り,ビルドして進行をクリックして動作を確かめてみましょう。

透明ボタンを使ったテクニック

さらに進んだテクニックとして,パーツ以外のどこをタッチしてもキーボードが閉じるようにする,ということもできます。入力完了ボタンを配置する場所がないような場合に役に立ちます。

ラウンドレクトボタンはインスペクタの「Type」からいくつかの形状から選択することができますが,ここで「Custom」を選択するとボタン全体を透明化することができます。

ボタンの種類を設定

ボタンの種類を設定

Customを選択し,透明になったボタンがViewの上半分を覆うように配置します。

画面の上半分を透明ボタンで覆う

画面の上半分を透明ボタンで覆う

もうおわかりでしょう。この透明ボタンが押されたことをアクションで受け取って,キーボードを閉じる処理を行えば良いわけです。ここで注意しなければならないのは,見た目は透明でも普通のボタンですので,他のパーツの上にかぶさってしまうと下のパーツがタッチできなくなってしまいます。そこで,この透明ボタンは重ね順で常に他のパーツよりも一番下(背面)に配置しておく必要があります。ボタンが選択された状態でInterface Builderのメニューから「Layout⁠⁠→⁠Send Backward」を選ぶと最背面に送ることができます。

「Layout⁠⁠→⁠Send Backward」で最背面に送る

「Layout」→「Send Backward」で最背面に送る

あとは通常のラウンドレクトボタン同様,アクションを接続してキーボードを閉じるためのメッセージを記述してみましょう。

著者プロフィール

皮(かわ)

1980年宮崎県生まれ。納豆好き。

アイフォーンの皮:http://mixi.jp/view_community.pl?id=3531790