[iOS8] SwiftでUIScrollViewを利用して画像をスライド・スクロールさせる

swift上で画像を上下・左右にスライド・スクロールさせたい時の実装をサンプルコードをみながら説明していきます。
以下、２パターンを例に見ていこうと思います。

【パターン】
①画像を上下左右にスライドする
②画像を上下左右にスクロールする

【フレームワーク】
UIScrollView, UIImageView, UIImage

【事前準備】
画像：img1.png, img2.png, img3.pngの３枚を利用しています。

【サンプルコード】
https://github.com/eversense-maezawa/Swift-UIScrollView-Example
<h2>1. スライド</h2><h3>**1.1 左右にスライドさせる**</h3>
実装結果とサンプルコードになります。
<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/scroll2.gif"><img class="alignnone size-full wp-image-292" src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/scroll2.gif" alt="scroll2" width="240" height="236" /></a>

<pre class="lang:swift decode:true" title="ScrollView-Smaple.swift">        
        //UIImageに画像の名前を指定します
        let img1 = UIImage(named:"img1.jpg");
        let img2 = UIImage(named:"img2.jpg");
        let img3 = UIImage(named:"img3.jpg");
        
        //UIImageViewにUIIimageを追加
        let imageView1 = UIImageView(image:img1)
        let imageView2 = UIImageView(image:img2)
        let imageView3 = UIImageView(image:img3)

        //UIScrollViewを作成します
        let scrView = UIScrollView()

        //UIScrollViewの1ページ分のサイズ + 表示位置 
        scrView.frame = CGRectMake(0, 0, 240, 240)

        //全体のサイズ
        scrView.contentSize = CGSizeMake(240, 240*3)
        
        //UIImageViewのサイズと位置を決めます
        imageView1.frame = CGRectMake(0, 0, 240, 240)
        imageView2.frame = CGRectMake(240, 0, 240, 240)
        imageView3.frame = CGRectMake(480, 0, 240, 240)

        //viewに追加します
        self.view.addSubview(scrView)

        //UIImageViewをScrollViewに追加します
        scrView.addSubview(imageView1)
        scrView.addSubview(imageView2)
        scrView.addSubview(imageView3)

        // １ページ単位でスクロールさせる
        scrView.pagingEnabled = true
</pre>

ポイントとなるのは、以下３点のサイズになります。
（ UIScrollView全体 ） &gt;=（ UIScrollView × ページ数 ）&gt;=（ UIImageView × ページ数 ）
基本的に、スクロール可能領域を超えたサイズの画像をスクロールさせることは挙動がおかしくなるのでやめましょう。
<h3>**1.2 上下にスライドさせる**</h3>
1.1のサンプルコードを変更します。
UIImageViewと、UIScrollViewのx座標とy座標を入れ替えます。

<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/Scroll-UpDown-PageEnable-YES.gif"><img class="alignnone size-full wp-image-296" src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/Scroll-UpDown-PageEnable-YES.gif" alt="Scroll-UpDown-PageEnable-YES" width="240" height="238" /></a>
<pre class="lang:swift decode:true" title="ScrollView-Smaple.swift">        
    //全体のサイズ
    scrView.contentSize = CGSizeMake(240*3, 240)  //変更箇所
        
        //UIImageViewのサイズと位置を決めます
        imageView1.frame = CGRectMake(0, 0, 240, 240)
        imageView2.frame = CGRectMake(0, 240, 240, 240)  //変更箇所
        imageView3.frame = CGRectMake(0, 480, 240, 240)  //変更箇所
</pre>
&nbsp;
<h2>2. スクロール</h2><h3>**2.1 左右にスクロールさせる**</h3>
1.1からのソースコードの変更点は１箇所です。

<img class="alignnone size-full wp-image-291" src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/scroll.gif" alt="scroll" width="240" height="240" />
<pre class="lang:swift decode:true" title="ScrollView-Smaple.swift">
     //scrView.pagingEnabled = true  //コメントアウト
     scrView.pagingEnabled = false   //もしくはfalseを返す</pre>
<h3>**2.2 上下にスクロールさせる**</h3>
1.2からの変更点は上記と同様です。

<a href="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/Scroll-UpDown-PageEnable-NO.gif"><img class="alignnone size-full wp-image-297" src="http://tech.eversense.co.jp/wp/wp-content/uploads/2014/10/Scroll-UpDown-PageEnable-NO.gif" alt="Scroll-UpDown-PageEnable-NO" width="240" height="240" /></a>  


【サンプルコード】
https://github.com/eversense-maezawa/Swift-UIScrollView-Example  


以上、swiftでUIScrollViewを利用して画像をスライド・スクロールさせる方法は終了です。
ありがとうございました。