使用UICollectionView实现应用程序管理(删除图标 抖动效果)

ios小白一枚,刚开始学习,所以对于很多理论上的东西研究的还不够,写文章仅仅是为了养成一个好的习惯,有问题可以直接指出,虚心接受,请勿喷….

一、简单介绍UICollectionView:

       UICollectionView是ios6.0之后才出来的一种控件,是对UITableView一种更好的用户(程序猿)体验。基于UICollectionView 我们可以实现更炫的效果。 需要支持3种协议:
(UICollectionViewDateSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout)前两种参考UITableView就可以了。后面一种是对UICollectionView的布局.不同于UITableView的,UICollectionViewCell必须提前注册,这样在缓存池里面找不到cell后就会直接用注册过的创建一个cell.下面介绍一下cell的两种注册方法,以及对应的一些重要的代理方法

1. 两种注册方法:

1.1 class注册:
[self.collectionView registerClass:[ZHCollectionViewCell class] forCellWithReuseIdentifier:@"ZHCollectionCell"];
1.2 Nib注册
//先获取一个nib对象
UINib *nib = [UINib nibWithNibName:@"ZHCollectionReusableView" bundle:[NSBundle mainBundle]];
[self.collectionView registerNib:nib forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footer"];

1.2 关键的代理方法

#pragma mark - UICollectionViewDateSource   数据源方法
//返回这个section个数据个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;
//cell的创建
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;
//返回footer/headerView
-dequeueReusableSupplementaryViewOfKind:withReuseIdentifier:forIndexPath:
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath;

#pragma mark - ZHCollectionReusableViewdelegate   header/footer代理方法
- (void)collectionReusableViewedidapplist:(ZHCollectionReusableView *)view;

#pragma mark - UICollectionViewDelegate
//cell的点击时间
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath;
//返回这个UICollectionView是否可以被选择
-(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath;
//是否高亮
- (BOOL)collectionView:(UICollectionView *)collectionView shouldHighlightItemAtIndexPath:(NSIndexPath *)indexPath;
//高亮
- (void)collectionView:(UICollectionView *)collectionView didHighlightItemAtIndexPath:(NSIndexPath *)indexPath;

#pragma mark - UICollectionViewDelegateFlowLayout
//cell的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;
//实际效果应该是整个collectionView相对于view的内边距
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section;
// 上下两个cell的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section;
// 左右两个cell的间距
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section;
// headerView 的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForHeaderInSection:(NSInteger)section;
// footerView的size
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout referenceSizeForFooterInSection:(NSInteger)section;

二、开始实现功能 (以术为主)

1. 实现的效果

       界面比较简单,有headerView/footerView. 我们主要通过headerView的编辑按钮进入编辑模式(或长按app).app根据自己是否可以删除,显示删除按钮以及抖动。
显示图片

2. 自定义cell

       界面主要由一个删除btn,一个显示appNameLabel,以及一张appIcon.
加载xib文件,所以我们前面创建cell可以直接通过class创建

@implementation ZHCollectionViewCell
- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        NSArray *array = [[NSBundle mainBundle] loadNibNamed:@"ZHCollectionViewCell" owner:self options:nil];
    }
    return  self;
}

这里写图片描述

3. 自定义header/footerView

       这里为了简单,header/footer使用了同一个xib文件
包含一个label以及一个button.
这里写图片描述

4. 添加长按动作

        我们直接在cell里面添加长按手势

