LoginSignup
30
24

More than 5 years have passed since last update.

@takehiro224(Takehiro Watanabe)

Swift 入門 [No.2] ~初心者が始める~

Posted at

iPhoneアプリ開発の基礎

iPhoneアプリを作りたい!というエンジニア経験1年程の初心者がiPhoneアプリを作るまでの道のり(記録)です。なので初心者向けです。

No.1ではSwiftの基礎を記載しました。ここではSwiftの使用以外でもXcodeの使い方を少しと、アプリ開発の流れをメインに記録します。

1. UI部品の配置

オブジェクトライブラリを表示してLabelやButtonをエディタエリアに配置する。

(1)UI部品とは

LabelやButtonnなどのオブジェクトライブラリにあるものです。
UI部品はいずれもクラスとして実装されています。
LabelはUILabelクラス
ButtonはUIButtonクラス

(2)ドキュメントアウトラインとは

ストーリーボードの構成要素が表示されている。
エディタエリアの左下にあるボタンをクリックするとドキュメントアウトラインが表示される。

(3)View

  • View = 全てのUI部品の土台となる部品です。
  • iPhoneアプリ開発では、Viewという土台の上に様々なUI部品を配置して重ねていくことでアプリの画面を制作する。
  • ViewというUIViewクラス部品の上に様々なUI部品を配置する。

(4)UI部品の配置まとめ

  1. UI部品はクラスとして実装されている。
  2. 自分が乗っているビューはスーパービュー
  3. 自分が乗せているビューはサブビュー

2. レイアウト

(1)AutoLayoutとは

autolayout.png

  • UI部品の配置場所(レイアウト)に対してルール付けを行う機能です。
  • 全てのデバイス及び、各デバイスの画面の向きに最適なレイアウトを1つのストーリーボードで対応できるようになります。
  • iOSの自動処理によってレイアウト崩れを適切に防ぎます。

(2)使用方法

①ストーリーボード(Main.storyboard)を選択し、ドキュメントアウトラインの中の「View Controller」を選択します。

②エディタエリア右下にある「Resolve Auto Layout Issues」(|-△-|)のボタンをクリックします。
rali.png

③「Add Missing Constraints」を選択します。

ドキュメントアウトラインに新たに「Constraints」というグループが追加されます。
これでAuto Layoutの設定は完了です。

(3)AutoLayoutの基本的な設定手順

  • 通常のUI部品の配置が完了
  • Add Missiong Constraintsを使用

(4)レイアウトまとめ

  1. Auto LayoutはUI部品の配置場所(レイアウト)に対してルール付けを行う機能。
  2. Auto Layoutを使うことで、UI部品の位置を固定値ではなく、他のUI部品との相対的な位置で指定できる.
  3. [Add Missing Constraints]を選択すると、Auto LayoutのルールがXcodeによって自動的に作成される。

3. 接続

(1)接続とは

「UI部品」と「コード」の接続
UI部品 = ボタン等
コード = 役割
(例)
①ボタン(UI部品)を配置します。
②そのボタンがクリックされた時の機能(Swiftコード)を作成。
①のボタン(UI部品)に②の機能(コード)を与える。

画面上に配置したUI部品とSwiftのコードを接続する。

(2)接続手順

①ドキュメントアウトラインにあるUI部品を「control」キーを押しながらコード上にドラッグ&ドラッグする。
②ドラッグ&ドロップを行うと接続の設定ダイアログが現れます。
(画像)

  • Connection(接続の種類):
    Outlet:ストーリーボード上のUI部品をプロパティとして接続する。
    Action:ストーリーボード上のUI部品をメソッドとして接続する。

  • Object:ストーリーボードと接続するクラス。自動で表示される。

  • Name:接続するUI部品の名前を設定する。

  • Type:接続するUI部品の型を設定する。

  • Storage:プロパティのメモリ管理に関する設定を行う。(Outlet接続のみ)

  • Event:イベントを設定する。(Action接続のみ)

  • Arguments:引数を設定する(Action接続のみ)

4. コーディング

UI部品を作成して、UI部品をコードに接続したファイルです。
コード内容は下記参照ください。

(1)ソースコード

ViewController
import UIKit

class ViewController: UIViewCOntroller {
     @IBOutlet weak var label: UILabel!
     @IBAction func sayHello() {
          label.text = "Hello"
     }
     override func viewDidLoad() {
          super.viewDidLoad()
          //Do any additional setup after loading the view ,typically from a nib.
     }
     override func didReceiveMemoryWarning() {
          super.didReceiveMemoryWarning()
          //Dispose of any resources that can be recreated.
     }
}

(2)ソースコード解説

①import UIKit

import UIKit
  • UIKitというフレームワーク(クラス群)をプログラムにimportする、ということ。
  • UIKitが自動的に読み込まれる(import)されるのはiPhoneアプリ開発でほぼ間違いなく利用されるので、自動的にUIKitはimportされる。

フレームワークとは

UISliderや、UIButton、UILabel、UISwitchといったApple社が提供している数々のクラスを一まとめにしたクラスの集まり。

②var label

@IBOutlet weak var label: UILabel!

このプロパティはUI部品のラベルを接続した際に作成されたプロパティです。

③func sayHello()

@IBAction func sayHello() {
     label.text = "Hello"
}

このメソッドはUI部品のボタンを接続した際に作成されたメソッドです。
このメソッドが使われると、ラベル(UI部品)の文字がHelloに変わります。

