iOS 卡片式控件：QiCardView-六虎

前言：因项目中需求，需求封装一个卡片式控件。故QiCardView诞生了。

首要，先来看一下QiCardView的效果图：

从命名来看，QiCardView，顾名思义，是一个可定制的卡片式UI控件。从规划来看，QiCardView模仿UITableView的规划，支撑cell复用，节省了资源。

话不多说，先来看下全体架构~

一、QiCardView全体架构规划

架构层面模仿了UITableView的规划，采用了cell复用战略。在此基础上，融入了一些手势操作，愈加富有交互性。

上架构图：原图地址

两个主类分别为QiCardView与QiCardViewCell。（模仿UITableView+UITableViewCell的规划）

QiCardView 下有两个署理：QiCardViewDataSource、QiCardViewDelegate。（与UITableView的署理办法相似）
QiCardViewCell 下有一个署理：QiCardViewCellDelegate。（这个署理能够不关心，主要意图是辅佐QiCardView里的一些处理逻辑）

二、如何自定义运用QiCardView？

Cell自定义很简单，只需新建一个类（例如：QiCardViewItemCell）承继自QiCardViewCell即可。

在Controller中，基本运用上简直与UITableView相似。

初始化CardView办法：

在上Demo之前，先介绍几个能够自定义的配置属性：

属性	类型	介绍
visibleCount	NSInteger	卡片Cell可见数量(默许3)。因为有复用战略，所以即实际创建的Cell数量。
lineSpacing	CGFloat	行间隔(默许10.0，可自行核算scale份额来做间隔)
interitemSpacing	CGFloat	列间隔(默许10.0，可自行核算scale份额来做间隔)
maxAngle	CGFloat	侧滑最大视点(默许15)。值约小越容易划出，越大约不好划出。
maxRemoveDistance	CGFloat	最大移除间隔(默许屏幕的1/4)，滑动间隔不够时归位。
isAlpha	CGFloat	cell是否需求突变透明度。（默许YES）

- (void)initViews {
    _cardView = [[QiCardView alloc] initWithFrame:CGRectMake(25.0, 150.0, self.view.frame.size.width - 50.0, 420.0)];
    _cardView.backgroundColor = [UIColor lightGrayColor];//!< 为了指出carddView的区域，指明背景色
    _cardView.dataSource = self;
    _cardView.delegate = self;
    _cardView.visibleCount = 4;
    _cardView.lineSpacing = 15.0;
    _cardView.interitemSpacing = 10.0;
    _cardView.maxAngle = 10.0;
    _cardView.isAlpha = YES;
    _cardView.maxRemoveDistance = 100.0;
    _cardView.layer.cornerRadius = 10.0;
    [_cardView registerClass:[QiCardItemCell class] forCellReuseIdentifier:qiCardCellId];
    [self.view addSubview:_cardView];
}

数据源：QiCardViewDataSource：首要controller要遵守协议：<QiCardViewDataSource>

#pragma mark - QiCardViewDataSource
- (QiCardItemCell *)cardView:(QiCardView *)cardView cellForRowAtIndex:(NSInteger)index {
    QiCardItemCell *cell = [cardView dequeueReusableCellWithIdentifier:qiCardCellId];
    cell.cellData = _cellItems[index];
    //...
    return cell;
}
- (NSInteger)numberOfCountInCardView:(UITableView *)cardView {
    return _cellItems.count;
}

署理：QiCardViewDelegate：还是首要controller需求遵守协议：<QiCardViewDelegate>。

#pragma mark - QiCardViewDelegate
- (void)cardView:(QiCardView *)cardView didRemoveLastCell:(QiCardViewCell *)cell forRowAtIndex:(NSInteger)index {
    [cardView reloadDataAnimated:YES];
}
- (void)cardView:(QiCardView *)cardView didRemoveCell:(QiCardViewCell *)cell forRowAtIndex:(NSInteger)index {
    NSLog(@"didRemoveCell forRowAtIndex = %ld", index);
}
- (void)cardView:(QiCardView *)cardView didDisplayCell:(QiCardViewCell *)cell forRowAtIndex:(NSInteger)index {
    NSLog(@"didDisplayCell forRowAtIndex = %ld", index);
}
- (void)cardView:(QiCardView *)cardView didMoveCell:(QiCardViewCell *)cell forMovePoint:(CGPoint)point {
    NSLog(@"move point = %@", NSStringFromCGPoint(point));
}

三、QiCardView的技能点

3.1 QiCardViewCell复用战略完成

注册Cell：两种方式：registerNib、registerClass。很简单。

/** 注册cell办法一：Nib */
- (void)registerNib:(nullable UINib *)nib forCellReuseIdentifier:(NSString *)identifier {
    self.nib = nib;
    self.identifier = identifier;
}
/** 注册cell办法二：Class */
- (void)registerClass:(nullable Class)cellClass forCellReuseIdentifier:(NSString *)identifier {
    self.cellClass = cellClass;
    self.identifier = identifier;
}

获取缓存Cell战略：先看缓存池中是否有相同ID（identifier）的Cell，有的话，直接回来Cell。若缓存池中没有，那么就new一个新的Cell啦~

