iOS 8のPhotoKitの概要&Xcode 6.1/Storyboard/Auto Layout/iOSシミュレーターの基本的な使い方iPhone 6/6 Plusアプリ開発入門(2)(3/4 ページ)

» 2014年12月02日 18時00分 公開
[平屋真吾,クラスメソッド株式会社]

StoryboardとAuto Layoutで画面作成

 それでは、アプリの実装に入りましょう。

 [ナビゲータエリア]上で[Main.storyboard]ファイルをクリックして選択してください。[Main.storyboard]ファイルの内容が[エディタエリア]に表示されます。

 「画面内の要素のレイアウト」や「画面間の遷移」などは、基本的にStoryboard上で定義します。

図10 Main.storyboardファイルについて

 [エディタエリア]上で[View Controller]を選択し、[ユーティリティエリア]上部の[Identity Inspector]アイコンをクリックして[Identity Inspector]を表示します。

 [Identity Inspector]内の[Class]項目を確認してください。値は[ViewController]になっていると思います。

 Storyboard上の[View Controller]は[ViewController]クラスにひも付いています。「Storyboard上で定義できないもの」や「動的に処理する必要があるもの」などはクラスファイルの方で実装します。

 今回はSwiftでの実装なのでViewController.swiftファイルに記述します。

図11 [View Controller]にひも付いたクラスの確認

MapViewを追加する

 Storyboard上の[View Controller]にMapViewを追加します。

 [ユーティリティエリア]下部のテキストフィールドに「map」というキーワードを入力してください。テキストフィールドの上隣りのエリアに[MapKit View]が絞り込まれて表示されます。

図12 MapKit View項目を表示

 次に[MapKit View]を、Storyboard上の[View Controller]の中央辺りにドラッグします。

図13 Storyboard上でMapKitの追加する

Auto Layoutを設定する

 次にMapViewにAuto Layoutを設定します。先ほど追加した[MapView]を選択した状態で、[エディタエリア]右下の[Pin]メニューをクリックしてAuto Layoutの画面を表示させます。

図14 Auto Layoutの設定画面を表示する

 図15の通りに設定してください。[MapView]と[MapViewの親のView]との間のAuto Layout設定が追加されます。

図15 Auto Layoutの設定画面

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

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

メールマガジン登録

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