UICollectionView 实现的简易相册,可以缩放

图片是我自己找的 png 格式的,下次为大家分享网络请求出来的图片制作成的简易相册,

1. 首先创建视图控制器,在视图控制器的. m 文件里边创建 scrollView, 并对 scrollView 进行设置. 然后创建数组,保存相片的名称,通过 for 循环,创建 imageView, 并设置,添加轻拍手势,点击之后进入到下一视图控制器显示,代码如下 : RootViewController.m

#import "RootViewController.h"

#import "PhotoViewController.h"

@interface RootViewController (){

   UIScrollView *rootScrollView;  //此处将 scrollView 声明成私有属性,方便使用

}

@end

@interface RootViewController ()

@end

@implementation RootViewController

- (void)viewDidLoad {

    [superviewDidLoad];

    // Do any additional setup after loading the view.

   //设置导航栏标题

    self.navigationItem.title =@"相册";

   CGSize size = [UIScreenmainScreen].bounds.size;

    //创建滚动视图 rootScrollView

    rootScrollView = [[UIScrollViewalloc]initWithFrame:[UIScreenmainScreen].bounds];

   rootScrollView.contentSize =CGSizeMake(size.width, size.height);

    [self.viewaddSubview:rootScrollView];

    //创建一个数组用来保存照片名字

    NSArray *nameArray =@[@"image_01",@"image_02",@"image_03",@"image_04",@"image_05",@"image_06",@"image_07",@"image_08",@"image_09"];

   NSInteger n =0;

   //通过 for循环,将照片缩略图添加到滚动视图上

   for (NSInteger i =0; i <3; i++) {

       for (NSInteger j =0; j <3; j++) {

        //创建图片视图

       UIImageView *imageView = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:nameArray[n++]]];

        //设置图片视图的 tag值

        imageView.tag =100 +3 *  i + j;

            imageView.userInteractionEnabled =YES; //打开 imageView的交互

            imageView.frame =CGRectMake(size.width /3 * j, size.height /3.3 * i, size.width /3, size.height /3.3);

            //创建轻拍手势,并关联方法,来实现点击缩略图进入大图的效果

           UITapGestureRecognizer *tapPhoto = [[UITapGestureRecognizeralloc]initWithTarget:selfaction:@selector(handleTap:)];

            [imageView addGestureRecognizer:tapPhoto];

            [tapPhotorelease];

            [rootScrollViewaddSubview:imageView];

            [imageViewrelease];

            //当 for循环将照片全部添加后, break停止循环

           if (i ==2 && j ==2) {

               break;

            }

       }

    }

}

//tap 手势的方法,实现缩略图视图和大视图之间的切换

- (void)handleTap:(UITapGestureRecognizer *)sender{

    PhotoViewController *photoVC = [[PhotoViewControlleralloc]init];

    photoVC.number = sender.view.tag;

    [self.navigationControllerpushViewController:photoVCanimated:YES];

    [photoVCrelease];

}

2. 下一视图控制器的. h 文件里声明属性 ,index (NSInteger 类型) 用于接收轻拍图片 传过来的对应图片的下标 ,并且遵守代理 ,确保图片缩放之后图片在切换到下一图片的时候,该图片大小变回原来大小.代码如下 PhotoViewController.m

#import "PhotoViewController.h"

@interface PhotoViewController (){

   UIScrollView *bigScrollView;

   NSInteger flag;

}

@end

@interface PhotoViewController () <UIScrollViewDelegate>

@end

@implementation PhotoViewController

- (void)viewDidLoad {

    [superviewDidLoad];

      //取消自动布局,滑动的时候图片已经固定在视图上

    self.automaticallyAdjustsScrollViewInsets =NO;

   // Do any additional setup after loading the view.

    self.view.backgroundColor = [UIColorwhiteColor];

   CGSize size = [UIScreenmainScreen].bounds.size;

   flag =0;

    NSArray *nameArray = @[@"image_01",@"image_02",@"image_03",@"image_04",@"image_05",@"image_06",@"image_07",@"image_08",@"image_09"];

    bigScrollView = [[UIScrollViewalloc]initWithFrame:[UIScreenmainScreen].bounds];

   bigScrollView.contentSize =CGSizeMake(size.width * nameArray.count, size.height);

    bigScrollView.pagingEnabled =YES; //scrollView 整屏滑动

    bigScrollView.delegate =self;

    [self.viewaddSubview:bigScrollView];

    [bigScrollViewrelease];

    for (int i =0 ; i < nameArray.count; i++) {

       UIScrollView *smallScrollView = [[UIScrollViewalloc]initWithFrame:CGRectMake(size.width * i,0, size.width, size.height)];

        smallScrollView.minimumZoomScale =0.5; //最小缩放比例

        smallScrollView.maximumZoomScale =2; //最大缩放比例

        smallScrollView.delegate =self;

        [bigScrollViewaddSubview:smallScrollView];

        [smallScrollViewrelease];

        UIImageView *imageView = [[UIImageViewalloc]initWithImage:[UIImageimageNamed:nameArray[i]]];

        imageView.frame =CGRectMake(0,0, size.width, size.height);

        imageView.tag =100;

        [smallScrollViewaddSubview:imageView];

        [imageViewrelease];

    }

   bigScrollView.contentOffset =CGPointMake(size.width * (self.number -100),0);

}

////保持视图在缩放的过程中,中心点始终在屏幕的中心位置

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

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

       UIView *imageView = [scrollViewviewWithTag:100];

       CGFloat content_w = scrollView.contentSize.width;

       CGFloat content_h = scrollView.contentSize.height;

       CGFloat width = scrollView.bounds.size.width;

       CGFloat height = scrollView.bounds.size.height;

        CGFloat delta_x = width > content_w ? (width - content_w) /2 :0;

       CGFloat delta_y = height > content_h ? (height - content_h) /2 :0;

        imageView.center =CGPointMake(content_w /2 + delta_x, content_h / 2 + delta_y);

    }

}

//图片缩放

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

   if (scrollView !=bigScrollView) {

       return [scrollViewviewWithTag:100];

    }else{

       returnnil;

    }

}

//当前图片即将消失的时候,缩放比例变为1

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

   if (scrollView ==bigScrollView) {

       NSInteger currentPage =bigScrollView.contentOffset.x /CGRectGetWidth(self.view.bounds);

       if (currentPage !=flag) {

           UIScrollView *smallScrollView = [bigScrollView.subviewsobjectAtIndex:flag];

            smallScrollView.zoomScale =1.0;

           flag = currentPage;

        }

    }

}