UICollectionView 實(shí)現(xiàn)橫向分頁滑動(dòng)動(dòng)效

一個(gè)簡單的橫向滑動(dòng)功能，可以通過UIScrollView來實(shí)現(xiàn)，如果涉及到分頁滑動(dòng)效果或者更進(jìn)一步的動(dòng)畫實(shí)現(xiàn)，就需要通過設(shè)置scrollview的各種滑動(dòng)狀態(tài)對(duì)應(yīng)的Delegate，來控制相關(guān)動(dòng)效果實(shí)現(xiàn)。其實(shí)通過系統(tǒng)提供的UICollectionView，就能夠省去一大部分關(guān)于控制滑動(dòng)狀態(tài)的工作，最近由于項(xiàng)目需要，研究了下UICollectionView的一些特性，以下就來說說具體的實(shí)現(xiàn)。

最終效果.gif

1.自定義分頁效果

UICollectionView通過設(shè)置pageEnable = YES可以提供簡單的分頁滑動(dòng)效果，不過這種設(shè)置只適用于內(nèi)部cell之間的間距與邊距一致的情況，如果需要自定義間距/邊距，那么就需要我們自己去控制具體的移動(dòng)距離了。

首先我們需要通過繼承UICollectionViewFlowLayout類來自定義其子類，在子類中我們就能對(duì)UICollectionView的各種屬性進(jìn)行控制了：


@interface MHBannerCVFlowLayout()

@property (nonatomic, assign) UIEdgeInsets sectionInsets;
@property (nonatomic, assign) CGFloat miniLineSpace;
@property (nonatomic, assign) CGFloat miniInterItemSpace;
@property (nonatomic, assign) CGSize eachItemSize;
@property (nonatomic, assign) BOOL scrollAnimation;/**<是否有分頁動(dòng)畫*/
@property (nonatomic, assign) CGPoint lastOffset;/**<記錄上次滑動(dòng)停止時(shí)contentOffset值*/
@end

@implementation MHSquareBannerCVFlowLayout
/*初始化部分*/
- (instancetype)initWithSectionInset:(UIEdgeInsets)insets andMiniLineSapce:(CGFloat)miniLineSpace andMiniInterItemSpace:(CGFloat)miniInterItemSpace andItemSize:(CGSize)itemSize
{
    self = [self init];
    if (self) {
        //基本尺寸/邊距設(shè)置
        self.sectionInsets = insets;
        self.miniLineSpace = miniLineSpace;
        self.miniInterItemSpace = miniInterItemSpace;
        self.eachItemSize = itemSize;
    }
    return self;
}

- (instancetype)init
{
    self = [super init];
    if (self) {
        _lastOffset = CGPointZero;
    }
    return self;
}

-(void)prepareLayout
{
    [super prepareLayout];
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;// 水平滾動(dòng)
    /*設(shè)置內(nèi)邊距*/
    self.sectionInset = _sectionInsets;
    self.minimumLineSpacing = _miniLineSpace;
    self.minimumInteritemSpacing = _miniInterItemSpace;
    self.itemSize = _eachItemSize;
    /**
     * decelerationRate系統(tǒng)給出了2個(gè)值：
     * 1. UIScrollViewDecelerationRateFast（速率快）
     * 2. UIScrollViewDecelerationRateNormal（速率慢）
     * 此處設(shè)置滾動(dòng)加速度率為fast，這樣在移動(dòng)cell后就會(huì)出現(xiàn)明顯的吸附效果
     */
    self.collectionView.decelerationRate = UIScrollViewDecelerationRateFast;
}

完成UICollectionViewFlowLayout子類的初始化后，接下來就可以開始著手分析滑動(dòng)效果了。UICollectionView是UIScrollView的子類，所以UIScrollView擁有的delegate在UICollectionView中都能使用，但是由于狀態(tài)繁多，加上很多功能在UICollectionView中系統(tǒng)已經(jīng)幫我們實(shí)現(xiàn)了，所以我們只用去關(guān)心UICollectionViewLayout是否能提供更加高度抽象的方法給我們來操作即可。當(dāng)然，系統(tǒng)這里已經(jīng)給出了兩個(gè)測(cè)算滑動(dòng)停止位置的方法：

- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;
- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset NS_AVAILABLE_IOS(7_0);

兩個(gè)方法都能獲取系統(tǒng)給出的滑動(dòng)預(yù)計(jì)停止點(diǎn)，第一個(gè)方法里面多出了一個(gè)速率值，這里我們使用第一個(gè)方法來自定義出pageEnable=YES的效果：

/**
 * 這個(gè)方法的返回值，就決定了collectionView停止?jié)L動(dòng)時(shí)的偏移量
 */
-(CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity
{    
    CGFloat pageSpace = [self stepSpace];//計(jì)算分頁步距
    CGFloat offsetMax = self.collectionView.contentSize.width - (pageSpace + self.sectionInset.right + self.miniLineSpace);
    CGFloat offsetMin = 0;
    /*修改之前記錄的位置，如果小于最小contentsize或者大于最大contentsize則重置值*/
    if (_lastOffset.x<offsetMin)
    {
        _lastOffset.x = offsetMin;
    }
    else if (_lastOffset.x>offsetMax)
    {
        _lastOffset.x = offsetMax;
    }
    
    CGFloat offsetForCurrentPointX = ABS(proposedContentOffset.x - _lastOffset.x);//目標(biāo)位移點(diǎn)距離當(dāng)前點(diǎn)的距離絕對(duì)值
    CGFloat velocityX = velocity.x;
    BOOL direction = (proposedContentOffset.x - _lastOffset.x) > 0;//判斷當(dāng)前滑動(dòng)方向,手指向左滑動(dòng)：YES；手指向右滑動(dòng)：NO
    
    if (offsetForCurrentPointX > pageSpace/8. && _lastOffset.x>=offsetMin && _lastOffset.x<=offsetMax)
    {
        NSInteger pageFactor = 0;//分頁因子，用于計(jì)算滑過的cell個(gè)數(shù)
        if (velocityX != 0)
        {
            /*滑動(dòng)*/
            pageFactor = ABS(velocityX);//速率越快，cell滑過數(shù)量越多
        }
        else
        {
            /**
             * 拖動(dòng)
             * 沒有速率，則計(jì)算：位移差/默認(rèn)步距=分頁因子
             */
            pageFactor = ABS(offsetForCurrentPointX/pageSpace);
        }

        /*設(shè)置pageFactor上限為2, 防止滑動(dòng)速率過大，導(dǎo)致翻頁過多*/
        pageFactor = pageFactor<1?1:(pageFactor<3?1:2);

        CGFloat pageOffsetX = pageSpace*pageFactor;
        proposedContentOffset = CGPointMake(_lastOffset.x + (direction?pageOffsetX:-pageOffsetX), proposedContentOffset.y);
    }
    else
    {
        /*滾動(dòng)距離，小于翻頁步距一半，則不進(jìn)行翻頁操作*/
        proposedContentOffset = CGPointMake(_lastOffset.x, _lastOffset.y);
    }

    //記錄當(dāng)前最新位置
    _lastOffset.x = proposedContentOffset.x;
    return proposedContentOffset;
}

/**
 *計(jì)算每滑動(dòng)一頁的距離：步距
 */
-(CGFloat)stepSpace
{
    return self.eachItemSize.width + self.miniLineSpace;
}

ok，到此為止，分頁滑動(dòng)的效果已經(jīng)出來了，簡單來說，重點(diǎn)在3個(gè)方面：

  1. 設(shè)定好固定翻頁距離
  2. 計(jì)算并限制翻頁數(shù)量
  3. 設(shè)定翻頁觸發(fā)條件(這里我設(shè)置的觸發(fā)點(diǎn)是，滑動(dòng)距離超過翻頁距離的1/8即可翻頁)

通過以上3個(gè)數(shù)據(jù)就可以計(jì)算得到自定義滑動(dòng)停止點(diǎn)的值，直接修改系統(tǒng)給出的值即可。

2.簡單的切換效果

ok，分頁滑動(dòng)已經(jīng)搞定了，接下來就加入點(diǎn)效果，給分頁滑動(dòng)錦上添花。

所有涉及到手勢(shì)動(dòng)效的，都會(huì)涉及到兩個(gè)概念：位移量、動(dòng)畫算法，前者好說，基于UIScrollView的子類控件都可以很方便的獲取手指在屏幕上的位移量，但是對(duì)于動(dòng)畫算法，就需要相關(guān)的數(shù)學(xué)知識(shí)了，一個(gè)簡單的縮放動(dòng)畫我們可以通過這篇文章 來了解下相關(guān)概念，這里不在贅述。

再來看看UICollectionViewFlowLayout類中有沒有可以捕獲到手勢(shì)位移量的方法，我們會(huì)發(fā)現(xiàn)，除了上述的- (CGPoint)targetContentOffsetForProposedContentOffset:(CGPoint)proposedContentOffset withScrollingVelocity:(CGPoint)velocity;方法外，沒有其他有關(guān)于位移量描述的方法了，那么換個(gè)思路來想，在滑動(dòng)UICollectionView時(shí)，其中的Cell是會(huì)不停的刷新，那么只要找到控制SubView刷新的方法，其實(shí)就能解決這個(gè)問題。那么我們?cè)?code>UICollectionViewFlowLayout中就找到了這個(gè)方法：-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect此方法給出了一個(gè)當(dāng)前滑動(dòng)范圍，通過這個(gè)值，我們能得到對(duì)應(yīng)區(qū)域內(nèi)的所有subview的UICollectionViewLayoutAttributes，進(jìn)一步轉(zhuǎn)換就能獲取到對(duì)應(yīng)的subview實(shí)例，那么在此基礎(chǔ)上進(jìn)行動(dòng)畫設(shè)定就很容易了。

