iOS 圖片捏合放大縮小 點擊放大縮小

此處的圖片控件,我用的是UIButton,因爲它自身有點擊事件,不過UIImageView同理,爲其添加手勢即可實現同樣的效果。

//

//  ServiceResultViewController.m

//  Created by msk on 16/3/7.

//


#import "ServiceResultViewController.h"


static CGRect oldframe;//用於記錄按鈕放大之前的frame

@interface ServiceResultViewController ()<UIScrollViewDelegate>{

    

    UIView *imgView;//展示圖片的父視圖

    NSMutableArray *imagesArray;//存儲圖片

    CATransition *animation;//縮放動畫效果

    CGFloat scaleNum;//圖片放大倍數

}

@property(nonatomic,strong)UIScrollView *scrollview;//用於捏合放大與縮小的scrollView

@property(nonatomic,strong)UIButton *imgButton;//顯示圖片的按鈕

@end


@implementation ServiceResultViewController


#pragma mark - 獲取圖片

- (void)viewDidLoad {

    [super viewDidLoad];

    self.view.backgroundColor=[UIColor whiteColor];

    imagesArray=[NSMutableArray array];


    //獲取網絡圖片並存入到imagesArray中的代碼,放到此處,此處以本地圖片爲例

    for (int i=0; i<5; i++) {

        UIImage *image=[UIImage imageNamed:@"default_head"];

        [imagesArray addObject:image];

    }

    //然後進行視圖的佈局,進行圖片的顯示

    NSInteger rows =imagesArray.count%3==0?imagesArray.count/3:imagesArray.count/3+1;

    CGFloat height = ((WIDTH -20)/3)+2.5;

    imgView = [[UIView alloc]initWithFrame:CGRectMake(0,64,WIDTH, (10+(5+height)*rows))];

    [self.view addSubview:imgView];

 

    [selfloadImageShowOnView];

}


#pragma mark - 展示圖片

-(void)loadImageShowOnView{

    CGRect aRect, bRect, bounds = CGRectMake(2.5, 10, imgView.bounds.size.width,10000000);    

    NSInteger rows =imagesArray.count%3==0?imagesArray.count/3:imagesArray.count/3+1;

    for (int i =0; i<rows; i++) {

        DivideWithPadding(bounds, &aRect, &bounds,90,5,CGRectMinYEdge);

        for (int m =0; m<3; m++) {

            NSInteger index = i * 3 + m;

            if (index >= imagesArray.count) {

                return;

            }

            DivideWithPadding(aRect, &bRect, &aRect, bounds.size.width/3-5,5,CGRectMinXEdge);

            UIImage *img= [imagesArray objectAtIndex:index];

            UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];

            button.frame = bRect;

            [button setImage:imgforState:UIControlStateNormal];

            [button addTarget:self action:@selector(enlargeImage:) forControlEvents:UIControlEventTouchUpInside];

            button.exclusiveTouch =YES;//禁止兩個按鈕同時被點擊,引起圖片顯示錯亂現象發生

            [imgView addSubview:button];

        }

    }

}


#pragma mark - 放大圖片

