Swiftで遊ぼう! on Hatena

あしたさぬきblogでやってた初心者オヤジのiOSプログラミング奮闘記がHatenaに来ました

Swiftで遊ぼう！ - 697 - Closures, Extensions, Protocols, Delegation, and ScrollView 8

講義7の最後はUIScrollViewを組み込むだけです。

Developing iOS 9 Apps with Swift - Free Course by Stanford on iTunes U

ScrollViewの組み込みも2年前の講義の復習になります。座標システムは同じなので以下を参照します。

yataiblue.hatenablog.com

Cassiniプロジェクトも2年前とほどんと同じなんですが、微妙に変えてあるんです。2年前はCassiniプロジェクトでは、SpritView Controllerを最初に組み込んでいるんですが、今年のCassiniプロジェクトは最初にScrollViewを組み込みます。

今回のポイントは、コードで作ったUIImageViewオブジェクトにstroyboardで視覚的に作ったScrollViewを組み合わせる方法です。

オブジェクト・ライブラリからScrollViewを選んで、storyboardに設定します。画面一杯に広げてコンストレイントを設定します。次に制御するためにImageViewControllerのクラス内に「Ctrl + ドラッグ」して@IBOutletを作ります。

@IBOutlet weak var scrollView: UIScrollView!

imageViewはroot viewに組み込まれているんで、scrollViewのサブビューとしてimageViewを組み込むようにviewDidLoad()メソッド内のコードを変えます。

override func viewDidLoad() {
    super.viewDidLoad()
    scrollView.addSubview(imageView)
    imageURL = NSURL(string: DemoURL.Stanford )
}

これで大丈夫!　早速ラン!

しかし、画像は動きません。どうしてでしょう?

ポール先生も学生に質問しています。

答えは簡単ですね。scrolViewのcontentSizeが(0, 0)なんでスクロールできないんです。スクロールエリアからはみ出ている画像が表示されているだけになります。

contentSizeを設定すべきタイミングはいつか?　ここで少し考察が要ります。まずimageViewに画像が取りこまれる時ですが、imageViewが変化するタイミングはimageが新しく設定された時なんで、imageの「set」を変更します。

private var image: UIImage? {
    get {
        return imageView.image
    }
    set {
        imageView.image = newValue
        imageView.sizeToFit()
        scrollView?.contentSize = imageView.frame.size
    }
}

ここでscrollViewをオプショナルチェインでチェックしているのには理由があります。scrollViewはOutletなんでオプショナル型です。アプリを最初に立ち上げた時にimageプロパティが設定される時にscriollViewはnilの可能性があります。最初は@IBOutletは少し遅れている可能性があるからです。

ということは@IBOutletが実体化するタイミングでscrollViewのコンテントサイズを設定する必要もあります。

@IBOutlet weak var scrollView: UIScrollView! {
    didSet {
        scrollView.contentSize = imageView.frame.size
    }
}

これでscrollViewが組み込まれました。ランしてみます。

f:id:yataiblue:20160604203118j:plain

スイスイ動きます。ScrollViewも意外と簡単に実装できますね。2年前はちょっと難しく考えすぎていたようです。

今日はここまで。