相册图片浏览器（模仿path）,效果类似微信朋友圈，效果有优化。

最新推荐文章于 2020-12-20 16:43:16 发布
最新推荐文章于 2020-12-20 16:43:16 发布
阅读量2.4k 收藏
点赞数 2
分类专栏： IOS 文章标签： 微信 微博 图片浏览器 动画 滚动视图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/orange_man/article/details/43412847
版权

最近公司需要新需求，就是做图片的浏览器。看了看微信、微博、陌陌还有一些其他的应用，不得不说国内软件做的还是比较生硬的。最后看了看path的效果比较不错，就参照他实现功能了。起初从出现消失动画（这也是刚开始最为难我的地方，找位置好难啊），图片轮播加载等开始做的。说多无用，直接上代码吧，在它上面还有一个父类， 就是有个初始化方法， 大家看懂思路就好了，不明白的问我~~

.h文件

@protocol FullSizeImagesControlDelegate;


@interface FullSizeImagesControl : FullSizeImageControl<UIScrollViewDelegate, UIGestureRecognizerDelegate>

@property (nonatomic, strong) id<FullSizeImagesControlDelegate, FullSizeImageControlDelegate> delegate;

@property (nonatomic, strong) UIScrollView *scrollView;
@property (nonatomic, strong) UIPageControl *pageControl;

@property (nonatomic, strong) NSArray *imageURLs;
@property (nonatomic, strong) NSMutableArray *imageViews;
@property (nonatomic, strong) NSMutableArray *scrollViews;
@property (nonatomic, strong) NSArray *images;

@property (nonatomic, assign) NSInteger currentPage;

- (void)showImages:(NSArray *)images URLs:(NSArray *)imageURLs fromView:(UIView *)view index:(NSInteger )index completed:(void (^)(void))completed;
- (void)showImage:(UIImage *)image imageURL:(NSString *)imageURL fromView:(UIView *)view;

@end



@protocol FullSizeImagesControlDelegate <FullSizeImageControlDelegate>

@optional

- (NSArray *)sourceViews;

- (void)fullSizeImagesControlDidLongPress:(NSInteger )index;

@end
.m文件 

#import "FullSizeImagesControl.h"

static CGFloat kMargin = 20.0;

@implementation FullSizeImagesControl

#pragma mark - property

- (UIScrollView *)scrollView {
	
	if (!_scrollView) {
		
		_scrollView = [[UIScrollView alloc] initWithFrame:CGRectZero];
		_scrollView.pagingEnabled = YES;
		_scrollView.bounces = YES;
		_scrollView.delegate = self;
		_scrollView.showsHorizontalScrollIndicator = NO;
		_scrollView.showsVerticalScrollIndicator = NO;
	}
	return _scrollView;
}

- (UIPageControl *)pageControl {
	
	if (!_pageControl) {
		
		_pageControl = [[UIPageControl alloc]initWithFrame:CGRectZero];
		_pageControl.currentPageIndicatorTintColor = [DR6StyleManager globalStyleManager].windowTintColor;
		_pageControl.pageIndicatorTintColor = [DR6StyleManager globalStyleManager].imageBackgroundColor;
		_pageControl.userInteractionEnabled = NO;
	}
	return _pageControl;
}

- (NSMutableArray *)imageViews {
	
	if (!_imageViews) {
		_imageViews = [NSMutableArray arrayWithCapacity:0];
	}
	return _imageViews;
}

- (NSMutableArray *)scrollViews {
	
	if (!_scrollViews) {
		_scrollViews = [NSMutableArray arrayWithCapacity:0];
	}
	return _scrollViews;
}

