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!

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

	NSThreadでスレッド処理を行うタイマー処理と同様に利用できるスレッドの処理です。NSTimerではヒゲがのびたサンプルでしたので眉毛の濃くなるサンプルにしてみます。ただ、どうやらThread処理は推奨されておらず、dispatch_queueを使用するべきのようです。
	presentViewControllerで画面遷移下からビョーン下からビョーンとUIViewControllerを出す方法を記載します。この処理も多用していたのですがこのHPになかったので追記しました。 Navigationと連動させた横へシャーと移動するスライドの関数(pop)とは違うので注意です。
	UIStepper さて今回は基本のコンポーネントの一つStepper（メモリを少しずつ+とーで上下させるコントロール）を説明します。単純なコントロールですのが、初期設定で、＋と-が表示される優れものです。ただ、単調な為に記事にするのが面白くないので、何度も申し訳ありませんが「ヒゲ」にフォーカスして、ヒゲを剃るStepper（ヒゲの量を調整する）を作成して説明してみます。