前几天翻看代码库,发现一个之前写过的一个有意思的小玩意,共享给大家?
废话不多说,上图,先看看效果

photosView.gif

怎么样,是不是还蛮有意思呢?

实现起来非常简单,我们只需要重写几个 View 的 touch 方法

//触摸开始
- (void)touchesBegan:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{    if ( [[[touches allObjects]lastObject] view]==self) {         return;//这个地方demo里面没有加判断,可能会有崩溃现象,加上就好了    }        //获取触摸点     UITouch *touch = [touches anyObject];    CGPoint point = [touch locationInView:self];    //当前点击到的图片的下标小于图片数组的元素个数     _selectIndex = [self itemIndexWithPoint:point];    if (_selectIndex < self.itemArray.count) {        UIImageView *item = self.itemArray[_selectIndex];        //拿到最上层         [self bringSubviewToFront:item];        //动画效果         [UIView animateWithDuration:0.3 animations:^{            //改变当前选中图片视图的大小和位置             item.center = point;             item.transform = CGAffineTransformMakeScale(1.2, 1.2);             item.alpha = 0.8;         }];     }
}

在触摸一开始,我们先判定当前触摸的点是在哪一张图片上,获得这张图片的下标,并设置为选中下标,然后改变当前图片的位置(中心移动到触摸点)和大小(放大效果)。

//触摸移动
- (void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{    //获取触摸点     UITouch *touch = [touches anyObject];    CGPoint point = [touch locationInView:self];    //获取当前触摸点位置下标     NSInteger index = [self itemIndexWithPoint:point];    if (_selectIndex < self.itemArray.count) {        UIImageView *item = self.itemArray[_selectIndex];         item.center = point;        if (index < self.itemArray.count && index != _selectIndex) {            //当前点位置所属下标与选中下标不同             //将两个图片分别在数据源数组和子视图数组中移除             UIImage *image = _dataList[_selectIndex];             [_dataList removeObjectAtIndex:_selectIndex];             [self.itemArray removeObjectAtIndex:_selectIndex];            //重新插入到指定位置             [_dataList insertObject:image atIndex:index];             [self.itemArray insertObject:item atIndex:index];            //重新记录选中下标             _selectIndex = index;            //重新布局             [self restartMakeItemFram];         }     }
}

然后在触摸移动方法中再次判定当前触摸点所在的图片下标,然后比较选中下标与当前下标,如果不相同,就交换两张图片的位置。

//触摸结束
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event{    if (_selectIndex < _itemArray.count) {        UIImageView *item = _itemArray[_selectIndex];        //还原操作         [UIView animateWithDuration:0.3 animations:^{             item.transform = CGAffineTransformIdentity;             item.alpha = 1;             item.frame = [self makeFrameWithIndex:(int)_selectIndex];         }];     }
}

最后,在触摸结束方法中还原选中图片的大小,重新计算它的位置

是不是很简单呢?下面附上 Demo 的地址
Demo点这里~点这里:https://github.com/li1024316925/PhotosView

文/i_have_an_Apple(简书作者)
原文链接:http://www.jianshu.com/p/309cd2886e05
著作权归作者所有,转载请联系作者获得授权,并标注“简书作者”。

重写 View 的 Touch 方法,实现一个酷炫的九宫格图片相关推荐

  1. 一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。

    一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部 前言介绍 手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文 效果展示: 说点 ...

  2. 使用TextInputLayout分分钟构造一个酷炫登录框架

    Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,Android ...

  3. 超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(一)

    前言 模型特效是大家在3d可视化项目所追求的,但很多人苦于无法实现一个好的模型效果,本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格.话不多说,先上效果: 本文所使用的 ...

  4. 超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(三)

    上一篇文章 voidjay,公众号:web前端可视化超详细--手把手教你用threejs实现一个酷炫的模型发光扫描效果(二) 上一篇文章已完成基本效果的实现,本文则完成整个项目的灵魂:发光效果以及模型 ...

  5. 华为p10有java功能吗_华为P10独有的一个酷炫功能,方便又实用,你还不知道?...

    一款优秀的手机不能光有旗舰的硬件素质,其使用体验这些软素质也不能落后.最近在做手机测试的时候,我能明显感受到,对于 绝大部分人而言,华为P10可能是最适合他们的一款手机了.因为华为P10不仅是一款有颜 ...

  6. 利用GitHub搭建一个酷炫免费的个人博客

    转载自公众号:python_shequ 由于公众号的文章不易后续整理阅读,于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客,打算将公众号的文章搬过去,支持关键字搜索.分 ...

  7. 如何开发一个酷炫的mdx

    使用mdx开发一个酷炫的ppt ​ 效果展示:mdx-deck-slide-decks MDX 是一种书写格式,允许你在 Markdown 文档中无缝地插入 JSX 代码. 你还可以导入(import ...

  8. python随手记自动记账_菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记

    原标题:菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记 每个月都有各种各样的开销,不当家不知道柴米贵呀!柴米油盐酱醋茶样样都要开销,吃的穿的,各种开销,每个月都没有啥结余,小编月初是富人,月底 ...

  9. 【有了可图网】PS实战系列64:用PS的3D功能设计制作一个酷炫的彩色立体字体

    本篇教大家如何巧用PS的3D功能设计制作一个酷炫的彩色立体字体!教程讲解过程超详细,主要用到了PS的滤镜.调整层以及图层样式来完成效果,需转学起来! 彩色立体文字纹理素材链接链接:https://pa ...

最新文章

  1. [Google API](2)什么是google API
  2. 快速学会MySQL常用操作方法
  3. linux环境将python程序做成可执行
  4. 怎么将arcgis新建工具条如何保存_ArcGIS中寻找最短路径的方法
  5. JavaFX图表(三)之折线图
  6. 机器学习中的数学--数学知识复习
  7. 一幅漫画揭示了项目研发过程中存在的问题,太形象了
  8. (转)Spring Boot 2 (五):Docker Compose + Spring Boot + Nginx + Mysql 实践
  9. 中关村企业 大数据_中关村大数据产业联盟秘书长赵国栋:数字经济区别于传统经济 是企业转型升级的顶层战略...
  10. 位运算求两个数的平均值
  11. mysql驱动5.1_mysql jdbc 驱动 5.1.26 官方最新版
  12. 启天m420进入不了bios_联想启天M415设置u盘启动步骤(支持uefi/bios双启动)
  13. 低功耗计算机视觉技术前沿,四大方向,追求更小、更快、更高效
  14. DOM控制video实现开始/暂停按钮思路方法
  15. 内网通道构建——socks
  16. Css3制作三角形图标
  17. php毕业论文致谢,毕业论文致谢词范文
  18. 中国无线电发射器市场趋势报告、技术动态创新及市场预测
  19. C/C++语言入门(精讲系列)——Hello World 你好,世界
  20. c语言见缝插针小游戏,Unity实现见缝插针小游戏

热门文章

  1. 需求调研计划_拆书营销管理 实施营销调研和预测需求
  2. EVC4.0+AdoCe3.1访问Access数据库全攻略(附带说明及例程)
  3. Python之路--Django--form组件与model form组件
  4. /etc/issue、shutdown命令详解
  5. 单路塔式服务器选购指南 2月最新行情
  6. BZOJ 3160 FFT+Manacher
  7. JavaWeb学习笔记——XML简介
  8. Leetcode: Permutations II
  9. table点击一行显示下一行的特效
  10. ubuntu 下安装 VIM 依赖vim-common错误