- (void)setImageURLs:(NSArray *)imageURLs {
	_imageURLs = imageURLs;
	
	self.scrollView.frame = CGRectMake(0, 0, self.frame.size.width + kMargin, self.frame.size.height);
	self.scrollView.contentSize = CGSizeMake(self.scrollView.frame.size.width * imageURLs.count, 0);
	[self addSubview:self.scrollView];
	
	for (int i = 0; i < imageURLs.count; i++) {
		
		UIImageView *imageView = [[UIImageView alloc] init];
		imageView.contentMode = UIViewContentModeScaleAspectFit;
		__weak typeof(UIImageView) *weakimageView = imageView;
		
		UIScrollView *imageScrollView = [[UIScrollView alloc] initWithFrame:CGRectMake(self.scrollView.frame.size.width * i, 0, self.frame.size.width, self.frame.size.height)];
		imageScrollView.delegate  = self;
		imageScrollView.bounces = YES;
		
		imageScrollView.showsHorizontalScrollIndicator = NO;
		imageScrollView.showsVerticalScrollIndicator = NO;
		
		if (self.images.count > i) {
			imageView.image = self.images[i];
			imageView.frame = CGRectMake(0, 0, imageScrollView.width, imageScrollView.height);
			imageView.center = imageScrollView.center;
		}
		
		UIActivityIndicatorView *activityView = [[UIActivityIndicatorView alloc] initWithFrame:CGRectMake(0, 0, 30, 30)];
		activityView.center = imageScrollView.center;
		activityView.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhiteLarge;
		[activityView startAnimating];
		
		[imageView addSubview:activityView];
		[imageScrollView addSubview:imageView];
		
		[imageView setImageWithURL:imageURLs[i] placeholderImage:imageView.image completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType) {
			
			if (image) {
				
				if ((self.height - weakimageView.image.size.height * self.width / weakimageView.image.size.width) >= 0) {
					weakimageView.frame = CGRectMake(0, (self.height - weakimageView.image.size.height * self.width / weakimageView.image.size.width) / 2, self.width, weakimageView.image.size.height * self.width / weakimageView.image.size.width);
				} else {
					weakimageView.frame = CGRectMake((self.width - self.height / weakimageView.image.size.height * weakimageView.image.size.width) / 2.0, 0, self.height/ weakimageView.image.size.height * weakimageView.image.size.width, self.height);
				}
				
				imageScrollView.maximumZoomScale = (self.scrollView.height / weakimageView.height > 1.5 ? self.height / weakimageView.height : (self.width / weakimageView.width >= 2.0 ? self.width / weakimageView.width : 2.0));
				imageScrollView.minimumZoomScale = 1.0;
				
				[self.imageViews addObject:weakimageView];
				
				[activityView stopAnimating];
			}
			
			
		}];
		
		UITapGestureRecognizer *doubleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleDoubleTap:)];
		UITapGestureRecognizer *singleTapGesture = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(handleSingleTap:)];
		doubleTapGesture.numberOfTapsRequired = 2;
		[singleTapGesture requireGestureRecognizerToFail:doubleTapGesture];
		
		[imageScrollView addGestureRecognizer:doubleTapGesture];
		[imageScrollView addGestureRecognizer:singleTapGesture];
		
		[imageScrollView setContentSize:CGSizeMake(imageView.width, imageView.height)];
		
		[self.scrollView addSubview:imageScrollView];
		[self.scrollViews addObject:imageScrollView];
	}
	
	CGFloat pageControlHeight = 10.0;
	CGFloat margin = 30.0;
	
	if (imageURLs.count > 1) {
		self.pageControl.frame = CGRectMake(0, self.frame.size.height - margin, self.frame.size.width, pageControlHeight);
		[self addSubview:_pageControl];
	}
	
}

#pragma mark - public

