姬長信(Redy)

iOS 卡片式控件:QiCardView

>前言/uff1a因项目中需求/uff0c需要做一个卡片式控件。故QiCardView诞生了。 首先/uff0c先来看一下QiCardView的效果图/uff1a ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/68247715681913561032.png) 从命名来看/uff0cQiCardView/uff0c顾名思义/uff0c是一个可定制的卡片式UI控件。 从设计来看/uff0cQiCardView仿照UITableView的设计/uff0c支持cell复用/uff0c节省了资源。 话不多说/uff0c先来看下整体架构~ ### 一、QiCardView整体架构设计 架构层面仿照了`UITableView`的设计/uff0c采用了cell复用策略。 在此基础上/uff0c融入了一些手势操作/uff0c更加富有交互性。 上架构图/uff1a ![](https://cocosbcx.oss-cn-beijing.aliyuncs.com/article/68247715681913577035.png) 两个主类分别为`QiCardView`与`QiCardViewCell`。/uff08仿照`UITableView`+`UITableViewCell`的设计/uff09 - **`QiCardView`**下有两个代理/uff1a`QiCardViewDataSource`、`QiCardViewDelegate`。/uff08与UITableView的代理方法类似/uff09 - **`QiCardViewCell`**下有一个代理/uff1a`QiCardViewCellDelegate`。/uff08这个代理可以不关心/uff0c主要目的是辅助QiCardView里的一些处理逻辑/uff09 ### 二、如何自定义使用QiCardView/uff1f Cell自定义很简单/uff0c只要新建一个类/uff08例如/uff1a`QiCardViewItemCell`/uff09继承自`QiCardViewCell`即可。 在Controller中/uff0c基本使用上几乎与`UITableView`类似。 - 初始化`CardView`方法/uff1a 在上Demo之前/uff0c先介绍几个可以自定义的配置属性/uff1a 属性| 类型 | 介绍 -----|-----|----- visibleCount | NSInteger | 卡片Cell可见数量(默认3)。因为有复用策略/uff0c所以即实际创建的Cell数量。 lineSpacing | CGFloat | 行间距(默认10.0/uff0c可自行计算scale比例来做间距) interitemSpacing | CGFloat | 列间距(默认10.0/uff0c可自行计算scale比例来做间距) maxAngle | CGFloat | 侧滑最大角度(默认15°)。值约小越容易划出/uff0c越大约不好划出。 maxRemoveDistance | CGFloat | 最大移除距离(默认屏幕的1/4)/uff0c滑动距离不够时归位。 isAlpha | CGFloat | cell是否需要渐变透明度。/uff08默认YES/uff09 ```initCardView - (void)initViews { _cardView = [[QiCardView alloc] initWithFrame:CGRectMake(25.0, 150.0, self.view.frame.size.width - 50.0, 420.0)]; _cardView.backgroundColor = [UIColor lightGrayColor];//!` ```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; } ``` - 代理/uff1a`QiCardViewDelegate`/uff1a 还是首先controller需要遵守协议/uff1a``。 ```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复用策略实现 1. 注册Cell/uff1a 两种方式/uff1a`registerNib`、`registerClass`。 很简单。 ```register /** 注册cell方法一/uff1aNib */ - (void)registerNib:(nullable UINib *)nib forCellReuseIdentifier:(NSString *)identifier { self.nib = nib; self.identifier = identifier; } /** 注册cell方法二/uff1aClass */ - (void)registerClass:(nullable Class)cellClass forCellReuseIdentifier:(NSString *)identifier { self.cellClass = cellClass; self.identifier = identifier; } ``` 2. 获取缓存Cell策略/uff1a 先看缓存池中是否有相同ID/uff08`identifier`/uff09的Cell/uff0c有的话/uff0c直接返回Cell。 若缓存池中没有/uff0c那么就`new`一个新的Cell啦~ ```dequeue /** 获取缓存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; } ``` 3. 当cell走`DidRemoveFromSuperView`方法时/uff0c把cell加入缓存池。 ```demo313 - (void)cardViewCellDidRemoveFromSuperView:(QiCardViewCell *)cell { //... [self.reusableCells addObject:cell]; //... } ``` #### 3.2 cell重叠透明度渐变的实现 1. 首先声明了一个静态变量/uff1a`moveCount`来记录翻卡次数。/uff08以便将cell的index与卡片的index逻辑关联/uff09 ```demo33 static int moveCount = 0;//! 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; } } // 手势结束操作/uff08不考虑上下位移/uff09 - (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