群馬県地域経済発展のためのプロジェクト | iPhoneアプリ開発講座 | コワーキングスペース | 起業家支援 | 企業誘致 | 地域活性化

ぐんまちゃんの群馬検定 on Swift

はじめに

5回目のアプリ開発となります。このアプリでは主に「複数の ViewController の制御」「Segue(セグエ)(画面の移管)」「plistファイルの取り扱い」について学びます。

2016.01.04 Xcode7.1 & iOS9.1 対応版サンプルコード追加

ダウンロード

サンプルプログラム

完成したアプリのサンプルコードです。ZIPで圧縮したファイルです。解凍してご利用ください。

素材データ

新規プロジェクトの作成

Xcodeを起動した後「新規プロジェクト」を作成します。

File > New > Project

timer_01

「Single View Application」を選択して「Next」をクリック

timer_02

次の通り入力してを選択して「Next」をクリック

  • Product Name:「プロジェクト名」を指定(これがフォルダ名になります)
    今回のアプリは「Quiz」とします
  • Organization Name:「組織名」を指定(個人の場合は氏名)
  • Company Identifier:「会社識別名」を指定(ドメイン名を逆にしたものが推奨されます)
  • Language:「Swift」を選択
  • Devices:「iPhone」を選択
  • Use Core Data:チェックなし

quiz_01

ソースコードなどの変更履歴を残しておく場合は「Git」にチェックを入れる

本講座では、特に必要ないので「チェックなし」で「Create」をクリック

oto_03

プロジェクトの設定

利用するiPhone画面の「向き」を設定します

今回のアプリは「縦向き」とします。「Portrait」のみにチェックを入れて下さい。

  • Portrait:縦
  • Upside Down:上下反転の縦
  • Landscape Left:左回転の横
  • Landscape Right:右回転の横

camera_02

ステータスバーの表示・非表示を設定します

今回のアプリはステータスバーを「非表示」にします。この設定はつい忘れがちなので注意しましょう。

  • Generalタブをクリック >「Status Bar Style」の「Hide status bar」をチェックする。

timer_06

  • Infoタブをクリック >「Status bar is initially hidden」を「YES」にする
  • 「+」をクリックして「View controller-based status bar appearance」の項目を追加して「NO」にする

timer_07

「ViewController」の追加

今回のアプリは、今までのような1画面のアプリではありません。「スタート画面」→「クイズ画面」→「結果画面」と画面移管するアプリとなります。

「ViewController」を追加します

「Main.storybord」を選択する。「Object Library」をクリックして「ViewController」をドラッグ&ドロップ。「2つ」配置する。

quiz_02

「ViewController.swift」を追加します

左下の「+」をクリックして「New File」を選択します。

quiz_03

「iOS Source」を選択して「Swift File」を選んで「Next」をクリックします。

quiz_04

ファイル名を「QuizViewController」と入力して「Create」をクリックします。

quiz_05

同様に「ResultViewController.swift」を作成します。以下の用にが新しいファイルできました。

  • QuizViewController.swift
  • ResultViewController.swift

quiz_06

「QuizViewController.swift」のプログラムを変更します

「ViewController.swift」のプログラムをコピーして、そのままペーストします。唯一違うところは「ViewController:」が「QuizViewController:」となります。

quiz_07

同様に「ResultViewController.swift」のプログラムも変更します。

「ViewController」の Storyboard ID を指定

「Main.storybord」を選択。一番左の「ViewController」を選択します。「Identity inspector タブ」を選択。「Storyboard ID」に「Start」と入力

quiz_08

「QuizViewController」の関連付け

「Main.storybord」を選択。真ん中の「ViewController」を選択します。「Identity inspector タブ」を選択。
「Class」は「QuizViewController」を選択。「Storyboard ID」に「Quiz」と入力。

quiz_09

「ResultViewController」の関連付け

「Main.storybord」を選択。真ん中の「ViewController」を選択します。「Identity inspector タブ」を選択。
「Class」は「ResultViewController」を選択。「Storyboard ID」に「Result」と入力。

quiz_10

出ていたエラーが消えます。

素材データのインポート

使用する素材データをインポートします

左下の「+」をクリックして「Add Files to “Quiz”」を選択します。

quiz_11

