読者です 読者をやめる 読者になる 読者になる

からたちねみち

歌を作っています。Vocaloid、主に結月ゆかり、またはiPhoneアプリ開発

ボタンを使う上で覚えておくべき3つのイベント

iPhoneアプリ開発

iOSのアプリ開発を行う上でとても重要なパーツであるボタンですが、取り扱うには最低限3つのSentEventを理解しておく必要があります。

 

  • Touch Down(タッチダウン)
  • Touch Up Inside(タッチアップインサイド)
  • Touch Up Outside(タッチアップアウトサイド)

 

f:id:bettychang:20160209141446p:plain

*ストーリーボードに配置したボタンのConnectionInspecter画面

 

1つずつ意味をみてみましょう。

 

Touch Down

まず、タッチダウンはボタンをタップしているときに呼ばれるイベントです。タップして、指が触れたままの状態を指します。このようにかなり細かい単位で動作が区分されています。

どのように使うかは、そのアプリやボタンの種類によって違うかもしれませんが、私は主にビジュアル的な操作感を出したい時に使っています。例えば下記の設定画面のボタンはTouchDown中だけ表示している画像を「凹んでいる画像」に差し替えています。このように使えば、リアルにボタン押している感じを出せます。

f:id:bettychang:20160209142327p:plain

*赤枠のボタンはタッチダウン中

 

同時に効果音もつければかなりクオリティーが上がります。

 

Touch Up Inside

TouchUpInsideは、ボタンをタップしたのち、「ボタンのエリア内で指が離れた」ときに呼ばれます。

ボタンのエリア内というのがポイントで、これは一般的に決定を意味します。ボタン内で指を話したらそのボタンを押したことを認めるということです。アプリでなくともWebのボタンでもたいていはこの仕様になっているようです。Web世界の常識といったところでしょうか。よって、TouchUpInsideには通常、ボタンを押したあとの必要な動作、機能を書きます。

たとえば、次の画面に移ったり、パラメーターを有効にしたり、といった具合で、これはケースバイケースです。

また、私はよく忘れるのですが、TouchDownでボタン画像を変更している場合は、合わせてここで画像を戻すことも必要です。そうしないと指を離してもボタンが凹んだままになってしまいますので。

 

 

Touch Up Outside

これは、ボタンをタップした後に、「ボタンの範囲外で指が離れた」ときに呼ばれます。こちらもTouchUpInsideと同様、動作自体に一般的意味があります。これは一般に、キャンセルを意味する動作なので、「実行するのをやめた」処理を書かないといけません。具体的には、TouchUpInsideと違い、ボタンをおしたあとの動作や機能は欠かずに、TouchDownで凹ませたボタン画像を通常ボタン画像に戻す処理だけを書く、などです。

「実行するのをやめた」処理というのは、例えば課金アイテムを購入するボタンで、ユーザがボタンを押したがやはりキャンセルしたい場合には、指をボタン外で離します。これで一般に「購入しようと思ったがやっぱりやめた」という意思表示になるわけですが、ここでもし、コーディングを誤って、ボタンを押した時の動作が実行されてしまうと、ユーザの意に反する動作のため、非常にまずいことになります。よって、TouchUpOutsideではきちんと「やっぱりやめた」動作を定義する必要があります。

 

基本はTouch Up InsideだけでOK

実際には、必ずしも3つ定義する必要はありません。TouchUpInsideのみでも十分機能します。前述したように、ボタンというのはTouchUpInsideで確定するのがWebやアプリなどの常識になっているようですので、TouchUpInsideだけ定義して、そこにボタンを押した処理を書けば十分使えます。

必要に応じてTouchDownとTouchUpOutSideを使えば良いかと思います。

 

簡単な動作確認例

3つのSentEventをViewController.swiftファイルにドラッグして動作を定義してみましょう。

f:id:bettychang:20160209145221p:plain

ちょっと面白みにかけますが、それぞれのSentEventが呼ばれた時にprintで文章を表示するように定義しました。

f:id:bettychang:20160209145934p:plain

ちなみに今回はシミュレーターを使っています。

ボタンをタッチするとデフォルトでButtonという文字が薄くなります。Xcodeのデバッグウィンドウにprintで設定した文字列が表示されました。成功です。

 

続いてTouchUpInside

f:id:bettychang:20160209150303p:plain

Buttonの範囲内(グレーのエリア内)で指を離す(シミュレーターだとクリックを離す)と、タッチアップインサイドの文字が表示されました。

これはつまりTouchUpInsideの箇所のコードがきちんと指を話した瞬間に呼ばれたことを意味します。よって、そのタイミングに起こしたい動作をここに書けばいいわけです。

 

つづいて、ボタンの外で指を話すとタッチアップアウトサイドが呼ばれます。

f:id:bettychang:20160209150558p:plain

画面ではわかりませんが、、、ボタンの外でクリックを離しました。2回めのタッチダウン後にタッチアップアウトサイドが表示されていますね。

 

ボタンのSentEventは他にもたくさんの種類がありますが、今のところこの3つで不自由していないです。最低限この3つの動作を意識して設定を行うと良いと思います。

 

以上です。ご覧頂きありがとうございました!

 

 関連記事

swift-bettychang.hatenadiary.jp