仿写《今日头条》的tag选择页面

    技术2024-03-25  11

    在《今日头条》中,该页面是用来选择自己感兴趣的频道标签从而改变segment的。标签功能应用的需求现在也比较多,主要使用collectionview中item可以移动的方法和思路来写这样的页面。

    关键点

    在collectionview上添加的长按手势

    手势状态的变化和操作   

    手势开始移动的时候调用此方法,可以获取相应的datasource方法设置特殊的indexpath 能否移动,如果能移动返回的是YES ,不能移动返回的是NO , 这个方法的返回值由根据下面的canMoveItemAtIndexPath决定的 - (BOOL)beginInteractiveMovementForItemAtIndexPath:(NSIndexPath *)indexPath 更新移动过程的位置, 在移动的过程中会调用下面的collectionView: targetIndexPathForMoveFromItemAtIndexPath: toProposedIndexPath: - (void)updateInteractiveMovementTargetPosition:(CGPoint)targetPosition 结束移动的时候调用此方法,collectionView 会响应相应的datasource方法,collectionView:moveItemAtIndexPath:toIndexPath: 我们可以在这个方法中将移动的数据源,与目标数据源交互位置。 - (void)endInteractiveMovement 取消移动的时候调用,会返回最原始的位置。 - (void)cancelInteractiveMovement; 在开始移动的时候会调用这个方法,如果有特殊的单元格不想被移动可以return NO, 如果没有限制就返回YES 吧。 - (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath 参数说明collectionView调用这个代理方法的 collection ViewindexPathcollectionView 中想要移动的 indexpath 移动过程中,会不断的调用这个方法,  originalIndexPath 能否移动到proposedIndexPath , 如果不重写的话,会默认返回proposedIndexPath;   可以通过返回nil, 告知系统不可以移动到此位置  - (NSIndexPath *)collectionView:(UICollectionView *)collectionView targetIndexPathForMoveFromItemAtIndexPath:(NSIndexPath *)originalIndexPath toProposedIndexPath:(NSIndexPath *)proposedIndexPath ;

     

    移动结束的时候会调用此datasource,想要拖拽完成之后数据正确必须实现此方法,使用新的路径更新数据源,如果不实现此方法,刚刚移动cell中的数据不会重新排列。 - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath 参数说明collectionView正在响应这个方法的collectionViewsourceIndexPath原始移动的indexpathdestinationIndexPath移动到目标位置的indexpath 刚刚我们已经给collectionView 添加了长按的手势,目的就是长按的时候,可以拖动cell来进行移动,那怎么开始移动呢?我们来实现长按事件看看。 // 在开始移动时会调用此代理方法, - (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath { //根据indexpath判断单元格是否可以移动,如果都可以移动,直接就返回YES ,不能移动的返回NO return YES; } // 移动过程中调用,比如"关注"和"推荐"想要始终在前2个位置 // proposedIndexPath移动的目标IndexPath, 返回nil表示不可以移动到这里 - (NSIndexPath *)collectionView:(UICollectionView *)collectionView targetIndexPathForMoveFromItemAtIndexPath:(NSIndexPath *)originalIndexPath toProposedIndexPath:(NSIndexPath *)proposedIndexPath { if (proposedIndexPath.section == 0 && (proposedIndexPath.item == 0|| proposedIndexPath.item==1 )) { return nil; } return proposedIndexPath; } // 在移动结束的时候调用此代理方法,修改数据源 - (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath*)destinationIndexPath { /** *sourceIndexPath 原始数据 indexpath * destinationIndexPath 移动到目标数据的 indexPath */ [_data removeObjectAtIndex:sourceIndexPath.row]; UIImage *img = _data[sourceIndexPath.row] [_data insertObject:img atIndex:destinationIndexPath.row]; }

    ios9以下,需要自己写collectionView拖拽的方法

    如果你的手机支持iOS9或更高版本,使用苹果为我们提供的方法实现拖拽功能是没有问题的。相信还有很多都在支持ios8,所以下面的方法也许很适用。

    在**- (UICollectionViewCell *)collectionView:(UICollectionView )collectionView cellForItemAtIndexPath:(NSIndexPath )indexPath 方法中,为每个cell添加长按手势,这样就可以在你长按cell的时候响应事件。

    下面我们看看长按事件中应该实现怎样的方法。

    - (void)longPressAction:(UILongPressGestureRecognizer *)longPress { //获取当前cell所对应的indexpath MoveCollectionViewCell *cell = (MoveCollectionViewCell *)longPress.view; NSIndexPath *cellIndexpath = [_collectionView indexPathForCell:cell]; //将此cell 移动到视图的前面 [_collectionView bringSubviewToFront:cell]; _isChange = NO; switch (longPress.state) { case UIGestureRecognizerStateBegan: { //使用数组将collectionView每个cell的 UICollectionViewLayoutAttributes 存储起来。 [self.cellAttributesArray removeAllObjects]; for (int i = 0; i < self.data.count; i++) { [self.cellAttributesArray addObject:[_collectionView layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]]]; } } break; case UIGestureRecognizerStateChanged: { //在移动过程中,使cell的中心与移动的位置相同。 cell.center = [longPress locationInView:_collectionView]; for (UICollectionViewLayoutAttributes *attributes in self.cellAttributesArray) { //判断移动cell的indexpath,是否和目的位置相同,如果相同isChange为YES,然后将数据源交换 if (CGRectContainsPoint(attributes.frame, cell.center) && cellIndexpath != attributes.indexPath) { _isChange = YES; NSString *imgStr = self.data[cellIndexpath.row]; [self.data removeObjectAtIndex:cellIndexpath.row]; [self.data insertObject:imgStr atIndex:attributes.indexPath.row]; [self.collectionView moveItemAtIndexPath:cellIndexpath toIndexPath:attributes.indexPath]; } } } break; case UIGestureRecognizerStateEnded: { //如果没有改变,直接返回原始位置 if (!_isChange) { cell.center = [_collectionView layoutAttributesForItemAtIndexPath:cellIndexpath].center; } } break; default: break; } }

    Git地址:https://github.com/Shin1122/YZChannelTag

    ios9以下Git地址 :  https://github.com/oneMoreTime1357/CollectionViewTips

    Processed: 0.017, SQL: 8