--ZHCollectionViewcell.m
- (void)awakeFromNib {
    // Initialization code
    //长按手势
    UILongPressGestureRecognizer *longpressGesutre=[[UILongPressGestureRecognizer alloc]initWithTarget:self action:@selector(handleLongpressGesture:)];
    //长按时间为1秒
    longpressGesutre.minimumPressDuration=1;
    //允许15秒中运动
    longpressGesutre.allowableMovement=15;
    //所需触摸1次
    longpressGesutre.numberOfTouchesRequired=1;
    [self addGestureRecognizer:longpressGesutre];
}
//长按手势监听
- (IBAction)handleLongpressGesture:(UILongPressGestureRecognizer *)sender {
    if (sender.state == UIGestureRecognizerStateBegan) {  //第一次触发执行  避免触发多次
        if ([self.delegate respondsToSelector:@selector(ZHCollectionViewCell:didLongPress:)]) {
            [self.delegate ZHCollectionViewCell:self didLongPress:sender];
        }
    }
}

5 动画效果

--ViewController.m
if (self.isEdit == YES) { //删除状态
        if (cell.isedit == YES) { //可删除
            [cell.deleteBtn setHidden:NO];   //显示删除按钮
            [UIView animateWithDuration:0.1 delay:0 options:0  animations:^
             {
             //顺时针旋转0.05 = 0.05 * 180 = 9°
                 cell.transform=CGAffineTransformMakeRotation(-0.05);
             } completion:^(BOOL finished)
             {
                 //  重复                                  反向            动画时接收交互
                 /**
                  UIViewAnimationOptionAllowUserInteraction      //动画过程中可交互
                  UIViewAnimationOptionBeginFromCurrentState     //从当前值开始动画
                  UIViewAnimationOptionRepeat                    //动画重复执行
                  UIViewAnimationOptionAutoreverse               //来回运行动画
                  UIViewAnimationOptionOverrideInheritedDuration //忽略嵌套的持续时间
                  UIViewAnimationOptionOverrideInheritedCurve    = 1 <<  6, // ignore nested curve
                  UIViewAnimationOptionAllowAnimatedContent      = 1 <<  7, // animate contents (applies to transitions only)
                  UIViewAnimationOptionShowHideTransitionViews   = 1 <<  8, // flip to/from hidden state instead of adding/removing
                  UIViewAnimationOptionOverrideInheritedOptions  = 1 <<  9, // do not inherit any options or animation type
                  */
                 [UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionRepeat|UIViewAnimationOptionAutoreverse|UIViewAnimationOptionAllowUserInteraction  animations:^
                  {
                      cell.transform=CGAffineTransformMakeRotation(0.05);
                  } completion:^(BOOL finished) {}];
             }];
        }
        else{ //不可删除
            [UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionAllowUserInteraction|UIViewAnimationOptionBeginFromCurrentState animations:^
             {
                 cell.transform=CGAffineTransformIdentity;
             } completion:^(BOOL finished) {}];
        }
    }else{
        [UIView animateWithDuration:0.1 delay:0 options:UIViewAnimationOptionAllowUserInteraction|UIViewAnimationOptionBeginFromCurrentState animations:^
         {
             cell.transform=CGAffineTransformIdentity;
         } completion:^(BOOL finished) {}];
    }

6 app删除

        这里有一点需要了解的是,不同于UITableViewController. UITableViewcontroller 中的tableView等于view. 而UICollectionViewController 中的collectionView 不等于view. collectionView表示的是当前显示的cell+UIImage(暂时没研究是神马) 所以我们调用self.collectionView reloadDate 只会刷新当前正在显示的cell.

--ViewController.m
- (void)collectionViewdeleteApp:(ZHCollectionViewCell *)cell
{
    //删除数据
    NSIndexPath *path = cell.indexPath;
    [self.applist removeObjectAtIndex:path.row];
    [self.collectionView reloadData];
}

三、附上demo

链接: http://pan.baidu.com/s/1bnMH8g3 密码: uumq


四、小结

初学者,代码写的不是很好,但是基本功能实现,主要是需要注意cell的重用机制。
设计的关键是实现cell和数据的完全分离 — 引用


        第一篇文章,不会html的小白,弄了大半夜终于写完啦,不管有多少实际价值,坚持写下去,就是对自己的一种历练……

      静坐、思过、锻炼 、读书、明智、开悟、精技

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页