隔了好多天，因?yàn)樵诿e的事。。。
那我們現(xiàn)在要做什么，上一篇講到一個(gè)滾動(dòng)大屏圖，巨丑。
趁著回憶的時(shí)間，先添兩行代碼

 //隱藏滾動(dòng)條
 self.collectionView.showsVerticalScrollIndicator = NO;
 self.collectionView.showsHorizontalScrollIndicator = NO;

開始正題

讓item變小

毫無疑問，這是一個(gè)很簡單的事情。我們首先應(yīng)該去設(shè)置itemSize,然后設(shè)置行（這里是縱向）間距，其次可以做一個(gè)組邊距（sectionInset)使其兩邊留白。
當(dāng)然簡單的事情就要考慮的稍微多一點(diǎn)，這個(gè)size要怎么設(shè)置（200，300），這樣可能在不同大小的屏幕上會(huì)有很明顯的差別，那有人會(huì)說可以像Masonry（一個(gè)layout的框架）設(shè)置與其他UI的關(guān)系位置，這是一種策略，但是不見得好，因?yàn)樗皇且粋€(gè)純色的東西。根據(jù)其他位置拉伸變化（即便可以保持圖片不拉伸）也不見得好，所以可以看很多代碼會(huì)有一堆屏幕大小的宏，然后根據(jù)一個(gè)（200，300）針對(duì)某一尺寸的屏幕，對(duì)于不同的屏幕，按屏幕比等比擴(kuò)大的代碼。這個(gè)可以自行實(shí)現(xiàn)，我做簡單易懂一點(diǎn)

#define ItemHeight (ScreenHeight * (5.0 / 9))
#define ItemWidth (ScreenWidth * (3.0 / 5))

然后相應(yīng)的代碼變成

self.itemSize = CGSizeMake(ItemWidth, ItemHeight);
self.scrollDirection = UICollectionViewScrollDirectionHorizontal;   //水平方向
self.sectionInset = UIEdgeInsetsMake(0, ScreenWidth/2 - ItemWidth/2, 0, ScreenWidth/2 - ItemWidth/2);   //設(shè)置組邊距
self.minimumLineSpacing = (ScreenWidth - ItemWidth)/4;

這里忘了提一個(gè)東西，我在這次加了一個(gè)pch（全局不需要自己導(dǎo)入的.h - -),當(dāng)然里面放太多的東西會(huì)影響效率，至于添加方法自行百度，也可以做個(gè).h自行導(dǎo)入，差不多

cell居中設(shè)置

現(xiàn)在我們的跑一下我們的代碼，當(dāng)你停止滑動(dòng)的時(shí)候，它會(huì)停在一個(gè)當(dāng)前的位置，但是這個(gè)位置可能是兩個(gè)卡片（cell）的中間，或者偏一點(diǎn)的地方，我們需要的是對(duì)卡片進(jìn)行操作，所以需要讓它居中。所以引入一個(gè)問題，如果只是不小心的觸碰到屏幕，稍稍的滑了一下，需要切換嗎？顯然是不需要的，把這個(gè)一下量化一下（設(shè)置為distance)以后，變成<distance的距離不需要切換，而>distance的距離就切換卡片。在這樣的思路確定以后，我們開始實(shí)現(xiàn)這個(gè)邏輯
代理也是繼承的，所以這樣的效果應(yīng)該在scrollView的代理里實(shí)現(xiàn)

