iOS仿网易新闻栏目拖动重排添加删除效果
仿网易新闻栏目选择页面的基本效果,今天抽了点时间教大家如何实现UICollectionView拖动的效果!
其实实现起来并不复杂,这里只是基本的功能,没有实现细节上的修改,连UI都是丑丑的样子,随手画的。
相信大家都使用过网易新闻客户端,里面的效果确定被不少人模仿,很多同类型的app都采用了人家的UI样式,那么今天就教大家如何去实现。
效果图
这是简略的效果图,样子是有点丑,将就看看吧:
实现原理
给UICollectionView添加一个手势或者其他方式,在长按时手动触发拖动开始,在移动过程中又要不断手动地更新位置,而在完成时手动触发完成操作,在取消时也要手动触发取消移动操作。
而要实现移动,必须设置是否可移动。比如我们的demo中第一个分区是要求移动的,而第二个分区是不允许移动的,因此我们需要通过代理来设置是否可移动。
在移动完成时,会有代理回调,此时我们要做的就是交换数据源来更新。
移动API介绍
首先我们必须要明确,这几个API是在iOS9之后才能使用的。这几个API来配合起来使用,才能最终达到我们期望的效果。
1
2
3
4
5
6
7
8
9
10
11
12
13
|
// 开始
- (BOOL)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath NS_AVAILABLE_IOS(9_0);
// 更新位置
- (void)updateInteractiveMovementTargetPosition:(CGPoint)targetPosition NS_AVAILABLE_IOS(9_0);
// 完成
- (void)endInteractiveMovement NS_AVAILABLE_IOS(9_0);
// 取消
- (void)cancelInteractiveMovement NS_AVAILABLE_IOS(9_0);
|
这四个API组合起来才是完整的动作。
添加长按手势
我们需要将手势放到CollectionView上,因为我们要的是操作全范围的!
1
2
3
4
5
6
|
self.collectionView.pagingEnabled = NO;
UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(onLongPressed:)];
[self.collectionView addGestureRecognizer:longPress];
|
处理手势
这个基本是固定的,大家可以copy一下我的代码过去用就可以了:
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
|
- (void)onLongPressed:(UILongPressGestureRecognizer *)sender {
CGPoint point = [sender locationInView:sender.view];
NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:point];
// 只允许第一区可移动
if (indexPath.section != 0) {
return;
}
switch (sender.state) {
case UIGestureRecognizerStateBegan: {
if (indexPath) {
[self.collectionView beginInteractiveMovementForItemAtIndexPath:indexPath];
}
break;
}
case UIGestureRecognizerStateChanged: {
[self.collectionView updateInteractiveMovementTargetPosition:point];
break;
}
case UIGestureRecognizerStateEnded: {
[self.collectionView endInteractiveMovement];
break;
}
default: {
[self.collectionView cancelInteractiveMovement];
break;
}
}
}
|
是否允许移动
这里是只有在编辑状态下且第一分区才能拖动重排,所以通过添加条件来控制是否可移动:
1
2
3
4
5
6
7
8
9
|
- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath {
if (self.isEditing && indexPath.section == 0) {
return YES;
}
return NO;
}
|
完成移动更新源
我们只有第一分区可以操作,而这里只有一个数组,所以直接交换一下数据源就OK了:
1
2
3
4
5
6
7
|
- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath {
if (sourceIndexPath.section == 0 && destinationIndexPath.section == 0) {
[self.firstList exchangeObjectAtIndex:sourceIndexPath.item withObjectAtIndex:destinationIndexPath.item];
}
}
|
添加删除移动效果
在点击第一分区时或者第二分区的cell时,会自动移动到第二分区或者第一分区。我们希望有移动的动画效果的话,就需要通过collectionview提供的API来完成,而编辑状态下有删除按钮,而到二分区时就不能显示,而在一分区在编辑状态下又可以显示:
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
35
36
37
38
39
40
41
42
43
|
#pragma mark - UICollectionViewDelegate
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath {
if (indexPath.section == 0) {
if (self.isEditing) {
TestModel *model = [self.secondList hyb_objectAtIndex:indexPath.item];
[self.firstList addObject:model];
[self.secondList removeObject:model];
NSInteger index = self.firstList.count - 1;
if (self.firstList.count == 0) {
index = 0;
}
TestColumnCell *cell = (TestColumnCell *)[collectionView cellForItemAtIndexPath:indexPath];
cell.isEditing = NO;
[collectionView moveItemAtIndexPath:indexPath toIndexPath:[NSIndexPath indexPathForItem:index inSection:1]];
[self saveColumns];
} else {
// 选择某一个
}
} else {
TestModel *model = [self.firstList hyb_objectAtIndex:indexPath.item];
[self.secondList addObject:model];
[self.firstList removeObject:model];
NSInteger index = self.secondList.count - 1;
if (self.secondList.count == 0) {
index = 0;
}
if (self.isEditing) {
TestColumnCell *cell = (TestColumnCell *)[collectionView cellForItemAtIndexPath:indexPath];
cell.isEditing = YES;
}
[collectionView moveItemAtIndexPath:indexPath toIndexPath:[NSIndexPath indexPathForItem:index inSection:0]];
[self saveColumns];
}
[collectionView reloadData];
}
|
iOS仿网易新闻栏目拖动重排添加删除效果的更多相关文章
- iOS界面-仿网易新闻左侧抽屉式交互 续(添加新闻内容页和评论页手势)
本文转载至 http://blog.csdn.net/totogo2010/article/details/8637430 1.介绍 有的博友看了上篇博文iOS界面-仿网易新闻左侧抽屉 ...
- 仿网易新闻app下拉标签选择菜单
仿网易新闻app下拉标签选择菜单 仿网易新闻app下拉标签选择菜单,长按拖动排序,点击增删标签控件 ##示例 ##EasyTagDragView的使用 在layout布局里添加:
- Android 开源框架ActionBarSherlock 和 ViewPager 仿网易新闻客户端
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/9971721 大家都知道Android的ActionBar是在3.0以上才有的,那么在3 ...
- Android Studio精彩案例(一)《ActionBar和 ViewPager版仿网易新闻客户端》
转载本专栏文章,请注明出处,尊重原创 .文章博客地址:道龙的博客 为了能更好的分享高质量的文章,所以开设了此专栏.文章代码都以Android Studio亲测运行,读者朋友可在后面直接下载源码.该专栏 ...
- 类似掌盟的Tab页 Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签 (转)
原博客地址 :http://blog.csdn.net/xiaanming/article/details/10766053 本文转载,记录学习用,如有需要,请到原作者网站查看(上面这个网址) 之前 ...
- Android应用经典主界面框架之二:仿网易新闻client、CSDN client (Fragment ViewPager)
另外一种主界面风格则是以网易新闻.凤凰新闻以及新推出的新浪博客(阅读版)为代表.使用ViewPager+Fragment,即ViewPager里适配器里放的不是一般的View.而是Fragment.所 ...
- Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻clientTab标签
之前用JakeWharton的开源框架ActionBarSherlock和ViewPager实现了对网易新闻clientTab标签的功能,ActionBarSherlock是在3.0下面的机器支持Ac ...
- Android 开源框架ViewPageIndicator 和 ViewPager 仿网易新闻客户端Tab标签
转载请注明出处:http://blog.csdn.net/xiaanming/article/details/10766053 之前用JakeWharton的开源框架ActionBarSherlock ...
- iOS动画案例(2) 仿网易新闻标题动画
由于产品的需要,做了一个和网易新闻标题类似的动画效果,现在新闻类的APP都是采用这样的动画效果,来显示更多的内容.先看一下动画效果: 由于这个动画效果在很多场合都有应用,所以我专门封装了一个控 ...
随机推荐
- iOS 含有 中文的URL 转码问题
非ARC模式下: - (NSString *)encodeToPercentEscapeString: (NSString *) input { NSString *outputStr = (NSSt ...
- C# 词法分析器(二)输入缓冲和代码定位
系列导航 (一)词法分析介绍 (二)输入缓冲和代码定位 (三)正则表达式 (四)构造 NFA (五)转换 DFA (六)构造词法分析器 (七)总结 一.输入缓冲 在介绍如何进行词法分析之前,先来说说一 ...
- Wordcount on YARN 一个MapReduce示例
Hadoop YARN版本:2.2.0 关于hadoop yarn的环境搭建可以参考这篇博文:Hadoop 2.0安装以及不停集群加datanode hadoop hdfs yarn伪分布式运行,有如 ...
- POJ1637 Sightseeing tour(判定混合图欧拉回路)
有向连通图存在欧拉回路的充要条件是所有点入度=出度. 首先随便给定所有无向边一个方向(不妨直接是u->v方向),记录所有点的度(记:度=入度-出度). 这时如果有点的度不等于0,那么就不存在欧拉 ...
- 关于listView 中的聚焦问题
我在使用listView+adapter 中,遇到一个问题,就是item项添加了若干个可以被监听的控件后 在listView中的setOnItemClickListener失效了 原因是焦点已经在it ...
- ccc 调试方法
当修改完一个函数,但是不知道哪个函数调用的时候没有传递正确的参数的时候 需要找出调用这个函数的所有语句,于是我注释掉这个函数就可以了
- phpstorm 10 修改背景图片和字体
修改menu:File ~ Settings ~ Appearance & Behavior ~ Appearance ~ Theme 改成 Darcula即成黑色背景 menu字体大小: 编 ...
- AngularJS进阶学习
参考:http://***/class/54f3ba65e564e50cfccbad4b 1. AJAX:Asynchronous JavaScript and XML(异步的 JavaScript ...
- Ext中Grid重新load设置URL
一.前言 Extjs中grid网格有时候需要重新加载,加载的时候对应不同的URL,什么情况出现:有需要我们在添加附件的时候,添加完成了附件,需要把另一个show添加的数据重新加载到grid中,而 ...
- Jquery表格变色 复选框全选,反选
/*jquery静态表格变色*/ $(".tr2").mouseover(function(){ $(this).css("background"," ...