Swift転職なら=>【LevTech】
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大
↑クリックして拡大

頭痛が減ったので共有です!

rebuild.fmを応援しています!

HOME > ScrollViewで2指でPinch Zoom

ScrollViewで横スクロールしつつ2指でPinch Zoom

前回のScrollView記事ではスワイプするサンプルを記載しましたが、今回は横スクロールしつつ各ページでは二つ指によるズームの方法を検証します。

サンプル画像


参考:画像をダブルタップとピンチイン・ピンチアウトで拡大・縮小する
参考:UIScrollViewのサブビューを拡大した後におかしくなる
参考:UIScrollView - 拡大縮小
参考:How To Use UIScrollView to Scroll and Zoom Content in Swift

やってみた

画像一枚だけでのピンチズームのサンプルは多かったのですが、マンガアプリの様に横スクロールしつつ拡大縮小も行うサンプルが少なかったです。Objective-Cでのサンプルが あったのでSwift用に微調整してみました。

サンプル画像サンプル画像


import UIKit

class ViewController: UIViewController , UIScrollViewDelegate{
    
    var mainScrollView: UIScrollView!
    var pageImagesArr = ["tutorial_page_1.png","tutorial_page_2.png","tutorial_page_3.png"];
    
    let C_IMAGEVIEW_TAG = 1000;
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        mainScrollView = UIScrollView(frame: self.view.bounds)
        mainScrollView.pagingEnabled = true;
        mainScrollView.showsHorizontalScrollIndicator = false;
        mainScrollView.showsVerticalScrollIndicator = false;
        
        var innerScrollFrame:CGRect = mainScrollView.bounds;
        
        var pageSize = self.pageImagesArr.count;
        for (var i = 0; i < pageSize; i++) {
            
            let img:UIImage = UIImage(named:self.pageImagesArr[i])!;
            let iv:UIImageView = UIImageView(image:img);
            iv.frame = mainScrollView.frame;
            iv.tag = i + C_IMAGEVIEW_TAG;
            
            var pageScrollView = UIScrollView(frame: innerScrollFrame)
            pageScrollView.minimumZoomScale = 1
            pageScrollView.maximumZoomScale = 2
            pageScrollView.zoomScale = 1;
            pageScrollView.contentSize = iv.bounds.size;
            pageScrollView.delegate = self
            pageScrollView.showsHorizontalScrollIndicator = false;
            pageScrollView.showsVerticalScrollIndicator = false;
            pageScrollView.addSubview(iv);
            
            mainScrollView.addSubview(pageScrollView);
            
            if (i < 2) {
                innerScrollFrame.origin.x = innerScrollFrame.origin.x + innerScrollFrame.size.width;
            }
        }
        
        mainScrollView.contentSize = CGSizeMake(innerScrollFrame.origin.x + innerScrollFrame.size.width, mainScrollView.bounds.size.height);
        self.view.addSubview(mainScrollView);
    }
    
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        let pageNum = mainScrollView.bounds.origin.x / mainScrollView.frame.width;
        return self.view.viewWithTag(Int(pageNum)+C_IMAGEVIEW_TAG) as UIImageView;
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

ScrollViewの中にScrollViewを入れ子にして対応しています。私がハマってしまったのはviewForZoomingInScrollViewです。 この関数がScrollViewを拡大する際に「何を拡大するか」を判断する箇所ですので、ここの指定が間違っていると適切ではないViewを拡大して しまいます。上記はTagと現在のページ番号から適切な画像を計算して選んでいます。画像を適切なファイル名に切り替えてご利用ください。

カスタマイズ

画面下に現在何枚目からのPageControlを追加してみる

サンプル画像


import UIKit

class ViewController: UIViewController , UIScrollViewDelegate{
    
    var mainScrollView: UIScrollView!
    var pageControl: UIPageControl!
    var pageImagesArr = ["tutorial_page_1.png","tutorial_page_2.png","tutorial_page_3.png"];
    