下面放代碼，動(dòng)畫算法我就直接套用上面鏈接文章中現(xiàn)成的：

/**
 * 當(dāng)collectionView的顯示范圍發(fā)生改變的時(shí)候，是否需要重新刷新布局
 * 一旦重新刷新布局，就會(huì)重新調(diào)用 layoutAttributesForElementsInRect:方法
 */
-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
{
    return YES;
}

/**
 *防止報(bào)錯(cuò)先復(fù)制attributes
 */
- (NSArray *)getCopyOfAttributes:(NSArray *)attributes
{
    NSMutableArray *copyArr = [NSMutableArray new];
    for (UICollectionViewLayoutAttributes *attribute in attributes) {
        [copyArr addObject:[attribute copy]];
    }
    return copyArr;
}

/**
 *設(shè)置放大動(dòng)畫
 */
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    /*獲取rect范圍內(nèi)的所有subview的UICollectionViewLayoutAttributes*/
    NSArray *arr = [self getCopyOfAttributes:[super layoutAttributesForElementsInRect:rect]];

    /*動(dòng)畫計(jì)算*/
    if (self.scrollAnimation)
    {
        /*計(jì)算屏幕中線*/
        CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width/2.0f;
        /*刷新cell縮放*/
        for (UICollectionViewLayoutAttributes *attributes in arr) {
            CGFloat distance = fabs(attributes.center.x - centerX);
            /*移動(dòng)的距離和屏幕寬度的的比例*/
            CGFloat apartScale = distance/self.collectionView.bounds.size.width;
            /*把卡片移動(dòng)范圍固定到 -π/4到 +π/4這一個(gè)范圍內(nèi)*/
            CGFloat scale = fabs(cos(apartScale * M_PI/4));
            /*設(shè)置cell的縮放按照余弦函數(shù)曲線越居中越趨近于1*/
            CATransform3D plane_3D = CATransform3DIdentity;
            plane_3D = CATransform3DScale(plane_3D, 1, scale, 1);
            attributes.transform3D = plane_3D;
        }
    }
    return arr;
}

到此為止，整個(gè)分頁滑動(dòng)加切換效果都已經(jīng)完成了，對(duì)于這部分難點(diǎn)，還是在于想法和對(duì)應(yīng)動(dòng)畫的算法，我嘗試了幾種仿3D切換效果，找準(zhǔn)位移量和動(dòng)畫效果之間的關(guān)系不太容易，除了根據(jù)對(duì)應(yīng)數(shù)學(xué)方法之外，只能依靠直覺慢慢調(diào)試了，哈哈哈，不太推薦這么做。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容