UIScrollViewでパラパラ画像切り替え

サンプル画像スクロールビュー画像

画像のパラパラ切り替えフォトギャラリーを作成できます。大きな画像の一部分だけを切り抜きしてマスク表示するクラスです。

UIScrollViewのクラス階層

NSObject
↑
UIResponder
↑
UIView
↑
UIScrollView

参考：UIKit Framework Reference UIScrollView Class Reference
参考：016 UIScrollViewの表示
参考：[iOS8] SwiftでUIScrollViewを利用して画像をスライド・スクロールさせる

やってみた

プロジェクトにtest_1,2,3.pngが保存されている事が前提のソースですのでご注意ください。任意のファイル名に切り替えてください。


import UIKit

class ViewController: UIViewController {
    
    var scrollView: UIScrollView!
    var pageImagesArr = ["test_1.png","test_2.png","test_3.png"];

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let width = self.view.frame.maxX, height = self.view.frame.maxY
        let pageSize = self.pageImagesArr.count;
        
        //ScrollViewの作成
        scrollView = UIScrollView(frame: self.view.frame)
        scrollView.pagingEnabled = true
        scrollView.frame = CGRectMake(0,0,width,height);
        scrollView.contentSize = CGSizeMake(CGFloat(pageSize) * width, 0)
        
        //各ページの作成
        for var i = 0; i < pageSize; i++ {
            let img:UIImage = UIImage(named:self.pageImagesArr[i])!;
            let iv:UIImageView = UIImageView(image:img);
            iv.frame = CGRectMake(CGFloat(i) * width, 0, width, height);
            scrollView.addSubview(iv)
        }
        self.view.addSubview(scrollView)
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

上記太字のcontentSizeが全体のサイズ, 一方frame一コマのサイズとなります。ここを切り替えることで表示の枠を調整できます。

スクロールビュー画像

カスタマイズ

①表示枠を切り替えた場合(100x100にする)

フレームの指定領域毎に切り替わります。マスクされた状態。

サンプル画像


        scrollView.frame = CGRectMake(0,0,100,100);

②pagingEnabledをfalseにする

trueの場合はframe毎に切り替わりますが、falseの場合は止まることなくぬめ〜と動くようになります。

サンプル画像


        scrollView.pagingEnabled = false;

まとめ

思ったよりも簡単に実装できました。もっとGestureイベント等を追加する必要があるかと思いましたが既に実装されているようです。これの応用でPageControlを利用してチュートリアル画面を作成したりもできますので、過去記事のUIPageControlもよろしければご一読ください！

#2015/2/23 追記
横スクロールしながら各ページを２本指でズームする記事を追加しましたUIScrollView2!

↓こんな記事もありますよ！

	SwiftData＋SqliteのDBファイル保存+Libraryフォルダから読込さて、私の目標は事前に作成したSqliteのDBファイルをSwiftDataで読み込むことですので、その一連の作業を以下説明してまいります。
	String StringとNSStringどちらを利用することもできますが、、、
	アップルWatchから親アプリケーションへデータ送信前回の記事では実機上で親アプリケーションからAppleWatchにイベントを送るのができなかった。 Notificationでできるはずなのですが、動作してくれなかった、、、、、。今回はいったん逆の時計から親アプリへのデータ送信の方法サンプルサイトをQiita様の中の記事でみつけましたので検証してみます。