    let C_IMAGEVIEW_TAG = 1000;
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        mainScrollView = UIScrollView(frame: self.view.bounds)
        mainScrollView.pagingEnabled = true;
        mainScrollView.delegate = self;
        mainScrollView.showsHorizontalScrollIndicator = false;
        mainScrollView.showsVerticalScrollIndicator = false;
        
        var innerScrollFrame:CGRect = mainScrollView.bounds;
        
        var pageSize = self.pageImagesArr.count;
        for (var i = 0; i < pageSize; i++) {
            
            let img:UIImage = UIImage(named:self.pageImagesArr[i])!;
            let iv:UIImageView = UIImageView(image:img);
            iv.frame = mainScrollView.frame;
            iv.tag = i + C_IMAGEVIEW_TAG;
            
            var pageScrollView = UIScrollView(frame: innerScrollFrame)
            pageScrollView.minimumZoomScale = 1
            pageScrollView.maximumZoomScale = 2
            pageScrollView.zoomScale = 1;
            pageScrollView.contentSize = iv.bounds.size;
            pageScrollView.delegate = self
            pageScrollView.showsHorizontalScrollIndicator = false;
            pageScrollView.showsVerticalScrollIndicator = false;
            pageScrollView.addSubview(iv);
            
            mainScrollView.addSubview(pageScrollView);
            
            if (i < 2) {
                innerScrollFrame.origin.x = innerScrollFrame.origin.x + innerScrollFrame.size.width;
            }
        }
        
        mainScrollView.contentSize = CGSizeMake(innerScrollFrame.origin.x + innerScrollFrame.size.width, mainScrollView.bounds.size.height);
        self.view.addSubview(mainScrollView);
        
        //UIPageControllの作成
        pageControl = UIPageControl(frame: CGRectMake(0, self.view.frame.maxY - 50, mainScrollView.frame.width, 50))
        pageControl.backgroundColor = UIColor.grayColor();
        pageControl.numberOfPages = pageSize
        pageControl.currentPage = 0
        pageControl.userInteractionEnabled = false
        self.view.addSubview(pageControl)
        
    }
    
    func scrollViewDidEndDecelerating(scrollView: UIScrollView) {
        let pageNum = mainScrollView.bounds.origin.x / mainScrollView.frame.width;
        pageControl.currentPage = Int(pageNum);
    }
    
    func viewForZoomingInScrollView(scrollView: UIScrollView) -> UIView? {
        let pageNum = mainScrollView.bounds.origin.x / mainScrollView.frame.width;
        return self.view.viewWithTag(Int(pageNum)+C_IMAGEVIEW_TAG) as UIImageView;
    }
    
    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }
}

まとめ

ScrollView+ピンチ拡大縮小に関しては簡単にできたのですが、ここに横スワイプが加わると手間がかかってしまいました。 このサンプルも何かのお役に立てれば嬉しいです。

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

Facebook SDK のAppEventを検証する

さて、AppEventですが、FacebookのAppを利用したログシステムなのかな。ログをカスタマイズして保存して、 それを解析できる、そんな感じなのかなと思っています。 広告利用の為に、インストールされた数やログの解析によってユーザの動作を確認できるようですので細かく設定できるのではと思います。 まずは上記のようにログを保存する、ログを読み込む、ができるのかを検証してみます

String

StringとNSStringどちらを利用することもできますが、、、

UIStepper

さて今回は基本のコンポーネントの一つStepper(メモリを少しずつ+とーで上下させるコントロール)を説明します。 単純なコントロールですのが、初期設定で、+と-が表示される優れものです。ただ、単調な為に記事にするのが面白くないので、 何度も申し訳ありませんが「ヒゲ」にフォーカスして、ヒゲを剃るStepper(ヒゲの量を調整する)を作成して説明してみます。
このエントリーをはてなブックマークに追加
右側のFacebookのLikeをクリック頂けると記事更新の際に通知されますので宜しければご利用下さい!