iOS 利用长按手势移动 Table View Cells
本文译自:Cookbook: Moving Table View Cells with a Long Press Gesture
目录:
- 你需要什么?
- 如何做?
- 如何将其利用至UICollectionView上?
- 何去何从?
本次的 cookbook-style 教程中介绍如何通过长按手势来移动 table view中的cell,这种操作方式就像苹果自家的天气 App 一样。
你可以直接把本文中的到吗添加到你的工程中,或者将其添加到我为你创建好的 starter project 中,也可以下载本文的完整示例工程。
你需要什么?
- UILongGestureRecognizer
- UITableView (可以用 UICollectionView 替代之)
- UITableViewController (可以用 UIViewController 或 UICollectionViewController 替代之)
- 5 分钟。
如何做?
首先给 table view 添加一个 UILongGestureRecognizer
。可以在 table view controller 的 viewDidLoad
方法中添加。
1
2
3
|
UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc]
initWithTarget:self action:@selector(longPressGestureRecognized:)];
[self.tableView addGestureRecognizer:longPress];
|
记者为 gesture recognizer 添加 action 方法。该方法首先应该获取到在 table view 中长按的位置,然后找出这个位置对应的 cell 的 index。记住:这里获取到的 index path 有可能为 nil(例如,如果用户长按在 table view的section header上)。
1
2
3
4
5
6
7
8
9
10
|
- (IBAction)longPressGestureRecognized:(id)sender {
UILongPressGestureRecognizer *longPress = (UILongPressGestureRecognizer *)sender;
UIGestureRecognizerState state = longPress.state;
CGPoint location = [longPress locationInView:self.tableView];
NSIndexPath *indexPath = [self.tableView indexPathForRowAtPoint:location];
// More coming soon...
}
|
接着你需要处理UIGestureRecognizerStateBegan
分支。如果获取到一个有效的 index path(non-nil),就去获取对应的 UITableViewCell
,并利用一个 helper 方法获取这个 table view cell 的 snapshot view。然后将这个 snapshot view 添加到 table view 中,并将其 center 到对应的 cell上。
为了更好的用户体验,以及更自然的效果,在这里我把原始 cell 的背景设置为黑色,并给 snapshot view 增加淡入效果,让 snapshot view 比 原始 cell 稍微大一点,将它的Y坐标偏移量与手势的位置的Y轴对齐。这样处理之后,cell 就像从 table view 中跳出,然后浮在上面,并捕捉到用户的手指。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
static UIView *snapshot = nil; ///< A snapshot of the row user is moving.
static NSIndexPath *sourceIndexPath = nil; ///< Initial index path, where gesture begins.
switch (state) {
case UIGestureRecognizerStateBegan: {
if (indexPath) {
sourceIndexPath = indexPath;
UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:indexPath];
// Take a snapshot of the selected row using helper method.
snapshot = [self customSnapshotFromView:cell];
// Add the snapshot as subview, centered at cell's center...
__block CGPoint center = cell.center;
snapshot.center = center;
snapshot.alpha = 0.0;
[self.tableView addSubview:snapshot];
[UIView animateWithDuration:0.25 animations:^{
// Offset for gesture location.
center.y = location.y;
snapshot.center = center;
snapshot.transform = CGAffineTransformMakeScale(1.05, 1.05);
snapshot.alpha = 0.98;
// Black out.
cell.backgroundColor = [UIColor blackColor];
} completion:nil];
}
break;
}
// More coming soon...
}
|
将下面的方法添加到 .m 文件的尾部。该方法会根据传入的 view,返回一个对应的 snapshot view。
1
2
3
4
5
6
7
8
9
10
11
|
- (UIView *)customSnapshotFromView:(UIView *)inputView {
UIView *snapshot = [inputView snapshotViewAfterScreenUpdates:YES];
snapshot.layer.masksToBounds = NO;
snapshot.layer.cornerRadius = 0.0;
snapshot.layer.shadowOffset = CGSizeMake(-5.0, 0.0);
snapshot.layer.shadowRadius = 5.0;
snapshot.layer.shadowOpacity = 0.4;
return snapshot;
}
|
当手势移动的时候,也就是UIGestureRecognizerStateChanged
分支,此时需要移动 snapshot view(只需要设置它的 Y 轴偏移量即可)。如果手势移动的距离对应到另外一个 index path,就需要告诉 table view,让其移动 rows。同时,你需要对 data source 进行更新:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
case UIGestureRecognizerStateChanged: {
CGPoint center = snapshot.center;
center.y = location.y;
snapshot.center = center;
// Is destination valid and is it different from source?
if (indexPath && ![indexPath isEqual:sourceIndexPath]) {
// ... update data source.
[self.objects exchangeObjectAtIndex:indexPath.row withObjectAtIndex:sourceIndexPath.row];
// ... move the rows.
[self.tableView moveRowAtIndexPath:sourceIndexPath toIndexPath:indexPath];
// ... and update source so it is in sync with UI changes.
sourceIndexPath = indexPath;
}
break;
}
// More coming soon...
|
最后,当手势结束或者取消时,table view 和 data source 都是最新的。你所需要做的事情就是将 snapshot view 从 table view 中移除,并把 cell 的背景色还原为白色。
为了提升用户体验,我们将 snapshot view 淡出,并让其尺寸变小至与 cell 一样。这样看起来就像把 cell 放回原处一样。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
default: {
// Clean up.
UITableViewCell *cell = [self.tableView cellForRowAtIndexPath:sourceIndexPath];
[UIView animateWithDuration:0.25 animations:^{
snapshot.center = cell.center;
snapshot.transform = CGAffineTransformIdentity;
snapshot.alpha = 0.0;
// Undo the black-out effect we did.
cell.backgroundColor = [UIColor whiteColor];
} completion:^(BOOL finished) {
[snapshot removeFromSuperview];
snapshot = nil;
}];
sourceIndexPath = nil;
break;
}
|
就这样,搞定了!编译并运行程序,现在可以通过长按手势对 tableview cells重新排序!
你可以在 GitHub 上下载到完整的示例工程。
如何将其利用至UICollectionView上?
假设你已经有一个示例工程使用了 UICollectionView
,那么你可以很简单的就使用上本文之前介绍的代码。所需要做的事情就是用 self.collectionView
替换掉 self.tableView
,并更新一下获取和移动 UICollectionViewCell
的调用方法。
这里有个练习,从 GitHub上 checkout 出 UICollectionView 的starter project,然后将 tap-和-hold 手势添加进去以对 cells 进行重排。这里可以下载到已经实现好了工程。
iOS 利用长按手势移动 Table View Cells的更多相关文章
- Table View Programming Guide for iOS---(六)---A Closer Look at Table View Cells
A Closer Look at Table View Cells A table view uses cell objects to draw its visible rows and then c ...
- Table View Programming Guide for iOS---(一)---About Table Views in iOS Apps
About Table Views in iOS Apps Table views are versatile user interface objects frequently found in i ...
- 创建一个Table View
在本课程中,您将创建应用程序FoodTracker的主屏幕.您将创建第二个,表视图为主场景,列出了用户的菜谱.你会设计定制表格单元格显示每一个菜谱,它是这样的: 学习目标 在课程结束时,你将能够: 创 ...
- How To Make A Swipeable Table View Cell With Actions – Without Going Nuts With Scroll Views
How To Make A Swipeable Table View Cell With Actions – Without Going Nuts With Scroll Views Ellen S ...
- Table View Programming Guide for iOS---(七)---Managing Selections
Managing Selections 管理选择 When users tap a row of a table view, usually something happens as a result ...
- Table View Programming Guide for iOS---(五)---Creating and Configuring a Table View
Creating and Configuring a Table View Your app must present a table view to users before it can mana ...
- Table View Programming Guide for iOS---(三)----Overview of the Table View API
Overview of the Table View API 表格视图API概述 The table view programming interface includes several UIKit ...
- Table View Programming Guide for iOS---(二)----Table View Styles and Accessory Views
Table View Styles and Accessory Views 表格视图的风格以及辅助视图 Table views come in distinctive styles that are ...
- iOS学习之Table View的简单使用
Table View简单描述: 在iPhone和其他iOS的很多程序中都会看到Table View的出现,除了一般的表格资料展示之外,设置的属性资料往往也用到Table View,Table View ...
随机推荐
- Web Component--01. 简介
Web Components 是什么? Web Components是W3C定义的新标准,它给了前端开发者扩展浏览器标签的能力,可以自由的定制组件,更好的进行模块化开发,彻底解放了前端开发者的生产力. ...
- D3D的绘制
一.D3D中的绘制 顶点缓存和索引缓存:IDirect3DVertexBuffer9 IDirect3DIndexBuffer 使用这两缓存而不是用数组来存储数据的原因是,缓存可以被放置在显存中,进行 ...
- ECMAScript 6中的数组操作方法
本文介绍ECMAScript 6即将带给我们新的数组操作方法,以及在怎样在现有浏览器应用这些新的数组特性. Note: 我将使用交替使用构造器(constructor)和类(class)两个术语. 类 ...
- 受限玻尔兹曼机(RBM)学习笔记(五)梯度计算公式
去年 6 月份写的博文<Yusuke Sugomori 的 C 语言 Deep Learning 程序解读>是囫囵吞枣地读完一个关于 DBN 算法的开源代码后的笔记,当时对其中涉及的算 ...
- python之IO多路复用
在python的网络编程里,socetserver是个重要的内置模块,其在内部其实就是利用了I/O多路复用.多线程和多进程技术,实现了并发通信.与多进程和多线程相比,I/O多路复用的系统开销小,系统不 ...
- [Test] 单元测试艺术(1) 基础知识
单元测试不是软件开发的新概念,在1970年就一直存在,屡屡被证明是最理想的方法之一. 本系列将分成3节: 单元测试基础知识 打破依赖,使用模拟对象,桩对象,测试框架 创建优秀的单元测试 本节索引: 单 ...
- Scrum 项目5.0--软件工程
1.燃尽图: 2.每日立会更新任务板上任务完成情况.燃尽图的实际线,分析项目进度是否在正轨. 每天的例会结束后的都为任务板拍照并发布到博客上 团队贡献分: 蔡舜 : 21 卢晓洵 : 1 ...
- 构建之法 第6~7章读后感和对Scrum的理解
第六章-敏捷流程 第六章主要详细介绍了敏捷流程,在软件工程范畴里,“敏捷流程”是一系列价值观和方法论的集合.这一章以敏捷流程的Scrum方法论而展开,而敏捷流程的精髓就是在于快速的交付. 敏捷开发的流 ...
- f4: Facebook’s Warm BLOB Storage System——Erasure Code
Facebook在OSDI 2014上发表论文f4: Facebook's Warm BLOB Storage System,这个系统主要目的就是降低存储成本,在容忍磁盘,主机,机架,数据中心的同时提 ...
- [WCF实践]1.WCF使用net.tcp寄宿到IIS中
一.IIS部分 环境:Windows Server 2008 R2 1.安装WAS,如下图所示: 2.网站net.tcp协议绑定,如下图所示: 3.网站启用net.tcp,如下图所示: 二 ...