【第２回】Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Connect the UI to Code 編）

はじめに

AppleのSwiftアプリ開発チュートリアルを進めていて出てきた関数やクラスなどについて、調べたことを残していきます。
チュートリアルを進めながら、ざっくりとどういうものかを把握するためのお供になればと思います。

初学者のため、間違い等あればご指摘ください。

第１回：Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Build a Basic UI 編）
第２回：Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Connect the UI to Code 編）←今回はここ
第３回：Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Work with View Controllers 編）
第４回：Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Implement a Custom Control 編）
第５回：Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Define Your Data Model 編）

チュートリアルページ

以下のような構成でレッスンが進んでいくので、それに沿って進めていきます。

• Building the UI
  • Build a Basic UI
  • Connect the UI to Code （今回はここ）
  • Work with View Controllers
  • Implement a Custom Control
  • Define Your Data Model
• Working with Table Views
  • Create a Table View
  • Implement Navigation
  • Implement Edit and Delete Behavior
  • Persist Data

Connect the UI to Code

今回は以下のレッスンで出てきたものについて見ていきます。

■ UIViewController

MVCのCにあたる部分で、アプリケーションの画面や画面の遷移を管理します。

チュートリアルでの使用例

ViewController.swift

class ViewController: UIViewController {

ドキュメント

• 公式
  UIViewController

• 参考
  http://matome.naver.jp/odai/2140880437092838601
  http://qiita.com/edo_m18/items/189acd18f1ecc368b5b0

■ @IBOutlet

Interface Builderから作成したパーツをコード内のプロパティと接続する属性。
IB は Interface Builder の略。
ストーリーボードからパーツを crl を押しながらコードにドラッグすると自動的に挿入され、接続される。

チュートリアルでの使用例

ViewController.swift

    @IBOutlet weak var nameTextField: UITextField!
    @IBOutlet weak var mealNameLabel: UILabel!

ドキュメント

• 参考
  http://iphone-app-program.com/newapp/iboutlet-and-ibaction/ibbas/

■ UITextField

テキストフィールドを管理するクラス。
ユーザーが編集可能な文字列を表示する。

チュートリアルでの使用例

ViewController.swift

@IBOutlet weak var nameTextField: UITextField!

ドキュメント

• 公式
  UITextField

• 参考
  http://swift-salaryman.com/uitextfield.php
  http://iphone-tora.sakura.ne.jp/uitextfield.html

■ @IBAction

メソッドの前につけると、そのメソッドを Interface builder から指定・使用することができるようになる。
@IBOutlet同様、ストーリーボードからパーツを crl を押しながらコードにドラッグすると自動的に挿入され、接続される。

チュートリアルでの使用例

ViewController.swift

@IBAction func setDefaultLabelText(_ sender: UIButton) {
}

ドキュメント

• 参考
  https://www.youtube.com/watch?v=tvZz6sJ5lXI&index=36&list=PL9keCq_8Sv07r8uM4k8lNZdvF-KnHlwvO

■ UITextFieldDelegate

UITextFieldに関するdelegateプロトコル。
このプロトコルを採用することでTextFieldからいろいろなメッセージを受け取ることができ、
例えば、キーボードのリターンキーを押したときにコールされる textFieldShouldReturn メソッド等を実装できる。

delegateとは、あるオブジェクトの処理を別のオブジェクトに任せることです。
参考：https://www.youtube.com/watch?v=Ph8d_UkQeIU

チュートリアルでの使用例

↓ViewControllerをUITextFieldDelegateに適応させる

ViewController.swift

class ViewController: UIViewController, UITextFieldDelegate {

↓UITextFieldDelegateのメソッドを実装

ViewController.swift

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // Hide the keyboard.
    textField.resignFirstResponder()
    return true
}

ドキュメント

• 公式
  UITextFieldDelegate

• 参考
  https://sites.google.com/site/propicaudio/sample-code/text-field
  https://www.youtube.com/watch?v=Ph8d_UkQeIU
  http://www.sirochro.com/note/swift-delegate-paturn/

■ ViewDidLoad

ViewControllerのviewがロードされた後に呼ばれる。

チュートリアルでの使用例

ViewController.swift

override func viewDidLoad() {
    super.viewDidLoad()

    // Handle the text field’s user input through delegate callbacks.
    nameTextField.delegate = self
}

ドキュメント

• 公式
  viewDidLoad()

• 参考
  http://qiita.com/mo_to_44/items/0ca628b4cc74c8c5599d#viewdidload

■ textFieldShouldReturn

UITextFieldDelegateのメソッド。
TextFieldの入力でリターンキーが押されたときに呼ばれる。

チュートリアルでの使用例

ViewController.swift

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // Hide the keyboard.
    textField.resignFirstResponder()
    return true
}

ドキュメント

• 公式
  textFieldShouldReturn(_:)

• 参考
  https://akira-watson.com/iphone/textfield.html

■ resignFirstResponder

TextFieldに対して実装するとキーボートをtボートを閉じることができる。

チュートリアルでの使用例

ViewController.swift

func textFieldShouldReturn(_ textField: UITextField) -> Bool {
    // Hide the keyboard.
    textField.resignFirstResponder()
    return true
}

ドキュメント

• 公式
  resignFirstResponder()

■ textFieldDidEndEditing

TextFieldの編集が終了した直後に呼ばれる。

チュートリアルでの使用例

ViewController.swift

func textFieldDidEndEditing(_ textField: UITextField) {
    mealNameLabel.text = textField.text
}

ドキュメント

• 公式
  textFieldDidEndEditing(_:)

• 参考
  http://iphone-tora.sakura.ne.jp/uitextfield.html

---

参考サイト

http://matome.naver.jp/odai/2140880437092838601
http://qiita.com/edo_m18/items/189acd18f1ecc368b5b0
http://iphone-tora.sakura.ne.jp/uitextfield.html
https://akira-watson.com/iphone/textfield.html
https://sites.google.com/site/propicaudio/sample-code/text-field
https://www.youtube.com/watch?v=Ph8d_UkQeIU
http://www.sirochro.com/note/swift-delegate-paturn/
http://iphone-app-program.com/newapp/iboutlet-and-ibaction/ibbas/
http://swift-salaryman.com/uitextfield.php
https://www.youtube.com/watch?v=tvZz6sJ5lXI&index=36&list=PL9keCq_8Sv07r8uM4k8lNZdvF-KnHlwvO
http://qiita.com/mo_to_44/items/0ca628b4cc74c8c5599d#viewdidload

次のレッスン

第３回：Swiftアプリ開発チュートリアル -Food Tracker- のお供に（Work with View Controllers 編）