/** 获取缓存cell */
- (__kindof QiCardViewCell *)dequeueReusableCellWithIdentifier:(NSString *)identifier {
    for (QiCardViewCell *cell in self.reusableCells) {
        if ([cell.reuseIdentifier isEqualToString:identifier]) {
            [self.reusableCells removeObject:cell];
            return cell;
        }
    }
    if (self.nib) {
        QiCardViewCell *cell = [[self.nib instantiateWithOwner:nil options:nil] lastObject];
        cell.reuseIdentifier = identifier;
        return cell;
    } else if (self.cellClass) { // 注册class
        QiCardViewCell *cell = [[self.cellClass alloc] initWithReuseIdentifier:identifier];
        cell.reuseIdentifier = identifier;
        return cell;
    }
    return nil;
}

当cell走DidRemoveFromSuperView办法时，把cell参加缓存池。

- (void)cardViewCellDidRemoveFromSuperView:(QiCardViewCell *)cell {
    //...    
    [self.reusableCells addObject:cell];
    //...
}

3.2 cell重叠透明度突变的完成

首要声明晰一个静态变量：moveCount来记录翻卡次数。（以便将cell的index与卡片的index逻辑关联）

static int moveCount = 0;//!< 记录翻页次数

逻辑：每个CardCell 在 “remove from super view” 的时分 moveCount+1。

#pragma mark - QiCardViewCellDelagate
- (void)cardViewCellDidRemoveFromSuperView:(QiCardViewCell *)cell {
    moveCount++;
    //....
}

逻辑：在reload办法中，需求将moveCount置0。（很好了解，reload时，moveCount需求重新开始核算）

- (void)reloadDataAnimated:(BOOL)animated {
    moveCount = 0;//!< 突变需求
   //...
}

要害逻辑：在每次更新布局时，设置每个Cell的突变值（即alpha）

/** 更新布局（动画） */
- (void)updateLayoutVisibleCellsWithAnimated:(BOOL)animated {
    //...
    if (_isAlpha) {
        BOOL isTopCell = (i == _currentIndex - moveCount);
        if (isTopCell) {//!< 如果是最上面的Cell就透明度为1
            cell.alpha = 1.0;
         } else {
            cell.alpha = (i + 1.9) * 1.0/self.visibleCells.count;
        }
    }
    //...
}

3.3 手势操作完成

这部分主要是手势+动画。细节比较多，小而杂。详细逻辑，请见源码。

