iOS向けアプリで画像のタップに対応

はじめに

画像をタップして何らかの処理を行うサンプルを作ります。処理の部分は何でも良いんですけど、今回は、別の画面に遷移する処理を行ってみます。

作業の手順としては、こんな感じになります。

以前に『iOS向けアプリで画像を画面に表示』というネタを書いたので、こちらを参考にしてImage Viewに画像を表示するところまで作業しておきます。

iOS向けアプリで画像を画面に表示 - 開発メモ
http://seeku.hateblo.jp/entry/2016/07/02/160916

ついでに（？）、ユーザーがタップできるように、Image Viewの設定を変更しておきます。これを忘れてるとハマります。よくあります。

f:id:see_ku:20160702175039p:plain

ViewControllerの Image Viewの上に Tap Gesture Recognizerをドラッグ＆ドロップして追加します。

f:id:see_ku:20160702175052p:plain

Tap Gesture Recognizerは画面に表示されるコントロールでは無いため、ストーリーボードで表示される位置がちょっと変わってます。

f:id:see_ku:20160702175102p:plain

まず、ストーリーボードで新しくViewControllerを追加します。

f:id:see_ku:20160702175115p:plain

次に、最初の画面と次の画面を接続します。

f:id:see_ku:20160702175126p:plain

セグエの種類を選択します。

f:id:see_ku:20160702175137p:plain

プログラムから使えるように、セグエにIDを設定しておきます。今回は適当に『result』としておきました。

f:id:see_ku:20160702175147p:plain

画像がタップされたとき処理が行えるように、Tap Gesture Recognizerとソースコードを接続します。

f:id:see_ku:20160702175158p:plain

ドロップするとダイアログが出るので、設定を行います。ConnectionをActionにするのを忘れずに。

f:id:see_ku:20160702175213p:plain

今回はonTapImageと言う名前で接続したので、以下のような関数が自動で作られました。

    @IBAction func onTapImage(sender: AnyObject) {
    }

ようやく、ストーリーボードでの作業が一段落着きました。あとは、ソースコードを編集して、次の画面に遷移する処理を書くだけです。

次の画面に遷移する処理は、performSegueWithIdentifier()にセグエのIDを渡すことで実現できます。こんな感じになります。

    @IBAction func onTapImage(sender: AnyObject) {

        // セグエを使用して画面を遷移
        performSegueWithIdentifier("result", sender: nil)
    }

ここまで出来たところで実行すると、こんな画面になります。

f:id:see_ku:20160702175225p:plain

画像をタップすると次の画面に遷移します・・・　が、そこから戻ってくることが出来ません。次の画面は真っ白なので、そもそも、遷移してるのかどうかもわかりにくいです。この辺りは発展課題と言うことで、いろいろ調べてみて下さい。

画像はいらすとやさんの物を使わせていただきました。

無料イラストかわいいフリー素材集いらすとや
http://www.irasutoya.com/