ios 自定义菜单显示内容（可拖拽排序collectionView

最近项目有个首页菜单定制的需求,类似于支付宝的首页模块定制， 如果有这种需求的小伙伴不妨看一下，希望能帮到你 , 当然, 有任何不妥的地方 欢迎指正。喜欢的可以关注下我的博客、我的简书

首先看一下效果展示吧（请忽略这个不忍直视的GIF）

需要的话可以去git上下载--ZQVariableMenu

用法:把下载的demo里的ZQVariableMenu文件夹拷入项目文件中，在控制器中引用ZQVariableMenuControl.h，然后在点击响应方法里实现下面代码

NSArray *array1 = @[];//需要展示的title数组

NSArray *array2 = @[];//未展示的title数组

[[ZQVariableMenuControl shareControl] showChannelViewWithInUseTitles:array1 unUseTitles:array2 fixedNum:1 finish:^(NSArray *inUseTitles, NSArray *unUseTitles) {

NSLog(@"inUseTitles = %@",inUseTitles);

NSLog(@"unUseTitles = %@",unUseTitles);

}];
           

其中array1 为需要展示的title数组，array2为未展示的title数组，fixedNum需要固定的title数量，这里我只是实现让前面fixedNum个不能移动，可以根据自己的需要进行修改，具体代码位置在ZQVariableMenuView的数据源方法里,

实现思路：

1、为collectionView添加长按手势

UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(longPressMethod:)];

longPress.minimumPressDuration = 0.3f;

[_collectionView addGestureRecognizer:longPress];
           

2、监听手势变化

#pragma mark LongPressMethod

-(void)longPressMethod:(UILongPressGestureRecognizer*)gesture{

CGPoint point = [gesture locationInView:_collectionView];

switch (gesture.state) {

case UIGestureRecognizerStateBegan:

[self dragBegin:point];

break;

case UIGestureRecognizerStateChanged:

[self dragChanged:point];

break;

case UIGestureRecognizerStateEnded:

[self dragEnd];

break;

default:

break;

}

}
           

2.1在拖拽开始的时候找到被拖拽的item

-(void)dragBegin:(CGPoint)point{

_dragingIndexPath = [self getDragingIndexPathWithPoint:point];

if (!_dragingIndexPath) {return;}

[_collectionView bringSubviewToFront:_dragingItem];

ZQVariableMenuCell *item = (ZQVariableMenuCell*)[_collectionView cellForItemAtIndexPath:_dragingIndexPath];

item.isMoving = true;

item.hidden = YES;

//更新被拖拽的item

_dragingItem.hidden = false;

_dragingItem.frame = item.frame;

_dragingItem.title = item.title;

_dragingItem.imageName = item.imageName;

[_dragingItem setTransform:CGAffineTransformMakeScale(1.1, 1.1)];

}
           

2.2拖拽过程中交换位置及更新数据源

-(void)dragChanged:(CGPoint)point{

if (!_dragingIndexPath) {return;}

_dragingItem.center = point;

_targetIndexPath = [self getTargetIndexPathWithPoint:point];

//交换位置 如果没有找到_targetIndexPath则不交换位置

if (_dragingIndexPath && _targetIndexPath) {

//更新数据源

[self rearrangeInUseTitles];

//更新item位置

[_collectionView moveItemAtIndexPath:_dragingIndexPath toIndexPath:_targetIndexPath];

_dragingIndexPath = _targetIndexPath;

}

}
           

2.3拖拽结束后更新itemframe及状态

-(void)dragEnd{

if (!_dragingIndexPath) {return;}

CGRect endFrame = [_collectionView cellForItemAtIndexPath:_dragingIndexPath].frame;

[_dragingItem setTransform:CGAffineTransformMakeScale(1.0, 1.0)];

[UIView animateWithDuration:0.3 animations:^{

_dragingItem.frame = endFrame;

}completion:^(BOOL finished) {

_dragingItem.hidden = true;

ZQVariableMenuCell *item = (ZQVariableMenuCell*)[_collectionView cellForItemAtIndexPath:_dragingIndexPath];

item.isMoving = false;

item.hidden = NO;

}];

}
           

获取当前拖动item的IndexPath方法这里我设置的只剩一个的时候和待选菜单不可排序,需要固定位置的前几个item不需要排序.

-(NSIndexPath*)getDragingIndexPathWithPoint:(CGPoint)point{

NSIndexPath* dragIndexPath = nil;

//最后剩一个不可以排序

if ([_collectionView numberOfItemsInSection:0] == 1) {return dragIndexPath;}

for (NSIndexPath *indexPath in _collectionView.indexPathsForVisibleItems) {

//下半部分不需要排序

if (indexPath.section > 0) {continue;}

//需要固定位置的前几个item不需要排序

if (indexPath.row<self.fixedNum) {continue;}

//在上半部分中找出相对应的Item

if (CGRectContainsPoint([_collectionView cellForItemAtIndexPath:indexPath].frame, point)) {

if (indexPath.row != 0) {

dragIndexPath = indexPath;

}

break;

}

}

return dragIndexPath;

}
           

获取目标IndexPath的方法

-(NSIndexPath*)getTargetIndexPathWithPoint:(CGPoint)point{

NSIndexPath *targetIndexPath = nil;

for (NSIndexPath *indexPath in _collectionView.indexPathsForVisibleItems) {

//如果是自己不需要排序

if ([indexPath isEqual:_dragingIndexPath]) {continue;}

//第二组不需要排序

if (indexPath.section > 0) {continue;}

//需要固定位置的前几个item不需要排序

if (indexPath.row<self.fixedNum) { continue; }

//在第一组中找出将被替换位置的Item

if (CGRectContainsPoint([_collectionView cellForItemAtIndexPath:indexPath].frame, point)) {

if (indexPath.row != 0) {

targetIndexPath = indexPath;

}

}

}

return targetIndexPath;

}
           

在demo里我做了个数据存储，记住用户当前的选择

//路径
#define ShowMenusPath [[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory,NSUserDomainMask,YES)firstObject] stringByAppendingPathComponent:@"Menus.txt"]
           

//取出存储的数据

_currentMenus = [NSArray arrayWithContentsOfFile:ShowMenusPath];
           

//存储改变后的数据

[[ZQVariableMenuControl shareControl] showChannelViewWithInUseTitles:_currentMenus unUseTitles:UnShowMenus fixedNum:1 finish:^(NSArray *inUseTitles, NSArray *unUseTitles) {

[inUseTitles writeToFile:ShowMenusPath atomically:YES];

[self reloadCollectionView];

}];
           

可以根据自己实际需要去自定义item，有什么疑问可以在评论区问我