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!

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

	のんでいるくすり: 3.11震災時の体験から開発されたお薬アプリ。無料今日は薬を便利にかつ守秘的にメモできるアプリのんでいる薬をご紹介します。実はアプリレビューは初めて。 SwiftサラリーマンのFBページを経由して開発者でもあり薬剤師のBlueRoy(ブルーロワ・インク) Inc. のShige様とお知り合いになる事ができて、是非レビューさせて下さいと私からお願いした経緯で今回レビュー記事に繋がりました。 Shige様、快く了承頂き本当にありがとうございました！
	AppleWatchとiPhone連携をナターシャさんのデモを参考に調査先日Swiftサラリーマンに関してTwitterでつぶやいてくださっていたまっちょさんに教えていただいたAppleWatchアプリ作成に関する海外のWatchKitのナターシャさんの記事(Architecting Your App for the Apple Watch)を教えていただきました、動画やプレゼンもあり英語でしたがサンプルコードも付いていて分かりやすかったです！
	WWDC2015で面白い発表があるのかワクワクしてみる。 OS9の発表だったり、 iPadでアプリを分割して複数表示できたり、Apple Payがカナダに対応したり（それはどうでもいいですかね、、、）、盛りだくさん。Appleファンにはたまらない色んな新情報が色々でてきていますのでその中で私がきになる情報をフォーカスして少し調査してみます。 Swift関連もあるようですので共有してまいります。