取り込む画像を選択して「Copy items if needed」をチェックして「Add」をクリックする
※チェックを入れると「コピーしたデータ」を使用することになります。忘れずに!

  • start_image.pdf
  • i_love_gunma.pdf
  • karuta(フォルダ)
  • QuizList.plist

quiz_13

データがプロジェクトに取り込まれました。

quiz_14

ベクター画像を使用できるように設定する

ベクター画像を使用するには「Images.xcassets」の設定が必要です。

Images.xcassetsを選択する。「+」をクリックして「New Image Set」を選択する。名前を「start_image」に変更する。「Attributes Inspector」タブをクリックする。「Types」は「Vectors」を選択する。「start_image.pdf」を「点線の四角」にドラッグ&ドロップする。

同様に「i_love_gunma」を設定します。

  • start_image
  • i_love_gunma

quiz_15

画面のデザイン&レイアウト(スタート画面)

3つあるViewControllerの中から、一番左の「ViewController」で作業をします。

Image View を配置する

「Main.storybord」を選択する。「Object Library」をクリックして「Image View」をドラッグ&ドロップ。

  • Image:start_image
  • Mode:Aspect Fit
  • Background:任意の色

quiz_16

Button を配置する

「Object Library」をクリックして「Button」をドラッグ&ドロップ。

  • Title:スタート
  • Font:System 24.0

quiz_17

Image View(start_image)の制約を設定

  • 上:0
  • 下:0
  • 左:-16
  • 右:-16

※Xcode7.1以降では、以下の値となります。

  • 上:0
  • 下:0
  • 左:-20
  • 右:-20

quiz_18

button(スタート)の制約を設定

  • 「Horizontal Center in Container」をチェック(水平方向中央)
  • 下:80

quiz_19

quiz_20

画面のデザイン&レイアウト(クイズ画面)

3つあるViewControllerの中から、真ん中の「QuizViewController」で作業をします。以下を配置します。

オブジェクトの配置

  • Label
  • Image View
  • Label
  • Button
  • Button
  • Button

quiz_30

Label(第0問/全0問)の設定

quiz_31

Label(問題文)の設定

quiz_32

Button(答え1・2・3)の設定

同様に「Button(答え2)」「Button(答え3)」も設定します。

quiz_33

Label(第0問/全0問)の制約

  • 上:20(Viewから)
  • 左:0
  • 右:0
  • Height:22(チェック入れる)

quiz_34

Button(答え3)の制約

  • 左:0
  • 右:0
  • 下:20(View から)
  • Height:36(チェック入れる)

quiz_35

Button(答え2)の制約

  • 左:0
  • 右:0
  • 下:10(答え3 から)
  • Height:36(チェック入れる)

quiz_36

Button(答え1)の制約

  • 左:0
  • 右:0
  • 下:10(答え2 から)
  • Height:36(チェック入れる)

quiz_37

Label(問題文)の制約

  • 左:0
  • 右:0
  • 下:10(答え1 から)
  • Height:36(チェック入れる)

quiz_38

Image View の制約

  • 上:20(第0問/全0問 から)
  • 左:0
  • 右:0
  • 下:20(問題文 から)

quiz_39

最後に「Image View」の「Mode」を「Aspect Fit」にしておきましょう。

以上で「クイズ画面」の制約の設定は終わりです。「Preview」でレイアウトを確認しましょう。以下のように表示されていればOKです。

quiz_40

画面のデザイン&レイアウト(結果画面)

3つあるViewControllerの中から、一番右の「ResultViewController」で作業をします。

オブジェクトを配置する

「Label」「Image View」「Button」を配置します。

quiz_44

Label(正解率 0.0%)の設定

  • Title:正解率 0.0%
  • Color:任意の色
  • Font:System 32.0
  • Alignment:中央揃え

quiz_41

Label(正解率 0.0%)の制約

「HOrizontal Center in Container」をチェックして、水平方向中央にします。

quiz_42

  • 上:40(View から)
  • Height:39(チェック入れる)

quiz_43

Button(もう一回)の設定

  • Title:もう一回
  • Font:System 24.0

quiz_45

Button(もう一回)の制約

「HOrizontal Center in Container」をチェックして、水平方向中央にします。

quiz_46

  • 下:80(View から)
  • Height:41(チェック入れる)

quiz_47

Image View の制約

  • 上:20(正解率 0.0% から)
  • 左:20
  • 右:20
  • 下:20(もう一回 から)

