14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2015-10-21

はじめに

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

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

第1回:Swiftアプリ開発チュートリアル -Food Tracker- のお供に(Build a Basic UI 編)
第2回:Swiftアプリ開発チュートリアル -Food Tracker- のお供に(Connect the UI to Code 編)←今回はここ
第3回:Swiftアプリ開発チュートリアル -Food Tracker- のお供に(Work with View Controllers 編)
第4回:Swiftアプリ開発チュートリアル -Food Tracker- のお供に(Implement a Custom Control 編)
第5回: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 {

ドキュメント

@IBOutlet

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

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

ViewController.swift
    @IBOutlet weak var nameTextField: UITextField!
    @IBOutlet weak var mealNameLabel: UILabel!

ドキュメント

■ UITextField

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

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

ViewController.swift
@IBOutlet weak var nameTextField: UITextField!

ドキュメント

@IBAction

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

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

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

ドキュメント

■ 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
}

ドキュメント

■ ViewDidLoad

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

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

ViewController.swift
override func viewDidLoad() {
    super.viewDidLoad()
    
    // Handle the text field’s user input through delegate callbacks.
    nameTextField.delegate = self
}

ドキュメント

■ textFieldShouldReturn

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

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

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

ドキュメント

■ resignFirstResponder

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

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

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

ドキュメント

■ textFieldDidEndEditing

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

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

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

ドキュメント


参考サイト

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

次のレッスン

第3回:Swiftアプリ開発チュートリアル -Food Tracker- のお供に(Work with View Controllers 編)

14
13
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
14
13

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?