#define Qi_SNAPSHOTVIEW_TAG 999
#define Qi_DEGREES_TO_RADIANS(angle) (angle / 180.0 * M_PI)
- (void)panGestureRecognizer:(UIPanGestureRecognizer*)pan {
    switch (pan.state) {
        case UIGestureRecognizerStateBegan:
            self.currentPoint = CGPointZero;
            break;
        case UIGestureRecognizerStateChanged: {
            CGPoint movePoint = [pan translationInView:pan.view];
            self.currentPoint = CGPointMake(self.currentPoint.x + movePoint.x , self.currentPoint.y + movePoint.y);
            CGFloat moveScale = self.currentPoint.x / self.maxRemoveDistance;
            if (ABS(moveScale) > 1.0) {
                moveScale = (moveScale > 0) ? 1.0 : -1.0;
            }
            CGFloat angle = Qi_DEGREES_TO_RADIANS(self.maxAngle) * moveScale;
            CGAffineTransform transRotation = CGAffineTransformMakeRotation(angle);
            self.transform = CGAffineTransformTranslate(transRotation, self.currentPoint.x, self.currentPoint.y);
            if (self.cell_delegate && [self.cell_delegate respondsToSelector:@selector(cardViewCellDidMoveFromSuperView:forMovePoint:)]) {
                [self.cell_delegate cardViewCellDidMoveFromSuperView:self forMovePoint:self.currentPoint];
            }
            [pan setTranslation:CGPointZero inView:pan.view];
        }
            break;
        case UIGestureRecognizerStateEnded:
            [self didPanStateEnded];
            break;
        case UIGestureRecognizerStateCancelled:
        case UIGestureRecognizerStateFailed:
            [self restoreCellLocation];
            break;
        default:
            break;
    }
}
// 手势结束操作（不考虑上下位移）
- (void)didPanStateEnded {
    // 右滑移除
    if (self.currentPoint.x > self.maxRemoveDistance) {
        __block UIView *snapshotView = [self snapshotViewAfterScreenUpdates:NO];
        snapshotView.transform = self.transform;
        [self.superview.superview addSubview:snapshotView];
        [self didCellRemoveFromSuperview];
        CGFloat endCenterX = [UIScreen mainScreen].bounds.size.width/2 + self.frame.size.width * 1.5;
        [UIView animateWithDuration:Qi_DefaultDuration animations:^{
            CGPoint center = self.center;
            center.x = endCenterX;
            snapshotView.center = center;
        } completion:^(BOOL finished) {
            [snapshotView removeFromSuperview];
        }];
    }
    // 左滑移除
    else if (self.currentPoint.x < -self.maxRemoveDistance) {
        __block UIView *snapshotView = [self snapshotViewAfterScreenUpdates:NO];
        snapshotView.transform = self.transform;
        [self.superview.superview addSubview:snapshotView];
        [self didCellRemoveFromSuperview];
        CGFloat endCenterX = -([UIScreen mainScreen].bounds.size.width/2 + self.frame.size.width);
        [UIView animateWithDuration:Qi_DefaultDuration animations:^{
            CGPoint center = self.center;
            center.x = endCenterX;
            snapshotView.center = center;
        } completion:^(BOOL finished) {
            [snapshotView removeFromSuperview];
        }];
    }
    // 滑动间隔不够归位
    else {
        [self restoreCellLocation];
    }
}
// 复原卡片方位
- (void)restoreCellLocation {
    [UIView animateWithDuration:Qi_SpringDuration delay:0
         usingSpringWithDamping:Qi_SpringWithDamping
          initialSpringVelocity:Qi_SpringVelocity
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^{
                         self.transform = CGAffineTransformIdentity;
                     } completion:nil];
}
// 卡片移除处理
- (void)didCellRemoveFromSuperview {
    self.transform = CGAffineTransformIdentity;
    [self removeFromSuperview];
    if ([self.cell_delegate respondsToSelector:@selector(cardViewCellDidRemoveFromSuperView:)]) {
        [self.cell_delegate cardViewCellDidRemoveFromSuperView:self];
    }
}
- (void)removeFromSuperviewSwipe:(QiCardCellSwipeDirection)direction {
    switch (direction) {
        case QiCardCellSwipeDirectionLeft: {
            [self removeFromSuperviewLeft];
        }
            break;
        case QiCardCellSwipeDirectionRight: {
            [self removeFromSuperviewRight];
        }
            break;
        default:
            break;
    }
}
// 向左边移除动画
- (void)removeFromSuperviewLeft {
    __block UIView *snapshotView = [self snapshotViewAfterScreenUpdates:NO];
    [self.superview.superview addSubview:snapshotView];
    [self didCellRemoveFromSuperview];
    CGAffineTransform transRotation = CGAffineTransformMakeRotation(-Qi_DEGREES_TO_RADIANS(self.maxAngle));
    CGAffineTransform transform = CGAffineTransformTranslate(transRotation, 0, self.frame.size.height/4.0);
    CGFloat endCenterX = -([UIScreen mainScreen].bounds.size.width/2 + self.frame.size.width);
    [UIView animateWithDuration:Qi_DefaultDuration animations:^{
        CGPoint center = self.center;
        center.x = endCenterX;
        snapshotView.center = center;
        snapshotView.transform = transform;
    } completion:^(BOOL finished) {
        [snapshotView removeFromSuperview];
    }];
}
// 向右边移除动画
- (void)removeFromSuperviewRight {
    __block UIView *snapshotView = [self snapshotViewAfterScreenUpdates:NO];
    snapshotView.frame = self.frame;
    [self.superview.superview addSubview:snapshotView];
    [self didCellRemoveFromSuperview];
    CGAffineTransform transRotation = CGAffineTransformMakeRotation(Qi_DEGREES_TO_RADIANS(self.maxAngle));
    CGAffineTransform transform = CGAffineTransformTranslate(transRotation, 0, self.frame.size.height/4.0);
    CGFloat endCenterX = [UIScreen mainScreen].bounds.size.width/2 + self.frame.size.width * 1.5;
    [UIView animateWithDuration:Qi_DefaultDuration animations:^{
        CGPoint center = self.center;
        center.x = endCenterX;
        snapshotView.center = center;
        snapshotView.transform = transform;
    } completion:^(BOOL finished) {
        [snapshotView removeFromSuperview];
    }];
}

四、未来可能优化的点

规划层面：如果将手势操作融入QiCardView中，将QiCardViewCell变成朴实的Cell，会不会更好。（思考中）
应用层面：目前只支撑一个ID的Cell重用，未来渴望拓宽成多个ID的Cell都可重用。（PS：因为只存了一个ID，后续考虑存数组，以及对应的Cell缓存池数组。以此猜想UITableView的内部完成。）

源码：QiCardView源码。

最后，如有规划上的问题，欢迎各路大神们留言给我~

iOS 卡片式控件：QiCardView

一、QiCardView全体架构规划

二、如何自定义运用QiCardView？

三、QiCardView的技能点

3.1 QiCardViewCell复用战略完成

3.2 cell重叠透明度突变的完成

3.3 手势操作完成

作者信息

推广

iOS 卡片式控件：QiCardView

一、QiCardView全体架构规划

二、如何自定义运用QiCardView？

三、QiCardView的技能点

3.1 QiCardViewCell复用战略完成

3.2 cell重叠透明度突变的完成

3.3 手势操作完成

相关文章

导航: 嵌套导航图和 | MAD Skills

Android登录拦截的场景-基于动态代理+Hook的实现

什么是A/B实验，为什么要开A/B实验？

使用系统自带分享，分享到微信、朋友圈、微博、QQ，适配Android12

作者信息

推广