iOS 自定義卡片式控件：QiCardView

時間  2019-11-07
標籤 ios 自定義 卡片 控件 qicardview 欄目 iOS 简体版
原文   原文鏈接

級別： ★★☆☆☆
標籤：「iOS」「卡片式控件」「QiCardView」
做者： MrLiuQ
審校： QiShare團隊php

前言：因項目中需求，須要作一個卡片式控件。故QiCardView誕生了。git

首先，先來看一下QiCardView的效果圖：github

從命名來看，QiCardView，顧名思義，是一個可定製的卡片式UI控件。 從設計來看，QiCardView仿照UITableView的設計，支持cell複用，節省了資源。數組

話很少說，先來看下總體架構~緩存

1、QiCardView總體架構設計

架構層面仿照了UITableView的設計，採用了cell複用策略。 在此基礎上，融入了一些手勢操做，更加富有交互性。微信

上架構圖：架構

兩個主類分別爲QiCardView與QiCardViewCell。（仿照UITableView+UITableViewCell的設計）ide

  • QiCardView 下有兩個代理：QiCardViewDataSource、QiCardViewDelegate。（與UITableView的代理方法相似）
  • QiCardViewCell 下有一個代理：QiCardViewCellDelegate。（這個代理能夠不關心，主要目的是輔助QiCardView裏的一些處理邏輯）

2、如何自定義使用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));
}
複製代碼

3、QiCardView的技術點

3.1 QiCardViewCell複用策略實現

  1. 註冊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;
}
複製代碼
  1. 獲取緩存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;
}
複製代碼
  1. 當cell走DidRemoveFromSuperView方法時，把cell加入緩存池。
- (void)cardViewCellDidRemoveFromSuperView:(QiCardViewCell *)cell {

    //...    

    [self.reusableCells addObject:cell];

    //...
}
複製代碼

3.2 cell重疊透明度漸變的實現

  1. 首先聲明瞭一個靜態變量：moveCount來記錄翻卡次數。（以便將cell的index與卡片的index邏輯關聯）
static int moveCount = 0;//!< 記錄翻頁次數
複製代碼
  1. 邏輯：每一個CardCell 在 「remove from super view」 的時候 moveCount+1。
#pragma mark - QiCardViewCellDelagate

- (void)cardViewCellDidRemoveFromSuperView:(QiCardViewCell *)cell {
    
    moveCount++;
    
    //....
}
複製代碼
  1. 邏輯：在reload方法中，須要將moveCount置0。（很好理解，reload時，moveCount須要從新開始計算）
- (void)reloadDataAnimated:(BOOL)animated {
    
    moveCount = 0;//!< 漸變須要
    
   //...
}
複製代碼
  1. 關鍵邏輯：在每次更新佈局時，設置每一個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];
    }];
}
複製代碼

4、將來可能優化的點

  • 設計層面：若是將手勢操做融入QiCardView中，將QiCardViewCell變成純粹的Cell，會不會更好。（思考中）
  • 應用層面：目前只支持一個ID的Cell重用，將來渴望拓展成多個ID的Cell均可重用。（PS：由於只存了一個ID，後續考慮存數組，以及對應的Cell緩存池數組。以此猜想UITableView的內部實現。）

源碼：QiCardView源碼。

小編微信：可加並拉入《QiShare技術交流羣》。

關注咱們的途徑有：
QiShare(簡書)
QiShare(掘金)
QiShare(知乎)
QiShare(GitHub)
QiShare(CocoaChina)
QiShare(StackOverflow)
QiShare(微信公衆號)

推薦文章：
iOS Wireshark抓包
iOS Charles抓包
初探TCP
IP、UDP初探
奇舞週刊

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程