- (void)showImages:(NSArray *)images URLs:(NSArray *)imageURLs fromView:(UIView *)view index:(NSInteger )index completed:(void (^)(void))completed {
	
	UIImage *presentingImage = [[SDImageCache sharedImageCache] imageFromDiskCacheForKey:imageURLs[index]];
	if (imageURLs.count <= 0 && !presentingImage) {
		return;
	}
	
	self.pageControl.numberOfPages = imageURLs.count;
	self.pageControl.currentPage = index;
	
	self.images = images;
	
	[self.imageView setImageWithURL:[NSURL URLWithString:imageURLs[index]]];
	
	[self addSubview:self.imageView];
	
	UIView *keyWindow = [UIApplication sharedApplication].keyWindow;
	CGRect rect = [view.superview convertRect:view.frame toView:keyWindow];
	self.imageView.frame = rect;
	
	self.alpha = 0;
	self.backgroundColor = [UIColor clearColor];
	
	[keyWindow addSubview:self];
	
	CGFloat startRadius = view.layer.cornerRadius;
	CGFloat endRadius = 0;
	if (startRadius) {
		self.imageView.layer.cornerRadius = startRadius;
	}
	
	[UIView animateWithDuration:0.2
						  delay:0
						options:UIViewAnimationOptionCurveLinear
					 animations:^{
						 
						 self.alpha = 1;
						 self.backgroundColor = [UIColor blackColor];
						 
					 } completion:^(BOOL finished) {
						 
						 CGFloat duration = 0.3;
						 
						 if (startRadius) {
							 
							 CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
							 
							 animation.delegate = self;
							 
							 animation.fromValue = @(startRadius);
							 animation.toValue = @(endRadius);
							 animation.duration = duration;
							 [self.imageView.layer addAnimation:animation forKey:@"cornerRadius"];
							 self.imageView.layer.cornerRadius = 0;
						 }
						 
						 self.imageView.contentMode = UIViewContentModeScaleAspectFit;
						 
						 if (!self.imageView.image) {
							 
							 self.imageURLs = imageURLs;
							 self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width * index, 0);
							 self.pageControl.currentPage = index;
							 self.imageView.image = self.images[index];
							 self.imageView.frame = [self finalRectForImage:self.images[index]];
							 self.imageView.hidden = YES;
							 return ;
						 }
						 
						 [UIView animateWithDuration:duration
											   delay:0
											 options:7 << 16
										  animations:^{
											  
											  self.imageView.frame = [self finalRectForImage:presentingImage];
										  } completion:^(BOOL finished) {
											  
											  self.imageView.layer.cornerRadius = endRadius;
											  if (![NSStringFromCGRect(self.imageView.frame) isEqualToString:NSStringFromCGRect([self finalRectForImage:presentingImage])]) {
												  return ;
											  }
											  
											  self.imageURLs = imageURLs;
											  self.scrollView.contentOffset = CGPointMake(self.scrollView.frame.size.width * index, 0);
											  self.pageControl.currentPage = index;
											  self.currentPage = index;
											  self.imageView.hidden = YES;
											  
											  completed();
										  }];
					 }];
	
	
}

- (void)showImage:(UIImage *)image imageURL:(NSString *)imageURL fromView:(UIView *)view {

	[self showImages:[NSArray arrayWithObject:image] URLs:[NSArray arrayWithObject:imageURL] fromView:view index:0 completed:^{
		
	}];
}


