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!

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

	デバッグ時とリリース時に処理を変更する#ifdef DEBUG のやり方 DEBUG時だけ特定の動作をさせて、リリース時に排除したい、そんな時に利用する方法です。Swiftでは標準ではDEBUGとリリースの判断がつかないので、コンパイル時に設定する必要があります
	Typealiasをどうやって活用するのか Typealiasって言葉、なんだややこしく見て見ないふりをしていましたが、先日別の記事を書いた際にTypealiasの記述がありましたので、あらためて確認してみようと思います。まずaliasですが、 Macでショートカットを作成した時に記載される「エイリアス」です。ショートカットのようなものですので、 Typeのショートカット的な感覚で調査進めてまいります。
	UINavigationController TabBarとUITableViewControllerを利用して一つのUIViewControllerだけをクリックすると右にスライドするUINavigationControlerを利用したサンプルを記載します。というのも、AppDelegate内でUINavigationをself.windowのrootviewcontrollerにセットする方法は多々あったのですが、AppDelegate内を利用しないでNavigationを実装する方法がなくハマっていましたのでを以下記載します