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!

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

2021-04-22 14:54:53	かっこいいカルーセル厳選3点！WebGLを使った渋い画像スライダー。昨日カッコいいスライダーを探す旅にでていました。よく使われるswiper など、シンプルで使いやすくデザインも良いのですが、何かもの足りない、、、。そこで調べていくと、webglを使...
2021-04-20 14:46:43	Twillioとは何？？skywayとは何が違うのか。webrtcを使う際に判断する情報。先日webrtc開発で「twillio」といった名前を聞きました。以前自分でskywayを使ってwebrtcを試していた際に調べた時には、無かったような気もするんだけと、KDDIが絡んでいる...
2021-04-19 13:58:21	先日久々にアップデートした妊娠週刊パパのAndroid版も。アカウント移管したいんだけど、注文ID見当たらないよ。先日の妊娠、出産、育児関連のアプリ「妊娠週刊パパ」をAndroid studioで再リリースしようと思ってるんだけど、コンパイル失敗してエミュレータで動かせない。多分sdkとかapiのバージ...