④func viewDidLoad()

override func viewDidLoad() {
     super.viewDidLoad()
     //Do any additional setup after loading the view ,typically from a nib.
}
  • viewDidLoad()メソッドは、ViewControllerクラスの親クラスであるUIViewControllerクラスにも定義されており、ここではそれを上書きoverrideしている。
  • このメソッドは、UIViewControllerクラスのviewプロパティがiPhoneのメモリ上にロードされた時点でiOSによって自動的に呼び出される。
  • このメソッドには、 「viewプロパティがメモリ上にロードされた時点で実行したい処理」を書く。 =初回起動時のこと UIViewControllerクラスの中に定義されているviewDidLoad()メソッドにはとても重要な処理が書かれているため、必ず実行する必要があるためにsuper.viewDidLoad()と書いてある

⑤func didReceiveMemoryWarning()

override func didReceiveMemoryWarning() {
     super.didReceiveMemoryWarning()
     //Dispose of any resources that can be recreated.
}
  • didReceiveMemoryWarning()メソッドは、ViewControllerクラスの親クラスであるUIViewControllerクラスにも定義されており、ここではそれを上書きoverrideしている。
  • didReceiveMemoryWarning()メソッドもiOSが自動的に呼び出すメソッド。 実行中のアプリがiPhoneのメモリを使いすぎた際に呼び出される。
  • このメソッドの中に不要なメモリを解放するコードを書いておけば、アプリのクラッシュを未然に防ぐことができる。

5. 継承

(1)継承とは

親クラスと子クラスがあります。
子クラスには親クラスのプロパティやメソッドが引き継がれます。
このような仕組みを継承という。

(2)書式

class 子クラス名: 親クラス名{

}

(3)凡例

class ViewController: UIViewController {

}

(4)重複するコードをまとめる

  • プロパティも、メソッドも親クラスに定義して継承できる。
重複するコードがある例
class Yoshinoya {
     var hoshi = 0
     func hyouka() {
          hoshi += 3
     }
     println(hoshi)
}

class Matsuya {
     var hoshi = 0
     func hyouka() {
          hoshi += 2
     }
     println(hoshi)
}
継承し重複がない例
class Restaurant {
     var hoshi = 0
     func hyouka(hoshi:Int) {
          hoshi += hoshi
          println(hoshi)
     }
}

class Yoshinoya: Restaurant {
     hyouka(3)
}

class Matsuya: Restaurant {
     hyouka(2)
}

(5)継承のまとめ

  1. 子クラスは親クラスのプロパティやメソッドが引き継がれる
  2. 子クラスは、自身の親クラスを自由に指定できる
  3. 親クラスの詳細はoptionキーを押しながらダブルクリックで確認できる
  4. 子クラスには1つの親クラスしか指定できない
  5. 親クラスは複数のクラスの親になることができる
  6. 親クラスにはさらに親クラスを指定できる
  7. 子クラスは他のクラスの親クラスになれる

6. オーバーライド

(1)オーバーライドとは

  • 親クラスで宣言されているプロパティやメソッドを、子クラスで上書きする機能。
  • 親クラスにあるメソッド名と完全に同じメソッド名を子クラスにも定義する。
  • Apple社が提供しているクラスを自分用に少しだけカスタマイズしたい。

(2)書式

override func メソッド名() {

}

(3)凡例

override func viewDidLoad() {
     super.viewDidLoad()
}
  • 親クラスのviewDidLoad()を上書き(オーバーライド)している。
  • super.viewDidLoad()のsuperは親クラスのインスタンスの意味。=親クラスのメソッドを呼び出している。

(4)オーバーライドまとめ

  1. 親クラスのプロパティとメソッドを上書きすることをオーバーライドという。
  2. 子クラスの中で親クラスのインスタンスを表すにはsuperを使う。

7. オプショナル型

(1)オプショナル型

nilを取り得る型のこと。

(2)nilとは

  • 「何もない」を表す特別な値。
  • 0や""(空文字)とは異なる「何もない」を表す特別な値であるため、他の値と比較することはできない。

(3)初期化

①書式

var 変数名:型名? = nil

②凡例

var age:Int? = nul
var age:Int? = 29

(4)オプショナル整数型を使った計算

①書式

変数名! + 1

②凡例

age! + 1

変数名の後ろに「!」を付ける。

オプショナル型は記事を別途作成します。

8. ビューとビューコントローラー

(1)ビューとビューコントローラーとは

テレビゲームを例にすると、
テレビ = ビュー
コントローラー = ビューコントローラー
ビュー上に配置したキャラクター(ボタンなどの例)をコントローラー(ビューコントローラーの例)で操作する。

(具体例)
テレビをPC用ディスプレイに替えてもコントローラは接続するだけで同じコントローラを
使用することができる。
コントローラが壊れて買い替えても接続するだけでビューは同じものを使用できる。

(実例)
ストーリーボードでビュー上にあるUI部品の位置やサイズを変更しても、ビューコントローラーは変更されない。
ビューコントローラを変更してもビューは変更されない。
どちらか一方を変更したら、「接続」をやり直すだけで作業が完了する。

(2)ビューとビューコントローラーまとめ

  • ビューコントローラーは1画面に1つ
  • 画面レイアウト(ストーリーボード)と画面操作(ビューコントローラー)という役割を明確に分けることで、変更に強いアプリ開発を実現している。これがビューコントローラが必要である最大の理由。
30
24
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
30
24