検索
連載

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

iPhone 6／6 PlusアプリをSwift言語で作成してみたいという初心者向けにiOS 8の新機能を使ったアプリの作り方を一から解説する入門連載。最終回は、これまでの連載を振り返り、これまで作成したPhotoKitを使ったサンプルアプリの仕上げとしてセグエを使った画面遷移を実装の仕方や、プロパティオブザーバーとwillSetの基本的な使い方を解説する。

[平屋真吾，クラスメソッド株式会社] PC用表示 関連情報
Share
Tweet
LINE
Hatena
前のページへ | 　　　　　　

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 6／6 Plusアプリ開発入門」バックナンバー

著者紹介

平屋真吾

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

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


Copyright © ITmedia, Inc. All Rights Reserved.

前のページへ | 　　　　　　
ページトップに戻る