图片浏览，手势放大缩小
功能：
第一页展示图片缩略图，用collectionView实现，保证长宽比；
点击图片变成横向图片浏览器，需要左右滑动切换图片，手势放大缩小，点击退出
原理分析：
第一页用collectionView展示图片，接口实现用户可选择列数
第二页滑动浏览图片底部是一个大的scrollView，里面横向设置若干个小的scrollView（需要用到scrollView的放大缩小功能）
实现步骤：
1.设置第一页缩略图展示
- (void)setupCollectionView{
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
layout.minimumInteritemSpacing = margin;
layout.minimumLineSpacing = margin;
self.collection = [[UICollectionView alloc]initWithFrame:CGRectMake(0, 0, kScreenWidth, kScreenHeight - 64) collectionViewLayout:layout];
self.collection.backgroundColor = BGColor;
self.collection.delegate = self;
self.collection.dataSource = self;
[self.view addSubview:self.collection];
[self.collection registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellID];
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.photoArray.count;
}
//每一个分组的上左下右间距
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(margin, margin, margin, margin);
}
//定义每一个cell的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{;
return CGSizeMake(_itemWidth, _itemWidth);
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
UICollectionViewCell *cell=[collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
//UICollectionViewCell *cell= [collectionView cellForItemAtIndexPath:indexPath];
cell.backgroundColor=[UIColor whiteColor];
cell.layer.cornerRadius = 10;
cell.clipsToBounds = YES;
// 移除子视图，防止循环引用
for (UIView *view in cell.contentView.subviews) {
if (view) {
[view removeFromSuperview];
}
}
UIImageView *imageView = [[UIImageView alloc]initWithFrame:cell.bounds];
UIImage *image = self.imageArray[indexPath.row];
imageView.image = image;
CGSize imageReSize = [self resizeImageSize:image.size];
imageView.frame = CGRectMake((_itemWidth - imageReSize.width) / 2, (_itemWidth - imageReSize.height) / 2, imageReSize.width, imageReSize.height);
[cell.contentView addSubview:imageView];
return cell;
}
2.缩略图的实现需要判断图片大小，以适配item长宽，调整长宽比，这里封装了方法
-(CGSize)resizeImageSize:(CGSize)size{
CGFloat width = size.width;
CGFloat height = size.height;
CGFloat maxHeight = _itemWidth;
CGFloat maxWidth = _itemWidth;
//如果图片尺寸大于view尺寸，按比例缩放
if(width > maxWidth || height > width){
CGFloat ratio = height / width;
CGFloat maxRatio = maxHeight / maxWidth;
if(ratio < maxRatio){
width = maxWidth;
height = width*ratio;
}else{
height = maxHeight;
width = height / ratio;
}
}
return CGSizeMake(width, height);
}3.设置点击跳转代理方法，点击图片把图片数组和点击的index传个下一页，下一页显示在window视图上
//cell的点击事件
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
RFPhotoScrollerView *scrollerView = [[RFPhotoScrollerView alloc]initWithImagesArray:self.imageArray currentIndex:indexPath.row];
[[[UIApplication sharedApplication] keyWindow] addSubview:scrollerView];
}4.初始化init方法，设置成员变量，添加手势和页码显示
- (instancetype)initWithImagesArray:(NSArray *)imagesArray currentIndex:(NSInteger)currentIndex{
_imagesArray = [imagesArray copy];
_currentIndex = currentIndex;
_offset = 0.0;
self = [super initWithFrame:[[UIScreen mainScreen]bounds]];
if (self) {
// 设置scrollView
[self setupScrollView];
// 添加点击手势
UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]initWithTarget:self action:@selector(tapAction:)];
[self addGestureRecognizer:tap];
// 页码显示
UILabel *pageLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.frame) - 100, kScreenWidth, 50)];
_pageLabel = pageLabel;
pageLabel.textAlignment = NSTextAlignmentCenter;
pageLabel.textColor = [UIColor whiteColor];
pageLabel.font = [UIFont systemFontOfSize:18];
pageLabel.text = [NSString stringWithFormat:@"%ld/%ld",_currentIndex+1,_imagesArray.count];
[self addSubview:pageLabel];
}
return self;
}- (void)setupScrollView{
UIScrollView *scrollView = [[UIScrollView alloc]initWithFrame:[[UIScreen mainScreen]bounds]];
self.scrollView = scrollView;
scrollView.delegate = self;
scrollView.showsHorizontalScrollIndicator = NO;
scrollView.showsVerticalScrollIndicator = NO;
scrollView.pagingEnabled = YES;
scrollView.bounces = NO;
scrollView.backgroundColor =[UIColor blackColor];
scrollView.contentSize = CGSizeMake(_imagesArray.count * kScreenWidth, kScreenHeight);
scrollView.contentOffset = CGPointMake(_currentIndex * kScreenWidth, 0);
[self addSubview:scrollView];
// 添加图片
[_imagesArray enumerateObjectsUsingBlock:^(NSString *imageNamed, NSUInteger idx, BOOL * _Nonnull stop) {
UIScrollView *itemScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(idx * kScreenWidth, 0, kScreenWidth, kScreenHeight)];
self.itemScrollView = itemScrollView;
itemScrollView.delegate = self;
itemScrollView.maximumZoomScale = 3.0;//最大缩放倍数
itemScrollView.minimumZoomScale = 1.0;//最小缩放倍数
itemScrollView.showsVerticalScrollIndicator = NO;
itemScrollView.showsHorizontalScrollIndicator = NO;
itemScrollView.backgroundColor =[UIColor blackColor];
[itemScrollView setZoomScale:1];
[self.scrollView addSubview:itemScrollView];
// 添加图片并适配
UIImage *image = _imagesArray[idx];
CGSize imageReSize = [self resizeImageSize:image.size];
UIImageView *imageView = [[UIImageView alloc]init];
[itemScrollView addSubview:imageView];
imageView.image = image;
imageView.userInteractionEnabled = YES;
[imageView setContentMode:UIViewContentModeScaleAspectFit];
imageView.frame = CGRectMake((kScreenWidth - imageReSize.width) / 2, (kScreenHeight - imageReSize.height) / 2, imageReSize.width, imageReSize.height);
}];
}
// 调整图片
-(CGSize)resizeImageSize:(CGSize)size{
CGFloat width = size.width;
CGFloat height = size.height;
CGFloat maxHeight = kScreenHeight;
CGFloat maxWidth = kScreenWidth;
//如果图片尺寸大于view尺寸，按比例缩放
if(width > maxWidth || height > width){
CGFloat ratio = height / width;
CGFloat maxRatio = maxHeight / maxWidth;
if(ratio < maxRatio){
width = maxWidth;
height = width*ratio;
}else{
height = maxHeight;
width = height / ratio;
}
}
return CGSizeMake(width, height);
}6.设置放大缩小代理方法
#pragma mark UIScrollViewDelegate
//指定缩放view
-(UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView{
for (UIView *v in scrollView.subviews){
return v;
}
return nil;
}
// 正在放大缩小
-(void)scrollViewDidZoom:(UIScrollView *)scrollView{
// 增量为=位移距离/2
UIView *v = [scrollView.subviews objectAtIndex:0];
if ([v isKindOfClass:[UIImageView class]]){
CGFloat offsetX = (scrollView.bounds.size.width > scrollView.contentSize.width)?
(scrollView.bounds.size.width - scrollView.contentSize.width) * 0.5 : 0.0;
CGFloat offsetY = (scrollView.bounds.size.height > scrollView.contentSize.height)?
(scrollView.bounds.size.height - scrollView.contentSize.height) * 0.5 : 0.0;
v.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX,
scrollView.contentSize.height * 0.5 + offsetY);
}
}
// 滚动完成
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView;{
NSInteger page = scrollView.contentOffset.x / kScreenWidth;
_currentIndex = page;
_pageLabel.text = [NSString stringWithFormat:@"%ld/%ld",page+1,_imagesArray.count];
if (scrollView == self.scrollView){
CGFloat x = scrollView.contentOffset.x;
if (x !=_offset){
_offset = x;
for (UIScrollView *s in scrollView.subviews){
if ([s isKindOfClass:[UIScrollView class]]){
[s setZoomScale:1.0];
}
}
}
}
}github只有浏览本地图片：https://github.com/RockyFung/RFPhotoBrowser