- (void)pressed:(id)sender {
	
	UIView *sourceView = nil;
	
	if ([self.delegate respondsToSelector:@selector(sourceView)]) {
		sourceView = [self.delegate sourceView];
	} else if ([self.delegate respondsToSelector:@selector(sourceViews)]) {
		
		if (self.pageControl.currentPage < [self.delegate sourceViews].count) {
			sourceView = (UIView *)[self.delegate sourceViews][self.pageControl.currentPage];
		}
		
	}
	
	self.imageView.hidden = NO;
	[self.scrollView removeFromSuperview];
	[self.pageControl removeFromSuperview];
	self.imageView.contentMode = UIViewContentModeScaleAspectFill;
	//    [[UIApplication sharedApplication] setStatusBarHidden:NO withAnimation:UIStatusBarAnimationSlide];
	
	CGFloat duration = 0.3;
	CGFloat startRadius = sourceView.layer.cornerRadius;
	CGFloat endRadius = 0;
	
	UIView *rootView = [UIApplication sharedApplication].keyWindow;
	CGRect rect = self.imageView.frame;
	
	if (sourceView) {
		rect = [sourceView.superview convertRect:sourceView.frame toView:rootView];
		if (startRadius) {
			self.imageView.layer.cornerRadius = endRadius;
			
			CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"cornerRadius"];
			
			animation.fromValue = @(endRadius);
			animation.toValue = @(startRadius);
			animation.duration = duration;
			[self.imageView.layer addAnimation:animation forKey:@"cornerRadius"];
			self.imageView.layer.cornerRadius = startRadius;
		}
	}
	
	[UIView animateWithDuration:duration
						  delay:0
						options:7 << 16
					 animations:^{
						 
						 [self imageShrink];
						 self.imageView.frame = rect;
					 } completion:^(BOOL finished) {
						 
						 [UIView animateWithDuration:0.2
											   delay:0
											 options:UIViewAnimationOptionCurveLinear
										  animations:^{
											  
											  self.alpha = 0;
											  self.backgroundColor = [UIColor clearColor];
										  } completion:^(BOOL finished) {
											  
											  [self removeFromSuperview];
										  }];
					 }];
}

- (void)longPressed:(UILongPressGestureRecognizer *)presser {
	
	if (presser.state == UIGestureRecognizerStateBegan && [self.delegate respondsToSelector:@selector(fullSizeImagesControlDidLongPress:)]) {
		[self.delegate fullSizeImagesControlDidLongPress:self.pageControl.currentPage];
	}
}

- (void)handleDoubleTap:(UIGestureRecognizer *)gesture {
	
	float newScale;
	UIScrollView *scrollView = (UIScrollView *)gesture.view;
	
	if (scrollView.zoomScale == 1.0) {
		newScale = scrollView.maximumZoomScale;
	}
	else{
		newScale = 1.0 / scrollView.maximumZoomScale;
	}
	
	CGRect zoomRect = [self zoomRectForScale:newScale withCenter: [gesture locationInView:(UIScrollView *)gesture.view]];
	[(UIScrollView *)gesture.view zoomToRect:zoomRect animated:YES];
	
}

- (void)handleSingleTap:(UIGestureRecognizer *)gesture {
	
	UIScrollView *scrollView = (UIScrollView *)gesture.view;
	
	if (scrollView.zoomScale != 1.0) {
		self.imageView.frame = CGRectMake(-scrollView.contentOffset.x, -scrollView.contentOffset.y, scrollView.contentSize.width, scrollView.contentSize.height);
	}
	
	self.imageView.hidden = NO;
	[self.scrollView removeFromSuperview];
	[self.pageControl removeFromSuperview];
	[self pressed:self];
}

#pragma mark - private

- (CGRect)zoomRectForScale:(float)scale withCenter:(CGPoint)center
{
	
	CGRect zoomRect;
	zoomRect.size.height = self.frame.size.height / scale;
	zoomRect.size.width  = self.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;
}

#pragma mark - UIScrollViewDelegate

- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView{
	
	[_pageControl setCurrentPage:_scrollView.contentOffset.x / _scrollView.frame.size.width];
	
	if (self.currentPage == self.pageControl.currentPage) {
		return;
	}
	
	if (self.scrollView == scrollView) {
		
		for (UIScrollView *imagescrollView in self.scrollViews) {
			
			if ([imagescrollView isKindOfClass:[UIScrollView class]]) {
				
				imagescrollView.zoomScale = 1.0;
			}
		}
		self.currentPage = self.pageControl.currentPage;
	}
	
	if (self.pageControl.currentPage < _imageViews.count) {
		
		UIImageView *imageView = _imageViews[self.pageControl.currentPage];
		self.imageView.image = imageView.image;
		self.imageView.frame = imageView.frame;
	}
}


