< 返回技术文档列表

可移动CollectionView实现记录

发布时间:2022-11-17 22:51:45⊙投诉举报

这里仅仅只是记录一下使用collectionView实现cell的可拖动改变位置。

效果图:


Simulator Screen Shot - iPhone 8 - 2022-11-16 at 16.13.14.png

这里选择使用collectionview来实现。

  1. collectionViewCell实现
  2. collectionView布局、数据源设置
  3. collectionView代理商实现
  4. collectionView增加长按手势及手势解决

collectionViewCell实现

继承collectionViewCell,可以使用xib实现,也可使用纯代码实现。这里使用xib实现


HmCollectionViewCell

collectionView布局、数据源设置

collectionView布局

在继承自UIViewController的VC中公告collectionView变量、实现懒加载和增加到vc的view上

// collectionView变量公告@property (nonatomic, strong) UICollectionView *collectionView;// collectionView增加到view上[self.view addSubview:self.collectionView];// collectionView懒加载- (UICollectionView *)collectionView {    if (!_collectionView) {                UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];        layout.itemSize = CGSizeMake(100, 100);        layout.minimumLineSpacing = 3;        layout.minimumInteritemSpacing = 3;        layout.scrollDirection = UICollectionViewScrollDirectionVertical;        _collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, 306, 306) collectionViewLayout:layout];        _collectionView.center = self.view.center;        _collectionView.delegate = self;        _collectionView.dataSource = self;        _collectionView.backgroundColor = UIColor.whiteColor;        [_collectionView registerNib:[UINib nibWithNibName:NSStringFromClass([HmCollectionViewCell class]) bundle:[NSBundle mainBundle]] forCellWithReuseIdentifier:@"cell"];    }    return _collectionView;}

数据源设置

由于涉及到cell的拖动和位置改变,所以数据源应该使用可变数组来承载数据。

// 公告@property (nonatomic, strong) NSMutableArray *data;// 懒加载- (NSMutableArray *)data {    if (!_data) {        NSMutableArray *arr = [NSMutableArray array];        for (int i = 0; i < 9; i ++) {            [arr addObject:[NSNumber numberWithInt:(i + 1)]];        }        _data = arr;    }    return _data;}

collectionView代理商实现

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {    return self.data.count;}- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {    HmCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];    cell.nameLabel.text = [NSString stringWithFormat:@"%@", self.data[indexPath.row]];    return cell;}// 只有实现这个代理商并返回YES,cell才可移动- (BOOL)collectionView:(UICollectionView *)collectionView canMoveItemAtIndexPath:(NSIndexPath *)indexPath {    return YES;}- (void)collectionView:(UICollectionView *)collectionView moveItemAtIndexPath:(NSIndexPath *)sourceIndexPath toIndexPath:(NSIndexPath *)destinationIndexPath {    id selected = self.data[sourceIndexPath.row];    [self.data removeObject:selected];    [self.data insertObject:selected atIndex:destinationIndexPath.row];}

collectionView增加长按手势及手势解决

长按手势增加在collectionView上,通过手指长按的位置进行转换至对应的cell上,而后进行响应的解决。

// 增加长按手势    UILongPressGestureRecognizer *longPress = [[UILongPressGestureRecognizer alloc] initWithTarget:self action:@selector(handlelongGesture:)];    [self.collectionView addGestureRecognizer:longPress];// 长按方法实现- (void)handlelongGesture:(UIGestureRecognizer *)longPress {    switch (longPress.state) {      case UIGestureRecognizerStateBegan:      { //手势开始        //判断手势落点位置能否在row上        NSIndexPath *indexPath = [self.collectionView indexPathForItemAtPoint:[longPress locationInView:self.collectionView]];        if (indexPath == nil) {          break;        }        UICollectionViewCell *cell = [self.collectionView cellForItemAtIndexPath:indexPath];        [self.view bringSubviewToFront:cell];          cell.backgroundColor = [UIColor colorWithRed:1.0 green:0.2 blue:0.1 alpha:0.5];        //iOS9方法 移动cell        [self.collectionView beginInteractiveMovementForItemAtIndexPath:indexPath];      }        break;      case UIGestureRecognizerStateChanged:      { // 手势改变        // iOS9方法 移动过程中随时升级cell位置        [self.collectionView updateInteractiveMovementTargetPosition:[longPress locationInView:self.collectionView]];      }        break;      case UIGestureRecognizerStateEnded:      { // 手势结束        // iOS9方法 移动结束后关闭cell移动        [self.collectionView endInteractiveMovement];      }        break;      default: //手势其余状态        [self.collectionView cancelInteractiveMovement];        break;    }}

总结

至此整个collectionView的可移动操作设置结束。其中最重要的点在于实现collectionView的响应代理商,尤其是可移动代理商的实现。
这里仅仅做个记录,方便以后使用到的时候查找。


/template/Home/Zkeys/PC/Static