quiz_48

Image View の設定

  • Image:i_love_gunma
  • Mode:Aspect Fit

quiz_49

画面(View)の背景色

背景色をそれぞれ設定します。

クイズ画面(View)の背景色

quiz_60

結果画面(View)の背景色

quiz_61

レイアウトが完成しました。

quiz_62

Segue(セグエ)の設定(ビューの移管)

画面と画面の接続や、遷移する際の演出を管理するものを「Segue(セグエ)」と呼びます。

Button(スタート)を押したとき

「Controlキー」を押したまま「スタートボタン」から「QuizViewController」へドラッグ&ドロップ。「Present Modally」を選びます。

quiz_63

Button(答え1・2・3)を押したとき

「Controlキー」を押したまま「QuizViewController」から「ResultViewController」へドラッグ&ドロップ。「Present Modally」を選びます。
※押されるボタンが決まっていない場合は、直接ボタンからSegueはだせません

quiz_64

Button(もう一回)を押したとき

「Controlキー」を押したまま「もう一回ボタン」から「ResultViewController」へドラッグ&ドロップ。「Present Modally」を選びます。

quiz_65

「Segue」の「Identifier」を設定

エラーがでています。原因は「QuizViewController」から「ResultViewController」への「Segue」に名前が付いていない為です。

quiz_66

「Segue」を選択して「Identifier」に「toResult」と入力します。

quiz_67

エラーが消えました。

「QuizViewController」のオブジェクトの関連付け

Assistant editor の2画面で作業する

右上にある蝶ネクタイのマークの「Assistant editor」ボタンをクリックする。2画面になるので、左は「Main.storybord」、右は「QuizViewController.swift」を表示させる。

quiz_70

それぞれのオブジェクトを関連づける。「Name」は以下の通りです。

「ResultViewController」のオブジェクトの関連付け

Assistant editor の2画面で作業する

右上にある蝶ネクタイのマークの「Assistant editor」ボタンをクリックする。2画面になるので、左は「Main.storybord」、右は「ResultViewController.swift」を表示させる。

quiz_71

「Label」を関連づける。「Name」は以下の通りです。

「QuizViewController」のプログラムを書く

変数を用意します

「viewDidLoad」に初期設定を記述します

エラーが出ている所はひとまず「コメントアウト」しておきましょう。

「nextMondai」関数の定義

一問一問、問題を出題するプログラムを書きます。

「pushedButton1」「pushedButton2」「pushedButton3」の処理

それぞれ「答え1ボタン」「答え2ボタン」「答え3ボタン」を押した時の処理を書きます。

「Segeu」の処理

「セグエ」された時の処理をかきます。エラーが出ている所はひとまず「コメントアウト」しておきましょう。

これで「QuizViewController」のプログラムは完成です。

「ResultViewController」のプログラムを書く

続いて「ResultViewController」のプログラムを書きます。「ResultViewController」では「segue」で受け取ったパラメータを表示するだけです。

変数を用意します

「viewDidLoad」に初期設定を記述します

「Extension」のプログラムを書く

「Extension(エクステンション)」とは拡張という意味ですが、読んで字の如く「Extension」を使うと既存のクラス等に新たに「機能を追加」することができます。

「配列をランダムソート」させるメソッドを「Extension」として用意します。

「Extension.swift」ファイルの作成

左下の「+」をクリックして「New File」を選択します。

quiz_80

「iOS Source」カテゴリから「Swift.File」を選択して「Next」をクリック。

quiz_81

ファイル名を「Extension」と入力し「Create」をクリック。

quiz_82

「Extension.swift」が作成されました。

quiz_83

「Extension.swift」に配列のランダムソートメソッドを記述します。(※このアプリでは下の「NSMutableArrayランダムソートメソッド」のみ使用しています。)

プログラムの完成

コメントアウトしていた箇所は、コメントアウトを削除しましょう。以下プログラムの全文です。

「QuizViewController.swift」の全文

「ResultViewController.swift」の全文

「Extension.swift」の全文

iPhoneアプリ「ぐんまちゃんの群馬検定 on Swift」が完成しました。お疲れ様でした!

  • Facebook
  • Hatena
  • twitter
  • Google+
PAGETOP
Copyright © Cross-i Project BrainFarm Inc. All Rights Reserved.