重写 View 的 Touch 方法,实现一个酷炫的九宫格图片
前几天翻看代码库,发现一个之前写过的一个有意思的小玩意,共享给大家?
废话不多说,上图,先看看效果
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 方法,实现一个酷炫的九宫格图片相关推荐
- 一个精美的跳动小球—手把手教你用贝塞尔曲线实现一个酷炫跳动动画。
一个精美的跳动小球-手把手教你用贝塞尔曲线实现一个酷炫跳动动画. 2017-08-07 BraveJoy 终端研发部 前言介绍 手把手教你用贝塞尔曲线实现一个精美的跳动的小球. 正文 效果展示: 说点 ...
- 使用TextInputLayout分分钟构造一个酷炫登录框架
Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,Android ...
- 超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(一)
前言 模型特效是大家在3d可视化项目所追求的,但很多人苦于无法实现一个好的模型效果,本次就手把手一步一步教你实现一个酷炫的模型发光扫描特效,帮让你的项目提升一个逼格.话不多说,先上效果: 本文所使用的 ...
- 超详细——手把手教你用threejs实现一个酷炫的模型发光扫描效果(三)
上一篇文章 voidjay,公众号:web前端可视化超详细--手把手教你用threejs实现一个酷炫的模型发光扫描效果(二) 上一篇文章已完成基本效果的实现,本文则完成整个项目的灵魂:发光效果以及模型 ...
- 华为p10有java功能吗_华为P10独有的一个酷炫功能,方便又实用,你还不知道?...
一款优秀的手机不能光有旗舰的硬件素质,其使用体验这些软素质也不能落后.最近在做手机测试的时候,我能明显感受到,对于 绝大部分人而言,华为P10可能是最适合他们的一款手机了.因为华为P10不仅是一款有颜 ...
- 利用GitHub搭建一个酷炫免费的个人博客
转载自公众号:python_shequ 由于公众号的文章不易后续整理阅读,于是小吴昨天上午花了半个小时使用 GitHub + Hexo 搭建了一下个人博客,打算将公众号的文章搬过去,支持关键字搜索.分 ...
- 如何开发一个酷炫的mdx
使用mdx开发一个酷炫的ppt 效果展示:mdx-deck-slide-decks MDX 是一种书写格式,允许你在 Markdown 文档中无缝地插入 JSX 代码. 你还可以导入(import ...
- python随手记自动记账_菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记
原标题:菜鸟也疯狂!8分钟用Python做一个酷炫的家庭随手记 每个月都有各种各样的开销,不当家不知道柴米贵呀!柴米油盐酱醋茶样样都要开销,吃的穿的,各种开销,每个月都没有啥结余,小编月初是富人,月底 ...
- 【有了可图网】PS实战系列64:用PS的3D功能设计制作一个酷炫的彩色立体字体
本篇教大家如何巧用PS的3D功能设计制作一个酷炫的彩色立体字体!教程讲解过程超详细,主要用到了PS的滤镜.调整层以及图层样式来完成效果,需转学起来! 彩色立体文字纹理素材链接链接:https://pa ...
最新文章
- [Google API](2)什么是google API
- 快速学会MySQL常用操作方法
- linux环境将python程序做成可执行
- 怎么将arcgis新建工具条如何保存_ArcGIS中寻找最短路径的方法
- JavaFX图表(三)之折线图
- 机器学习中的数学--数学知识复习
- 一幅漫画揭示了项目研发过程中存在的问题,太形象了
- (转)Spring Boot 2 (五):Docker Compose + Spring Boot + Nginx + Mysql 实践
- 中关村企业 大数据_中关村大数据产业联盟秘书长赵国栋:数字经济区别于传统经济 是企业转型升级的顶层战略...
- 位运算求两个数的平均值
- mysql驱动5.1_mysql jdbc 驱动 5.1.26 官方最新版
- 启天m420进入不了bios_联想启天M415设置u盘启动步骤(支持uefi/bios双启动)
- 低功耗计算机视觉技术前沿,四大方向,追求更小、更快、更高效
- DOM控制video实现开始/暂停按钮思路方法
- 内网通道构建——socks
- Css3制作三角形图标
- php毕业论文致谢,毕业论文致谢词范文
- 中国无线电发射器市场趋势报告、技术动态创新及市场预测
- C/C++语言入门(精讲系列)——Hello World 你好,世界
- c语言见缝插针小游戏,Unity实现见缝插针小游戏
热门文章
- 需求调研计划_拆书营销管理 实施营销调研和预测需求
- EVC4.0+AdoCe3.1访问Access数据库全攻略(附带说明及例程)
- Python之路--Django--form组件与model form组件
- /etc/issue、shutdown命令详解
- 单路塔式服务器选购指南 2月最新行情
- BZOJ 3160 FFT+Manacher
- JavaWeb学习笔记——XML简介
- Leetcode: Permutations II
- table点击一行显示下一行的特效
- ubuntu 下安装 VIM 依赖vim-common错误