LoginSignup
3
3

More than 5 years have passed since last update.

【第4回】Swiftアプリ開発チュートリアル -Food Tracker- のお供に(Implement a Custom Control 編)

Last updated at Posted at 2015-10-28

はじめに

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

Implement a Custom Control

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

■ UIView

画面表示とその領域内のコンテンツを管理するクラス。
チュートリアルでは、rating部分をカスタムビューとして切り分ける際に使用している。

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

RatingControl.swift
import UIKit

class RatingControl: UIView {

}

ドキュメント

■ init?(coder aDecoder: NSCoder)

UIViewのサブクラスでオーバーライドする必要があるinitializer。
Interface Builderからそのビューを呼び出す場合に使用する。
Interface Builderでビューを構築しない場合はinitializerとしてinit(frame frame: CGRect)をオーバーライドする。

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

RatingControl.swift
required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
}

ドキュメント

■ intrinsicContentSize

ビューのサイズを指定して返し、それをレイアウトシステムに伝える役割を果たすメソッド。

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

RatingControl.swift
override func intrinsicContentSize() -> CGSize {
    return CGSize(width: 240, height: 44)
}

ドキュメント

■ addTarget

UIControlクラスにて定義されているメソッド。
特定のイベントが起こった時に指定したターゲットに対して、指定したアクションを起こすことができる。

チュートリアルでは、ボタンがタップ(TouchDown)された時、自身(self)の ratingButtonTappedを起動している。

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

RatingControl.swift
button.addTarget(self, action: "ratingButtonTapped:", forControlEvents: .TouchDown)

ドキュメント

■ layoutSubviews()

UIViewクラスのメソッド。
この中にサブビューのレイアウト処理を書くことでviewの状態に合わせて必要な時にレイアウト処理が行われる。

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

RatingControl.swift
override func layoutSubviews() {
    var buttonFrame = CGRect(x: 0, y: 0, width: 44, height: 44)

    // Offset each button's origin by the length of the button plus spacing.
    for (index, button) in ratingButtons.enumerate() {
        buttonFrame.origin.x = CGFloat(index * (44 + 5))
        button.frame = buttonFrame
    }
}

ドキュメント

■ enumerate()

Swiftの標準関数。
配列からそれぞれのインデックスと値を持つタプルをkタプルを返す。

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

RatingControl.swift
for (index, button) in ratingButtons.enumerate() {
    buttonFrame.origin.x = CGFloat(index * (44 + 5))
    button.frame = buttonFrame
}

ドキュメント

■ setImage(_:forState:)

UIButtonクラスのメソッド。
ボタンの見た目として独自に用意した画像を使用することができる。
forStateでボタンがどういう状態の時の画像かが設定できるため、
ボタンの状態によって画像を変更することが可能。

状態を表すUIControlStateこちら

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

RatingControl.swift
button.setImage(emptyStarImage, forState: .Normal)
button.setImage(filledStarImage, forState: .Selected)
button.setImage(filledStarImage, forState: [.Highlighted, .Selected])

ドキュメント

■ adjustsImageWhenHighlighted

UIButtonクラスのプロパティ。
ボタン画像がHighlightedの状態になった時に画像を変更するかどうかの真偽値。

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

RatingControl.swift
button.adjustsImageWhenHighlighted = false

ドキュメント

■ indexOf

配列や辞書の中の値を渡すことでその値のインデックスを返す。

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

RatingControl.swift
rating = ratingButtons.indexOf(button)! + 1

タップされたボタンのインデックス+1をratingの値にしている。

ドキュメント

■ didSet

プロパティ監視
プロパティに設定することでプロパティの値が変わった後に起こる処理を書くことができる。

同様にプロパティの値が変わる前に起こる処理を書く場合はwillSetを使う。

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

RatingControl.swift
var rating = 0 {
didSet {
    setNeedsLayout()
}
}

ドキュメント

■ setNeedsLayout()

layoutSubviews()を呼び出し、レイアウトを更新する。

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

RatingControl.swift
var rating = 0 {
    didSet {
        setNeedsLayout()
    }
}

ドキュメント


参考サイト

次回レッスン

第5回:Swiftアプリ開発チュートリアル -Food Tracker- のお供に(Define Your Data Model 編)

3
3
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
3
3