這兩個都是用UICollectionView實現(xiàn)的,搞定這兩個demo,就能掌握UICollectionView.
無限圖片輪播demo github地址 https://github.com/1271284056/Unlimited-images-player
瀑布流 demo github地址 https://github.com/1271284056/Waterfall-flow
效果圖如下
-
無限圖片輪播
無限輪播_.gif 瀑布流
實現(xiàn)圖片無限輪播的主要思路圖如下
如果你要展示3張圖片,實現(xiàn)無限循環(huán)滾動,你創(chuàng)建兩組6個collectionViewCell, 初始化時候滾動到第二組的第一個cell,實現(xiàn)這一點需要在UICollectionView初始化時候在主隊列添加滾動任務.
-
安排任務在主線程上執(zhí)行,如果主線程當前有任務，主隊列暫時不調度任務泌参！所以等cell的數(shù)據(jù)源和代理方法執(zhí)行完畢后才執(zhí)行這個block里面的滾動任務.一般我們開發(fā)中用到多線程有兩點:1. 無限循環(huán)圖片輪播器.2.異步裁剪圖片,見我的另一篇文章ImageView性能測試以及優(yōu)化
dispatch_async(dispatch_get_main_queue(), ^{ NSIndexPath *indexPath = [NSIndexPath indexPathForItem:_urls.count inSection:0]; // 滾動位置寞宫！ [self scrollToItemAtIndexPath:indexPath atScrollPosition:UICollectionViewScrollPositionLeft animated:NO]; }); 在- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {}scrollView這個代理方法里面判斷cell滾動的位置,如果滾動到最后一組最后一張,則讓整體滾動到第一組最后一張.如果滾動到第一組第一張,則滾動到最后一組第一張.
- (void)scrollViewDidEndDecelerating:(UIScrollView *)scrollView {
// 1. 獲取當前停止的頁面
NSInteger offset = scrollView.contentOffset.x / scrollView.bounds.size.width;
// 2. 第0頁怎抛，調轉到挤牛，第1組的第0頁
// 最后一頁硫眯，跳轉到第0組的最后一頁
if (offset == 0 || offset == ([self numberOfItemsInSection:0] - 1)) {
// NSLog(@"%zd", offset);
// 第 0 頁
if (offset == 0) {
offset = _urls.count;
} else {
offset = _urls.count - 1;
}
// 重新調整 contentOffset
scrollView.contentOffset = CGPointMake(offset * scrollView.bounds.size.width, 0);
}
}
系統(tǒng)調用滾動方法時候會卡頓,在numberOfItemsInSection里面進行如下代碼處理
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
//這里為了防止?jié)L動到最后一頁來回跳動導致的卡頓,多寫點組數(shù)讓一直到不了最后一組,因為cell重用,所以不影響內存.
return _urls.count * 100;
}
瀑布流具體實現(xiàn)如下
- 關鍵是自定義一個WaterFlowLayout : UICollectionViewLayout類,建一個代理,控制器首先初始化WaterFlowLayout,并且遵守代理,返回cell的寬高.修改cell的UICollectionViewLayoutAttributes屬性,使在布局時候每一個cell放到整體列高度最短那一列,這樣的cell不是按順序布局的.
import "WaterFlowLayout.h"
/** 默認列數(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;
/ 存放所有列的當前高度 /
@property (nonatomic, strong) NSMutableArray columnHeights;
/ 內容的高度 */
@property (nonatomic, assign) CGFloat contentHeight;
@end
@implementation WaterFlowLayout
/**
- 初始化
*/
- (void)prepareLayout {
[super prepareLayout];
self.contentHeight = 0;
//清除以前計算的所有高度
[self.columnHeights removeAllObjects];
//記錄每一列的高度 一共3列
for (NSInteger i = 0; i < DefaultColumnCount; i++) {
[self.columnHeights addObject:@(DefaultEdgeInsets.top)];
// NSLog(@"%f",self.edgeInsets.top);
}
//清除之前所有布局屬性
[self.attrsArray removeAllObjects];
//開始創(chuàng)建每一個cell對應發(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對應的布局屬性
UICollectionViewLayoutAttributes *attrs = [self layoutAttributesForItemAtIndexPath:indexPath];
[self.attrsArray addObject:attrs];
}
}
/**
- 決定cell的布局 prepareLayout后會調用一次,下面方法調用完畢修改cell屬性后會再一次調用這個方法
*/
- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect {
return self.attrsArray;
}
/**
- 返回每一個位置cell對應的布局屬性 修改 self.attrsArray里面cell的屬性,這個方法執(zhí)行后再調用上一個方法
*/
- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath {
//創(chuàng)建布局屬性
UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//collectionView的寬度
CGFloat collectionViewW = self.collectionView.frame.size.width;
//設置布局屬性的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;
//默認第一列最短
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));
//記錄內容的高度
CGFloat columnHeight = [self.columnHeights[destColumn] doubleValue];
if (self.contentHeight < columnHeight) {
self.contentHeight = columnHeight;
}
return attrs;
}
//整體的高度
- (CGSize)collectionViewContentSize {
return CGSizeMake(0, self.contentHeight + DefaultEdgeInsets.bottom);
}