#pragma mark - UIScrollViewZoom

- (UIView *)viewForZoomingInScrollView:(UIScrollView *)scrollView
{
	if (scrollView != self.scrollView) {
		if (self.imageViews.count == self.scrollViews.count) {
			UIImageView *imageView = [self.imageViews objectAtIndex:[self.scrollViews indexOfObject:scrollView]];
			return imageView;
		}
	}
	return nil;
}

- (void)scrollViewDidZoom:(UIScrollView *)scrollView {
	
	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;
	
	UIImageView *imageView = [self.imageViews objectAtIndex:[self.scrollViews indexOfObject:scrollView]];
	imageView.center = CGPointMake(scrollView.contentSize.width * 0.5 + offsetX, scrollView.contentSize.height * 0.5 + offsetY);
}

@end



会编程的橙子先生
关注
  • 2
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
iOS转场动画之微信朋友圈图片查看器
滴水穿石，慢慢积累，总会有成果
04-01 5115
前言什么是转场动画呢？顾名思义，就是切换界面所用的动画效果。本文主要介绍的是modal的效果。当我们使用modal的时候，只需要使用 presentViewController:animated:completion 和 dismissViewControllerAnimated:completion 即可实现界面的弹出和消失，但是这样的动画过于单调，只是简单的弹出消失，没有’艺术性’，嘿嘿嘿，如果
仿朋友圈相册图片选择以及画廊效果
qq_38363506的博客
01-10 553
仿朋友圈相册图片选择以及画廊效果1.效果展示2.导入相关第三方库依赖3.编写选择图片页面a.编写布局b.编写Activityc.相册选择工具类部分代码d.相册4宫图适配器4.编写画廊页面a.编写画廊页面b.编写Activityc.画廊适配器5.源码 1.效果展示 该demo适配Android 6、7、10。画廊效果，支持缩放效果。 视频展示： （等我B站视频审核通过再来修改） 部分截图： 文章有点长，如果没时间就拉到最底下下载源码，再给个一键三联哈(*￣︶￣) 2.导入相关第三方库依赖 站在巨人的肩膀上，
关于image中的imageUrl相对路径和绝对路径
yjw2006的专栏
02-13 8212
  ImageUrl="~/images/index_34.jpg” 如果：ImageUrl="E://images//index_34.jpg” IE6可以看到，IE7有问题,FireFox也有问题  使用本地的绝对路径显示图片是有问题的，主要来源于浏览器的安全性判断。Firefox好像已经关闭对本地物理路径的读取了，IE7也不能直接读
iOS仿微信朋友圈查看图片动画效果
03-15
模仿微信的朋友圈查看图片动画效果，详情可以下载代码查看效果，不懂可以私信我
ios-仿微信朋友圈的照片查看器.zip
07-11
仿微信朋友圈的照片查看器，只是实现了基本的功能，提供一种实现方式。 git地址：https://github.com/zcDemo/PhotoBrowser
仿微信朋友圈查看图片下拽返回。集成轻松，效果超赞~
徐玮的博客
08-06 2515
  ImageWatcher 大图查看，它能够 动画顺畅切换到查看状态，同样动画顺畅退出查看界面 左右滑动多图查看 仿微信下拽退出       对比之前1.0.3, 修复-宽高计算错误导致起始图片位置显示错误。 优化-取消了无意义的旋转，提示下拽体验(放大且图片已显示顶端时亦可下拽)。 优化-支持显示本地图片。 新增-支持长图显示(beta)。 使用的网络图片，被屏蔽了请自己...