-(void)enlargeImage:(UIButton *)button{

    scaleNum=1;

    UIWindow *window=[UIApplication sharedApplication].keyWindow;

    UIView *backgroundView=[[UIView alloc]initWithFrame:CGRectMake(0,0, [UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height)];

    oldframe=[button convertRect:button.bounds toView:imgView];

    backgroundView.backgroundColor=[UIColor blackColor];

    backgroundView.alpha=0;

    button.tag=1;

    

    //添加捏合手勢,放大與縮小圖片

    self.scrollview=[[UIScrollView alloc]initWithFrame:backgroundView.bounds];

    self.imgButton=button;

    [self.scrollview addSubview:button];

    

    //設置UIScrollView的滾動範圍和圖片的真實尺寸一致

    self.scrollview.contentSize=button.frame.size;

    //設置實現縮放

    //設置代理scrollview的代理對象

    self.scrollview.delegate=self;

    //設置最大伸縮比例

    self.scrollview.maximumZoomScale=3;

    //設置最小伸縮比例

    self.scrollview.minimumZoomScale=1;

    [self.scrollview setZoomScale:1animated:NO];


    self.scrollview.scrollsToTop =NO;

    self.scrollview.scrollEnabled =YES;

    self.scrollview.showsHorizontalScrollIndicator=NO;

    self.scrollview.showsVerticalScrollIndicator=NO;

    

    [backgroundView addSubview:self.scrollview];

    [window addSubview:backgroundView];

    

    //單擊手勢

    UITapGestureRecognizer *singleTapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@selector(handleSingleTap:)];

    singleTapGesture.numberOfTapsRequired = 1;

    singleTapGesture.numberOfTouchesRequired  =1;

    [backgroundView addGestureRecognizer:singleTapGesture];

    

    //雙擊手勢

    UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc]initWithTarget:selfaction:@selector(handleDoubleTap:)];

    doubleTapGesture.numberOfTapsRequired = 2;

    doubleTapGesture.numberOfTouchesRequired =1;

    [backgroundView addGestureRecognizer:doubleTapGesture];

    

    [singleTapGesture requireGestureRecognizerToFail:doubleTapGesture];

    

    [UIViewanimateWithDuration:0.3animations:^{

        button.frame=CGRectMake(0,([UIScreen mainScreen].bounds.size.height-(button.frame.size.height*[UIScreen mainScreen].bounds.size.width/button.frame.size.width+80))/2, [UIScreen mainScreen].bounds.size.width, button.frame.size.height*[UIScreen mainScreen].bounds.size.width/button.frame.size.width+80);

        backgroundView.alpha=1;

    } completion:^(BOOL finished) {

        button.userInteractionEnabled=NO;

    }];

}


#pragma mark - 還原圖片

-(void)hideImage:(UITapGestureRecognizer*)tap{

    UIView *backgroundView=tap.view;

    UIButton *button=(UIButton *)[tap.viewviewWithTag:1];    

    animation = [CATransition animation];

    animation.duration =0.2;

    animation.timingFunction =UIViewAnimationCurveEaseInOut;

    animation.fillMode =kCAFillModeForwards;

    animation.type =kCATransition;

    backgroundView.alpha=0;

    [backgroundView.layer addAnimation:animation forKey:@"animation"];

    button.frame=oldframe;

    [imgView addSubview:button];

    button.userInteractionEnabled=YES;

}

#pragma mark - 處理單擊手勢

-(void)handleSingleTap:(UIGestureRecognizer *)sender{    

    UITapGestureRecognizer *tap=(UITapGestureRecognizer *)sender;

    [self hideImage:tap];

}

#pragma mark - 處理雙擊手勢

-(void)handleDoubleTap:(UIGestureRecognizer *)sender{

    if (scaleNum>=1&&scaleNum<=2) {

        scaleNum++;

    }else{

        scaleNum=1;

    }

    [self.scrollviewsetZoomScale:scaleNumanimated:YES];

}

#pragma mark - UIScrollViewDelegate,告訴scrollview要縮放的是哪個子控件

-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{

    return self.imgButton;

}

#pragma mark - 等比例放大,讓放大的圖片保持在scrollView的中央

- (void)scrollViewDidZoom:(UIScrollView *)scrollView{

    CGFloat offsetX = (self.scrollview.bounds.size.width > self.scrollview.contentSize.width)?(self.scrollview.bounds.size.width - self.scrollview.contentSize.width) *0.5 : 0.0;

    CGFloat offsetY = (self.scrollview.bounds.size.height > self.scrollview.contentSize.height)?

    (self.scrollview.bounds.size.height - self.scrollview.contentSize.height) *0.5 : 0.0;

    self.imgButton.center =CGPointMake(self.scrollview.contentSize.width *0.5 + offsetX,self.scrollview.contentSize.height *0.5 + offsetY);

}

#pragma mark - 自動排列圖片

void DivideWithPadding(CGRect rect,CGRect *slice,CGRect *remainder,CGFloat amount,CGFloat padding,CGRectEdge edge) {

    CGRect tmpSlice;

    CGRectDivide(rect, &tmpSlice, &rect, amount, edge);

    if (slice) {

        *slice = tmpSlice;

    }

    CGRectDivide(rect, &tmpSlice, &rect, padding, edge);

    if (remainder) {

        *remainder = rect;

    }

}

- (void)didReceiveMemoryWarning {

    [superdidReceiveMemoryWarning];

    // Dispose of any resources that can be recreated.

}


@end



發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章