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

開発メモ

開発関係のメモをいろいろと。たぶん。

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

はじめに

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

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

  1. 画像を表示するところまで作成
  2. ストーリーボードでTap Gesture Recognizerを追加
  3. ストーリーボードで別の画面を追加しセグエを接続
  4. ストーリーボードでTap Gesture Recognizerとソースコードを接続
  5. 画像がタップされたときの処理で画面を遷移させる

ソースコードはこちら。

See_Ku / TapImageAction — Bitbucket
https://bitbucket.org/See_Ku/tapimageaction

動作環境

環境 情報
Xcode 7.3.1 (7D1014)
iOS 9.0
Swift 2.2
Date 2016/7/2

1. 画像を表示するところまで作成

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

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

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

f:id:see_ku:20160702175039p:plain

2. ストーリーボードでTap Gesture Recognizerを追加

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

f:id:see_ku:20160702175052p:plain

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

f:id:see_ku:20160702175102p:plain

3. ストーリーボードで別の画面を追加しセグエを接続

まず、ストーリーボードで新しく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

4. ストーリーボードでTap Gesture Recognizerとソースコードを接続

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

f:id:see_ku:20160702175158p:plain

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

f:id:see_ku:20160702175213p:plain

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

    @IBAction func onTapImage(sender: AnyObject) {
    }

5. 画像がタップされたときの処理で画面を遷移させる

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

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

    @IBAction func onTapImage(sender: AnyObject) {

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

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

f:id:see_ku:20160702175225p:plain

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

謝辞

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

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

広告を非表示にする