android 仿微信选取相册_Android--选择图片（仿微信发朋友圈）第一篇
weixin_39576018的博客
12-20 323
这篇博客主要写仿微信朋友圈选择图片发朋友圈。整个功能包括加载图片，显示图片、相册文件夹、预览图片，九宫格显示已经选择好的图片等等，大概会有三篇博客。效果图看上面的图，加载图片肯定是异步加载，耗时任务。android系统默认提供了一个Loader(Android Loader机制全面详解及源码浅析https://blog.csdn.net/axi295309066/article/details/5...
微信小程序通过保存图片分享到朋友圈功能
12-11
在微信小程序中，用户无法直接将内容分享到朋友圈，但可以通过生成包含小程序二维码的图片，让用户自行保存至相册并手动分享到朋友圈。这一功能通常采用以下步骤实现： **1. 通过服务器获取小程序码** 首先，需要...
仿微信朋友圈动态列表
05-05
在Android开发中，仿微信朋友圈动态列表是一种常见的需求，它涉及到UI设计、数据绑定和滚动优化等多个技术点。本项目名为"MyDemo"，显然提供了一个实现这一功能的示例代码。接下来，我们将深入探讨其中涉及的关键...
鲁班Luban压缩图片(仿微信朋友圈压缩图片)
09-09
综上所述，Luban是一个针对Android平台的高效图片压缩工具，它通过智能压缩算法实现了类似微信朋友圈的图片压缩效果，对于开发者来说是一个非常实用的库。在使用时，需注意Java版本兼容性以及合理配置压缩参数，以...
仿微信朋友圈图片滑动效果
05-04
HTML5，CSS3，PhotoSwipe，仿微信朋友圈图片点开轮播图。使用js框架是PhotoSwipe。 PhotoSwipe是一个图片放大插件，兼容pc和移动端，经历过多个版本的迭代且一直在不断更新，踩过的坑不知凡几，在移动端有着巨大的优势。
仿微信朋友圈图片查看
06-04
仿微信朋友圈图片查看，图片大小缩放，切换浏览
仿微信朋友圈图片浏览，挺好用的
09-28
仿微信朋友圈图片浏览，挺好用的，其中用到了，viewpager,fragment,还有photoview,感谢无私奉献的人们解决了我曾经的难题
仿微信朋友圈图片浏览器
11-21
仿微信朋友圈图片浏览器
基于swiper的仿朋友圈相册效果
04-28
从网上的资源自己整理的，基于swiper的仿朋友圈相册效果。 整理不易，亲测可用，谢谢了。 从网上的资源自己整理的，基于swiper的仿朋友圈相册效果。 整理不易，亲测可用，谢谢了。
android 分享微信小程序+压缩图片优化
11-19
在Android开发中，微信分享是常见的社交功能，其中包括分享微信小程序、图片到微信朋友圈或微信好友。本教程将深入探讨如何实现这一功能，并特别关注图片压缩优化，以确保分享过程的顺利进行。 首先，我们需要集成...
ios-简易的模仿微信朋友圈查看图片.zip
07-11
简易的模仿微信朋友圈查看图片，点击放大，如果多张图片可以滑动，点击图片缩小，并回到图片在vc上的位置。
YDImageBrowser：iOS仿微信图片浏览器
02-23
YDImageBrowser 例子 要运行示例项目，请克隆存储库，然后首先从Example目录运行pod install 。 要求 安装 YDImageBrowser可通过。 要安装它，只需将以下行添加到您的Podfile中： pod 'YDImageBrowser' 作者 ， 执照 YDImageBrowser在MIT许可下可用。 有关更多信息，请参见LICENSE文件。
仿微信朋友圈发动态功能（相册图片多选） 功能齐全
11-09
仿微信朋友圈发动态功能（相册图片多选） 功能齐全 [注意：本资源来自网络，如有侵权，请联系我删除，谢谢。]
uni-app分享微信朋友圈
最新发布
09-18
uni-app提供了一个方便的方法来实现微信朋友圈分享。你可以在页面的`onShareTimeline`方法中配置分享的标题、路径和图片地址。在这个方法中，你可以通过`console.log(res)`来获取分享的结果信息。以下是一个示例代码...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值