iOS点击cell查看大图,点击大图还原小图-b
一、项目需求
用collectionView展示很多照片,点击某个照片,用全屏scrollView无限循环的方式查看图片。
点击放大的图片,图片缩小到原先的尺寸。
如图gif1.gif所示,点击中间的图片,放大图片,滑动图片。再点击大图,图片回到相应的位置。
gif1.gif
如图gif2.gif所示。当前显示的图片不在屏幕中,点击大图后,若图片在屏幕顶部,则回到顶部;若在底部,则回到底部。
gif2.gif
二、常见场景
微博、微信的相册:九宫格展示照片,点击某个图片,图片添加到scrollView上查看。
“微”家族的这两哥们只是九宫格相册,实现方法有很多很多,聪明富有技巧的方式、简单粗暴的方式,应有尽有。我的项目是几百张图片,不适合九宫格的方式了,今天写了个Demo,算是解决该问题的一种思路。
三、我的实现
点击cell之后,创建一个baseView,显示到当前窗口,把图片数组传给baseView;
把scrollView加到baseView上,然后在scrollView上搞个无限循环轮播器展示步骤1传过来的图片。
给scrollView添加一个手势,点击scrollView,baseView缩小,图片缩小,回到最初的尺寸和位置。
关键点
大图复原的时候,找到cell在baseView出来之时,那一瞬间的位置。
我是在collectionView刚刚展示cell完毕,以及滑动停止的时候,计算所有cell相对于UIWindow的位置(记为rectInWindow),然后把这些rectInWindow放到一个数组中,传给baseView。
因
为数据模型数组、图片数组、cell的indexPath.row是一一对应的,即cell的row就是数组的下标,而当前大图片的下标我们是知道的,知
道了这个下标,也就是知道了cell的row,也就知道了rectInWindow数组中对应的下标,就可以获得大图片缩放的目标位置了。
四、关键代码(文末有github链接)
UIViewController中的代码
(1)计算cell在window中的位置。这里只给出了scrollViewDidScroll中实现。在viewDidAppear方法里也要计算一遍,因为如果不滑动,直接点击cell,这时候也是需要获得cell的rectInWindow的。
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
NSMutableArray<NSString *> *array = [NSMutableArray<NSString *> array];
for (NSInteger index = 0; index < self.modelArray.count; index++) {
NSIndexPath *indexPath = [NSIndexPath indexPathForRow:index inSection:0];
DYHeroCell *cell = (DYHeroCell *)[self.collectionView cellForItemAtIndexPath:indexPath];
UIWindow* window = [UIApplication sharedApplication].keyWindow;
// 转换坐标系。把cell里图片的参照系从cell换成UIWindow
CGRect rectInWindow = [cell convertRect:cell.imageView.frame toView:window];
[array addObject:NSStringFromCGRect(rectInWindow)];
}
// rectArray为cell原先位置(以window为参照系)的数组
self.rectArray = array;
}
(2)点击cell,创建baseView,传过去需要的参数。
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
DYBaseView *baseView = [[DYBaseView alloc] initWithFrame:self.view.bounds];
// 图片数组
baseView.iconArray = self.iconArray;
// 位置数组
baseView.rectArray = self.rectArray;
// 当前cell对应下标
baseView.index = indexPath.row;
[[UIApplication sharedApplication].keyWindow addSubview:baseView];
baseView.backgroundColor = [UIColor blackColor];
}
baseView中的代码
(1)无限循环图片轮播器。关于这一点,网上有很多文章。我附带的Demo里面也有相关代码,就不贴代码了。
(2)点击scrollView之后,大图缩小
- (void)scrollViewDidClick {
// 因为scrollView的尺寸是三个屏幕的尺寸,所以如果直接用scrollView来做缩小动画,效果不好看。
// 我就用这种简单粗暴的方法来处理。直接移除scrollView,把正中间的图片加到新的UIView上。
// 让这个新UIView来完成我需要的动画。
UIImageView *tempImageView = [[UIImageView alloc] initWithImage:_centerImageView.image];
CGFloat tempHeight = DYScreenW / _centerImageView.image.size.width * _centerImageView.image.size.height;
tempImageView.frame = CGRectMake(0, (DYScreenH-tempHeight)*0.5, DYScreenW, tempHeight);
[self addSubview:tempImageView];
[self.scrollView removeFromSuperview];
[self.indexLabel removeFromSuperview];
CGFloat width = _currentRect.size.width;
if (width <= 0) { // 如果cell没出现在界面中,即_currentRect = {0,0,0,0};
if (self.currecntIndex > self.index) { // 说明往左滑动的,currentCell应该在屏幕下方
// 我这里的cell是有4列,所以这里是处以4求余,得到当前列。
// 若是其他列数,则需要换成相应的数字。
_currentRect = CGRectMake(DYScreenW * (self.currecntIndex % 4) / 4, DYScreenH, 0, 0);
} else if (self.currecntIndex < self.index) { // 说明往右滑动的,currentCell应该在屏幕上方
_currentRect = CGRectMake(DYScreenW * (self.currecntIndex % 4) / 4, 0, 0, 0);
}
}
[UIView animateWithDuration:1 animations:^{
self.frame = _currentRect;
tempImageView.frame = self.bounds;
} completion:^(BOOL finished) {
[self removeFromSuperview];
}];
}
五、GitHub链接
Demo在这里:https://github.com/xudingyang/LookCellBigPicture
六、其他
本Demo只是图片在本地的情况,如果是做本地图片处理,只需要修改本Demo的几处地方就行了。
不过,实际项目(比如我现在的项目)中往往是从网络请求的图片,这时候就要注意很多,但是思路还是这个思路。无非是:找到大图缩小的时候,最终的位置。
原文地址:http://www.cnblogs.com/MrRed/p/5807750.html
iOS点击cell查看大图,点击大图还原小图-b的更多相关文章
- [原创]WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- android开发:点击缩略图查看大图
android中点击缩略图查看大图的方法一般有两种,一种是想新浪微博list页面那样,弹出一个窗口显示大图(原activity为背景).另一种就是直接打开一个新的activity显示大图. 1.第一种 ...
- WKWebview点击图片查看大图
大家都知道,WKWebview是没有查看大图的属性或者方法的,所以只能通过js与之交互来实现这一功能,原理:通过js获取页面的图片,把它存放到数组,给图片添加点击事件,通过index显示大图就行了 其 ...
- iOS 点击cell下拉
iOS 点击cell下拉 代码如下: #import "ViewController.h" @interface ViewController ()<UITableView ...
- iOS界面不能点击(tableView 的cell 不能使用点击事件,tableView也不能上下滚动)
iOS开发中间遇到了很多问题,有些后来又遇到,竟然忘记怎么处理了,所以还是来写下博客记录自己遇到的问题,方便自己也方便别人. 之前想的是项目小,就用storyboard在绘制界面,但是项目慢慢的扩展, ...
- 点击图片查看大图(纯js)
$(function(){ $(".pimg").click(function(){ var _this = $(this);//将当前的pimg元素作为_this传入函数 img ...
- Swift - 实现点击cell动态修改高度
Swift - 实现点击cell动态修改高度 效果 源码 https://github.com/YouXianMing/Swift-Animations // // TapCellAnimationC ...
- 点击cell动态修改高度动画
点击cell动态修改高度动画 效果 源码 https://github.com/YouXianMing/Animations // // TapCellAnimationController.m // ...
- ios h5 app avalon tap点击事件失效及点击延迟300ms问题解决方法
1.ios h5 app avalon tap事件失效 使用MUI制作app界面,使用avalon.js渲染数据,发现在(Android上正常)ios上运行时容器div的avalon的ms-on-ta ...
随机推荐
- 移动端1px细线的处理
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 学习Slim Framework for PHP v3 (六)--route怎么被匹配的?
先标记觉得以后会用到的内容: // add route to the request's attributes in case a middleware or handler needs access ...
- 基于ASP.Net +easyUI框架上传图片,判断格式+实现即时浏览
<div> 选择图片:<input id="idFile" style="width:224px" runat="server&qu ...
- Windows Kernel Way 1:Windows内核调试技术
掌握Windows内核调试技术是学习与研究Windows内核的基础,调试Windows内核的方式大致分为两种: (1)通过Windbg工具在Windows系统运行之初连接到Windows内核,连接成功 ...
- Linux中shell命令的用法和技巧
使用Linux shell是我每天的基本工作,但我经常会忘记一些有用的shell命令和l技巧.当然,命令我能记住,但我不敢说能记得如何用它执行某个特定任务.于是,我开始在一个文本文件里记录这些用法,并 ...
- 实例介绍Cocos2d-x开关菜单
开关菜单是MenuItemToggle类实现的,它是一种可以进行两种状态切换的菜单.它可以通过下面的函数创建: static MenuItemToggle*createWithCallback ( ...
- iOS-图片拉伸,最常用的图片拉伸操作总结(干货)
概念介绍 直接拉伸图片有时候会导致图片四周变的很模糊 所以要想办法使图片四周的形状不变.于是,端盖(end cap)的概念出来了,用来指定图片中的哪一部分不用拉伸.比如下图中,黄色代表需要被拉伸的矩形 ...
- 不容错过的七个jQuery图片滑块插件
1.jQuery多图并列焦点图插件 今天我们要来分享一款比较特别的jQuery焦点图插件,它允许你自己定义当前画面的图片数量,在这个演示中,我们定义了3张图片一起显示.和其他jQuery焦点图一样,这 ...
- 9款精美别致的CSS3菜单和按钮
1.超具立体感的CSS3 3D菜单 菜单项带小图标 记得之前向大家分享过不少CSS3 3D菜单,比如CSS3 3D动画菜单 3D立方体菜单项和HTML5/CSS3自定义下拉框 3D卡片折叠动画,效果都 ...
- Codevs 1231 最优布线问题
题目描述 Description 学校需要将n台计算机连接起来,不同的2台计算机之间的连接费用可能是不同的.为了节省费用,我们考虑采用间接数据传输结束,就是一台计算机可以间接地通过其他计算机实现和另外 ...