0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

UIPageContorollと拡大・ダブルタップに対応したスライドギャラリーを作る

0
Last updated at Posted at 2015-10-12

storyboardにスクロールビューとUIPageContorollを設置し、UIPageContorollにはonValueChangeアクションをひも付けておく
ここではスクロールビューの比は1:1


- (void)setUpImages {
    
    self.itemScrollView.contentSize =  CGSizeMake(self.view.frame.size.width * 3, self.view.frame.size.width);
    
    self.itemScrollView.pagingEnabled = YES;
    self.itemScrollView.showsHorizontalScrollIndicator = NO;
    self.itemScrollView.showsVerticalScrollIndicator = NO;
    
    self.itemScrollView.delegate = self;
    
    self.itemControll.numberOfPages = 3;
    // 現在のページを0に初期化する。
    self.itemControll.currentPage = 0;
    
    
    for (int i = 0; i < 3 ; i++){
        
        UIImage *image = [UIImage imageNamed:@"dummy-item.jpg"];
        UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
        imageView.frame = CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.width);
        
        UIScrollView *innerScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(self.view.frame.size.width * i, 0, self.view.frame.size.width, self.view.frame.size.width)];
        
        innerScrollView.delegate = self;
        
        innerScrollView.contentSize = imageView.bounds.size;
        
        imageView.tag = i + 1000;
        [innerScrollView addSubview:imageView];
        
        innerScrollView.minimumZoomScale = 1.0f;
        innerScrollView.maximumZoomScale = 5.0f;
        innerScrollView.showsHorizontalScrollIndicator = NO;
        innerScrollView.showsVerticalScrollIndicator = NO;
        innerScrollView.tag = i + 2000;
        
        UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(doubleTap:)];
        
        // ダブルタップを認識する設定にする
        doubleTapGesture.numberOfTapsRequired = 2;
        
        [innerScrollView addGestureRecognizer:doubleTapGesture];
        
        [self.itemScrollView addSubview:innerScrollView];
    }
    
}

- (void)doubleTap:(UIGestureRecognizer *)gesture {
    NSLog(@"%lu",gesture.view.tag);
    
    UIScrollView *tapScrollView = (UIScrollView*)[self.view viewWithTag:gesture.view.tag];
    
    if(tapScrollView.zoomScale == 1.0f)
    {
        // 現在の5倍の倍率にする
        float newScale = tapScrollView.zoomScale * 5;
        
        //拡大する領域を求める
        CGRect zoomRect = [self zoomRectForScale:newScale withCenter:[gesture locationInView:gesture.view] view:gesture.view];
        
        // タップした位置を拡大する
        [tapScrollView zoomToRect:zoomRect animated:YES];
    } else {
        // 倍率1に戻す
        [tapScrollView setZoomScale:1.0 animated:YES];
    }
}

// 指定の座標を中心にして拡大する領域を求める
- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center view:(UIView*)view {
    CGRect zoomRect;
    
    // 倍率から拡大する縦横サイズを求める
    zoomRect.size.height = [view frame].size.height / scale;
    zoomRect.size.width  = [view frame].size.width / scale;
    
    // 座標(左上)を設定する
    zoomRect.origin.x = center.x - (zoomRect.size.width/2.0);
    zoomRect.origin.y = center.y - (zoomRect.size.height/2.0);
    
    // 領域を返す
    return zoomRect;
}

- (IBAction)onValueChange:(id)sender {
    
    // スクロールビューのframeを取得
    CGRect frame = self.itemScrollView.frame;
    // _scrollViewのフレームを現在のpageControlの値に合わせる
    frame.origin.x = frame.size.width * self.itemControll.currentPage;
    frame.origin.y = 0;
    // スクロールビューを現在の可視領域にスクロールさせる
    [self.itemScrollView scrollRectToVisible:frame animated:YES];
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    CGFloat pageWidth = self.itemScrollView.frame.size.width;
    self.itemControll.currentPage = floor((self.itemScrollView.bounds.origin.x - pageWidth / 2) / pageWidth ) + 1;
    
}

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
    int pageNum = self.itemScrollView.bounds.origin.x / self.itemScrollView.frame.size.width;
    return [self.view viewWithTag:pageNum + 1000];
}

あとはsetUpImagesをViewDidLoadで呼び出す
参考サイト:【詳解 Objective-C iPhoneアプリ開発 入門ノート】で再入門iPhoneアプリ開発!

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?