這兩個(gè)都是用UICollectionView實(shí)現(xiàn)的,搞定這兩個(gè)demo,就能掌握UICollectionView.

無(wú)限圖片輪播demo github地址 https://github.com/1271284056/Unlimited-images-player

瀑布流 demo github地址 https://github.com/1271284056/Waterfall-flow

效果圖如下

• 無(wú)限圖片輪播

  
  
  無(wú)限輪播_.gif

• 瀑布流

瀑布流.gif

實(shí)現(xiàn)圖片無(wú)限輪播的主要思路圖如下

屏幕快照 2016-10-25 10.17.36.png

• 如果你要展示3張圖片,實(shí)現(xiàn)無(wú)限循環(huán)滾動(dòng),你創(chuàng)建兩組6個(gè)collectionViewCell, 初始化時(shí)候滾動(dòng)到第二組的第一個(gè)cell,實(shí)現(xiàn)這一點(diǎn)需要在UICollectionView初始化時(shí)候在主隊(duì)列添加滾動(dòng)任務(wù).

• 安排任務(wù)在主線程上執(zhí)行,如果主線程當(dāng)前有任務(wù)，主隊(duì)列暫時(shí)不調(diào)度任務(wù)！所以等cell的數(shù)據(jù)源和代理方法執(zhí)行完畢后才執(zhí)行這個(gè)block里面的滾動(dòng)任務(wù).一般我們開(kāi)發(fā)中用到多線程有兩點(diǎn):1. 無(wú)限循環(huán)圖片輪播器.2.異步裁剪圖片,見(jiàn)我的另一篇文章ImageView性能測(cè)試以及優(yōu)化

   dispatch_async(dispatch_get_main_queue(), ^{
       
       NSIndexPath *indexPath = [NSIndexPath indexPathForItem:_urls.count inSection:0];
       
       // 滾動(dòng)位置！
       [self scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO];
   });
  

• 在- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {}scrollView這個(gè)代理方法里面判斷cell滾動(dòng)的位置,如果滾動(dòng)到最后一組最后一張,則讓整體滾動(dòng)到第一組最后一張.如果滾動(dòng)到第一組第一張,則滾動(dòng)到最后一組第一張.

• (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
  // 1. 獲取當(dāng)前停止的頁(yè)面
  NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width;
  // 2. 第0頁(yè)，調(diào)轉(zhuǎn)到，第1組的第0頁(yè)
  // 最后一頁(yè)，跳轉(zhuǎn)到第0組的最后一頁(yè)
  if (offset == 0 || offset == ([self numberOfItemsInSection:0] - 1)) {
  // NSLog(@"%zd", offset);
  // 第 0 頁(yè)
  if (offset == 0) {
  offset = _urls.count;
  } else {
  offset = _urls.count - 1;
  }
  // 重新調(diào)整 contentOffset
  scrollView.contentOffset = CGPointMake(offset * scrollView.bounds.size.width, 0);
  }
  }

系統(tǒng)調(diào)用滾動(dòng)方法時(shí)候會(huì)卡頓,在numberOfItemsInSection里面進(jìn)行如下代碼處理

• (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
  //這里為了防止?jié)L動(dòng)到最后一頁(yè)來(lái)回跳動(dòng)導(dǎo)致的卡頓,多寫(xiě)點(diǎn)組數(shù)讓一直到不了最后一組,因?yàn)閏ell重用,所以不影響內(nèi)存.
  return _urls.count * 100;
  }

瀑布流具體實(shí)現(xiàn)如下

• 關(guān)鍵是自定義一個(gè)WaterFlowLayout : UICollectionViewLayout類(lèi),建一個(gè)代理,控制器首先初始化WaterFlowLayout,并且遵守代理,返回cell的寬高.修改cell的UICollectionViewLayoutAttributes屬性,使在布局時(shí)候每一個(gè)cell放到整體列高度最短那一列,這樣的cell不是按順序布局的.