//開始拖拽collectionView(scrollView的子類）
- (void)scrollViewWillBeginDragging:(UIScrollView *)scrollView
//停止拖拽collectionView
- (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate

在這兩個(gè)方法里面可以拿到起始的位置，和結(jié)束的位置，他們到底是怎么樣的，可以在里面打印輸出一下

//向左滑
2018-01-29 19:37:03.265 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 開始拖動(dòng)0.000000
2018-01-29 19:37:04.624 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 停止拖動(dòng)105.000000
2018-01-29 19:37:06.905 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 開始拖動(dòng)105.000000
2018-01-29 19:37:07.729 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 停止拖動(dòng)124.000000
2018-01-29 19:37:10.943 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 開始拖動(dòng)124.000000

//向右滑
2018-01-29 19:38:26.746 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 開始拖動(dòng)1449.000000
2018-01-29 19:38:28.164 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 停止拖動(dòng)1404.000000
2018-01-29 19:38:30.113 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 開始拖動(dòng)1404.000000
2018-01-29 19:38:30.547 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 停止拖動(dòng)1371.333333
2018-01-29 19:38:32.806 卡片轉(zhuǎn)場(chǎng)1[31481:1202165] 開始拖動(dòng)1371.333333

明白這樣的變化以后，我們聲明幾個(gè)類內(nèi)的變量

   CGFloat     _startDragX;        //開始移動(dòng)的位置
   CGFloat     _endDragX;          //停止移動(dòng)的位置
   CGFloat     _dragMiniDistance;  //最小移動(dòng)的臨界值
   NSInteger   _currentIndex;      //當(dāng)前切換到的卡片索引位置
   NSInteger   _maxIndex;          //最大的索引位置

//在開始拖動(dòng)的方法里獲取到 _startDragX
_startDragX = scrollView.contentOffset.x;
//在停止拖動(dòng)的方法里獲取到_endDragX
_endDragX = scrollView.contentOffset.x;
然后根據(jù)上面的邏輯進(jìn)行一系列的簡單運(yùn)算判斷：
CGFloat delta = _startDragX - _endDragX;

if (delta >= _dragMiniDistance) {
    //向右滑動(dòng)
    _currentIndex -= 1;  
 } else if (delta * -1 >= _dragMiniDistance) {
     //向左滑動(dòng)
     _currentIndex += 1;
 }
    
 _currentIndex = _currentIndex <= 0 ? 0 : _currentIndex;
 _currentIndex = _currentIndex >= _maxIndex ? _maxIndex : _currentIndex;

這樣我們就可以調(diào)用scrollToItemAtIndexPath: atScrollPosition這個(gè)方法實(shí)現(xiàn)滑動(dòng)了，但是這里要注意一點(diǎn)，就是所有tableView,collectionView這些數(shù)據(jù)源方法的特殊性，如果你同步執(zhí)行的話，他們的數(shù)據(jù)源方法可能還沒有在內(nèi)部算清，所以就會(huì)出Bug，所以對(duì)于這個(gè)方法，我們需要用主隊(duì)列異步去執(zhí)行，很多代碼里面就把類似上面的一堆運(yùn)算也扔在異步隊(duì)列里，其實(shí)不用，我們只是要把UI更新放進(jìn)去.

dispatch_async(dispatch_get_main_queue(), ^{
 [self.collectionView scrollToItemAtIndexPath:[NSIndexPath indexPathForRow:_currentIndex inSection:0]
 atScrollPosition:UICollectionViewScrollPositionCenteredHorizontally animated:YES];
 });

//順帶利用這個(gè)_currentIndex的索引，可以把背后的蒙版也換一下
self.BgView.image = [UIImage imageNamed:self.imageArray[_currentIndex].cardPicName];

調(diào)整布局屬性

現(xiàn)在有個(gè)問題需要我們考慮，就是每個(gè)卡片的大小都是一樣，看示例gif明顯當(dāng)前屏幕中間的大，兩邊的小。所以我們也要這樣做，調(diào)整cell的大小，在UICollectionView里面，他們的大小（還有透明度這些屬性）是歸于布局屬性負(fù)責(zé)的，所以我們要調(diào)整布局屬性，在哪里調(diào)整，當(dāng)然是代理方法了，一個(gè)UICollectionViewFlowLayout的父類代理UICollectionViewLayout里面有l(wèi)ayoutAttributesForElementsInRect:(CGRect)rect這樣一個(gè)方法，是這樣介紹的
//Implement -layoutAttributesForElementsInRect:
//to return layout attributes for for supplementary or decoration views, or to perform layout in an as-needed-on-screen fashion.
翻譯過來就是：返回 追加的 或者 裝飾視圖 布局屬性 或者去適應(yīng)屏幕上的布局。
還有一個(gè)這樣的方法：
-(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath
很明顯是對(duì)每個(gè)具體cell的布局進(jìn)行調(diào)整
這里我們的需求其實(shí)是對(duì)兩邊cell的大小進(jìn)行統(tǒng)一的調(diào)整，其實(shí)也不用具體到張三，李四cell這個(gè)具體的cell上，只要是在兩邊的就進(jìn)行縮放就好了，所以選擇第一個(gè)方法去實(shí)現(xiàn)

- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect
{
    //這樣就拿到了所有的布局屬性
    NSArray<UICollectionViewLayoutAttributes *> *arr = [super layoutAttributesForElementsInRect:rect].copy;
    
    return arr;
}

這里同樣有個(gè)問題需要說明，就是蘋果規(guī)定，我們不能直接去拿系統(tǒng)生成這些原有的布局屬性，對(duì)這些原有的布局進(jìn)行更改，直接更改會(huì)報(bào)錯(cuò)（我們不展開去解釋這個(gè)問題），所以我用了.copy，其實(shí)這樣用也不好，在你運(yùn)行的時(shí)候，還是會(huì)給你一堆警告

Logging only once for UICollectionViewFlowLayout cache mismatched frame
UICollectionViewFlowLayout has cached frame mismatch for index path <NSIndexPath: 0xc000000000000016> {length = 2, path = 0 - 0} - cached value: {{82.666666666666686, 163.66667320702987}, {248.39999999999998, 408.88887580816248}}; expected value: {{82.666666666666671, 163.66666666666666}, {248.39999999999998, 408.88888888888891}}
This is likely occurring because the flow layout subclass CardFlowLayout is modifying attributes returned by UICollectionViewFlowLayout without copying them

就是告訴你這樣不好，但是通常好像也不會(huì)出錯(cuò)，但是為了避免這樣，我們可以干脆做一個(gè)拷貝的方法

- (NSArray *)getCopyOfAttributes:(NSArray *)attributes {
    NSMutableArray *copyArr = [NSMutableArray new];
    for (UICollectionViewLayoutAttributes *attribute in attributes) {
        [copyArr addObject:[attribute copy]];
    }
    return copyArr;
}

這樣就ok了。
接著寫我們的代碼，這里單獨(dú)說一點(diǎn)collectionView的位置不是屏幕大小的位置，它是內(nèi)部展開的位置

    //獲取屏幕中線
    CGFloat centerX = self.collectionView.contentOffset.x + self.collectionView.bounds.size.width / 2.0;
    //拿到每個(gè)屬性
    for (UICollectionViewLayoutAttributes *attr in arr) {
       
        //布局屬性與中線的距離
        CGFloat distance = fabs(attr.center.x - centerX);
        //距離與屏幕寬的比例（為了計(jì)算縮放的比例）
        CGFloat disScale = distance / self.collectionView.bounds.size.width;
        //確定縮放的大小
        CGFloat scale = fabs(cos(disScale * M_PI / 4));
        
        //對(duì)布局屬性進(jìn)行縮放變換
        //如果想要3D傾斜的變化，也可以在這里指定為3D變化
        attr.transform = CGAffineTransformMakeScale(1.0, scale);
        
        //同時(shí)也利用這個(gè)比例對(duì)透明度進(jìn)行一下更改，顯得自然
        attr.alpha = scale;
    
    }

但是這樣運(yùn)行以后我們又發(fā)現(xiàn)一個(gè)問題，就是他們好像是一順縮小的，越來越小，一看我們的代碼，是啊，我們?cè)O(shè)置的就是把屬性縮小了，縮小的屬性的后面的屬性就變得更小了。所以我們要調(diào)整代碼，讓他們下次恢復(fù)之前的約束，然后再進(jìn)行變化，剛好有這樣一個(gè)方法：- (BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds
//判定為布局需要被無效化并重新計(jì)算的時(shí)候,布局對(duì)象會(huì)被詢問以提供新的布局
所以我們只需要在這里返回YES就好了。
這樣這篇文章就可以完了

3月-12-2018 17-00-40.gif

再下面就要對(duì)cell內(nèi)部進(jìn)行復(fù)雜操作了。。。