連載
» 2015年06月09日 05時00分 公開

iPhone 6/6 Plusアプリ開発入門(終):iOS 8アプリ開発のこれまで&Swift 1.2への対応、プロパティオブザーバーとwillSetの基本的な使い方、セグエを使った画面遷移 (6/6)

[平屋真吾,クラスメソッド株式会社]
前のページへ 1|2|3|4|5|6       

Storyboard上に画面遷移用の「セグエ」を追加

 「セグエ」は2つのUIViewController間の画面切り替えなどを担当するオブジェクトです。Storyboard上の地図画面と詳細画面との間にセグエを追加して、画面遷移を実現します。

 セグエを追加しましょう。Storyboard上の「View Controller」をクリックして[control]キーを押しながら、Storyboard上の「View Controller」を「Asset View Controller」までドラッグし、ドロップします(図37)。

図37 地図画面と詳細画面との間にセグエを追加

 ドロップするとメニューが表示されるので、「show」を選択します(図38)。

図38 セグエの種類を選択するためのメニュー

 追加したセグエをコードから扱えるように、セグエに識別子を設定します(図39)。

図39 セグエに識別子を設定

 これで、Storyboardの編集は全て完了です。

ViewControllerクラスを修正

 前回の記事までに実装してきた「ViewController.swift」ファイルに3つのメソッドを追加します。

「prepareForSegue:sender:」メソッド

 このメソッドはセグエが実行される前に呼ばれます。「assetViewControllerSegue」はStoryboard上で指定した識別子と同じです。メソッド内でAssetViewControllerのannotationプロパティに注釈オブジェクトを代入しています。

override func prepareForSegue(segue: UIStoryboardSegue, sender: AnyObject?) {
    if let identifier = segue.identifier {
        if identifier == "assetViewControllerSegue" {
            let annotationView = sender as! MKAnnotationView
            
            let assetViewController = segue.destinationViewController as! AssetViewController
            assetViewController.annotation = annotationView.annotation as? PhotoAnnotation
        }
    }
}
「ViewController.swift」ファイルに追加する「prepareForSegue:sender:」メソッド

「mapView:didSelectAnnotationView:」メソッド

 このメソッドは注釈ビューが選択されたときに呼ばれます。地図の中心を選択された注釈ビューの座標に移動させる処理を記述します。

func mapView(mapView: MKMapView!, didSelectAnnotationView view: MKAnnotationView!) {
    let coordinate :CLLocationCoordinate2D = view.annotation.coordinate
    var region :MKCoordinateRegion = mapView.region
    region.center = coordinate
    mapView.setRegion(region, animated: true)
}
「ViewController.swift」ファイルに追加する「mapView:didSelectAnnotationView:」メソッド

「mapView:annotationView:calloutAccessoryControlTapped:」メソッド

 このメソッドは注釈ビュー上のボタンがタップされたときに呼ばれます。画面遷移を実行する処理を記述します。

func mapView(mapView: MKMapView!, annotationView view: MKAnnotationView!, calloutAccessoryControlTapped control: UIControl!) {
    self.performSegueWithIdentifier("assetViewControllerSegue", sender: view)
}「ViewController.swift」ファイルに追加する「mapView:annotationView:calloutAccessoryControlTapped:」メソッド

完成したサンプルアプリをiOSシミュレーターで動作確認

 [Run]ボタンをクリックしてiOSシミュレーターで動作を確認しましょう(図40)。

 アプリを動かすと、地図上にカスタムの注釈ビュー(写真のサムネイル)が表示されます。注釈ビューをタップすると、吹き出しが表示されます。ここまでは前回の記事までの時点で実装済みでした。

 吹き出しをタップすると、詳細画面が表示され、詳細画面には写真と住所が表示されます。

図40 iOSシミュレーター(iPhone 6)の実行結果

サンプルアプリはGitHub上で公開

 本記事で行った作業は以下の通りです。

  • Swift 1.2への対応
  • 詳細画面実装
  • 地図画面の修正
  • 地図画面から詳細画面への遷移を実装

 解説が少々駆け足になってしまいましたが、これで「PhotoMap」の実装は完了です。

 「PhotoMap」の各機能を別の方法で実装したり、さらに機能を追加したりすることで理解が深まると思います。作成した「PhotoMap」プロジェクトはGitHub上で公開していますので、参考にしてみてください。

著者紹介

平屋真吾

クラスメソッド株式会社 iPhoneアプリサービス事業部所属のプログラマーです。iOSアプリの開発がメインですが、デザインやAWSなども勉強中です。

ブログ:http://dev.classmethod.jp/author/hiraya-shingo/


前のページへ 1|2|3|4|5|6       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。