import "WaterFlowLayout.h"
/** 默認(rèn)列數(shù) /
static const NSInteger DefaultColumnCount = 3;
/* 每一列之間的間距 /
static const NSInteger DefaultColumnMargin = 10;
/* 每一行之間的間距 /
static const NSInteger DefaultRowMargin = 10;
/* 邊緣間距 */
static const UIEdgeInsets DefaultEdgeInsets = {0, 0, 0, 0};

@interface WaterFlowLayout ()
/** 存放所有cell的布局屬性 /
@property (nonatomic, strong) NSMutableArray attrsArray;
/ 存放所有列的當(dāng)前高度 /
@property (nonatomic, strong) NSMutableArray columnHeights;
/ 內(nèi)容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;
@end

@implementation WaterFlowLayout
/**

• 初始化
  */

• (void)prepareLayout {
  [super prepareLayout];
  self.contentHeight = 0;
  //清除以前計(jì)算的所有高度
  [self.columnHeights removeAllObjects];
  //記錄每一列的高度 一共3列
  for (NSInteger i = 0; i < DefaultColumnCount; i++) {
  [self.columnHeights addObject:@(DefaultEdgeInsets.top)];
  // NSLog(@"%f",self.edgeInsets.top);
  }
  //清除之前所有布局屬性
  [self.attrsArray removeAllObjects];
  //開(kāi)始創(chuàng)建每一個(gè)cell對(duì)應(yīng)發(fā)布局屬性
  NSInteger count = [self.collectionView numberOfItemsInSection:0];
  for (NSInteger i = 0; i < count; i++) {
  //創(chuàng)建位置
  NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
  //獲取indexPath位置cell對(duì)應(yīng)的布局屬性
  UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
  [self.attrsArray addObject:attrs];
  }
  }

/**

• 決定cell的布局 prepareLayout后會(huì)調(diào)用一次,下面方法調(diào)用完畢修改cell屬性后會(huì)再一次調(diào)用這個(gè)方法
  */

• (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
  return self.attrsArray;
  }

/**

• 返回每一個(gè)位置cell對(duì)應(yīng)的布局屬性 修改 self.attrsArray里面cell的屬性,這個(gè)方法執(zhí)行后再調(diào)用上一個(gè)方法
  */

• (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
  //創(chuàng)建布局屬性
  UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
  //collectionView的寬度
  CGFloat collectionViewW = self.collectionView.frame.size.width;
  //設(shè)置布局屬性的frame
  CGFloat w = (collectionViewW - DefaultEdgeInsets.left - DefaultEdgeInsets.right - (DefaultColumnCount - 1) * DefaultRowMargin) / DefaultColumnCount;
  CGFloat h = [self.delegate waterflowlayout:self heightForItemAtIndex:indexPath.item itemWidth:w];

pragma 核心代碼

//找出高度最短的那一列
NSInteger destColumn = 0;
//默認(rèn)第一列最短
CGFloat minColumnHeight = [self.columnHeights[0] doubleValue];
for (NSInteger i = 0; i < DefaultColumnCount; i++) {
    //取得第i列的高度
    CGFloat columnHeight = [self.columnHeights[i] doubleValue];
    //minColumnHeight是最短那一列的高度,destColumn最短那一列
    if (minColumnHeight > columnHeight) {
        minColumnHeight = columnHeight;
        destColumn = i;
    }
}
CGFloat x = DefaultEdgeInsets.left + destColumn * (w + DefaultColumnMargin);
CGFloat y = minColumnHeight;
if (y != DefaultEdgeInsets.top) {
    y += DefaultRowMargin;
}
attrs.frame = CGRectMake(x, y, w, h);
//更新最短那列的高度
self.columnHeights[destColumn] = @(CGRectGetMaxY(attrs.frame));
//記錄內(nèi)容的高度
CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
if (self.contentHeight < columnHeight) {
    self.contentHeight = columnHeight;
}
return attrs;

}

//整體的高度

• (CGSize)collectionViewContentSize {
  return CGSizeMake(0, self.contentHeight + DefaultEdgeInsets.bottom);
  }