溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在網上找了許久，一直沒有發現有提供橫向瀑布流效果的。在項目中用到了我就在垂直瀑布流的基礎上，進行了修改，做出了橫向瀑布流的效果。同時也對一些UICollectionView的屬性進行簡單的注釋，方便以后查閱。
1、首先要寫一個繼承與NSObject的布局類，記錄每一行（列）目前的寬度（高度）。再添加一個新的cell的時候進行判斷比較，添加到最短的那一行或一列上。
2、橫向的布局類入下，垂直的話就是講對應的X Y軸數據進行調整即可。
WaterfallFlowLayout為布局類，繼承與NSObject。.h文件入下
#import <UIKit/UIKit.h> // 類的前置聲明 @class WaterfallFlowLayout; @protocol WaterfallFlowLayoutDelegate <NSObject> // 動態獲取 item 寬度 - (CGFloat) WaterfallFlowLayout:(WaterfallFlowLayout *) layout widthForItemAtIndexPath:(NSIndexPath *) indexPath; @end @interface WaterfallFlowLayout : UICollectionViewLayout @property (nonatomic,assign) id <WaterfallFlowLayoutDelegate> delegate; @property (nonatomic) NSInteger numberOfColumns; @property (nonatomic) CGFloat minimumLineSpacing; @property (nonatomic) CGFloat minimumInteritemSpacing; @property (nonatomic) UIEdgeInsets sectionInset; @end
WaterfallFlowLayout為布局類，繼承與NSObject。.m文件入下
#import "WaterfallFlowLayout.h"
@interface WaterfallFlowLayout ()
{
// 用于記錄每一列布局到的寬度
NSMutableArray * _widthOfColumns;
// 用于保存所有item的屬性 (frame)
NSMutableArray * _itemsAttributes;
}
@end
@implementation WaterfallFlowLayout
- (void) setNumberOfColumns:(NSInteger)numberOfColumns {
if (_numberOfColumns != numberOfColumns) {
_numberOfColumns = numberOfColumns;
// 讓原有布局失效，需要重新布局
[self invalidateLayout];
}
}
- (void)setMinimumLineSpacing:(CGFloat)minimumLineSpacing {
if (_minimumLineSpacing != minimumLineSpacing) {
_minimumLineSpacing = minimumLineSpacing;
[self invalidateLayout];
}
}
- (void)setMinimumInteritemSpacing:(CGFloat)minimumInteritemSpacing {
if (_minimumInteritemSpacing != minimumInteritemSpacing) {
_minimumInteritemSpacing = minimumInteritemSpacing;
[self invalidateLayout];
}
}
- (void)setSectionInset:(UIEdgeInsets)sectionInset {
if (!UIEdgeInsetsEqualToEdgeInsets(_sectionInset, sectionInset)) {
_sectionInset = sectionInset;
[self invalidateLayout];
}
}
//重寫方法 1: 準備布局
-(void)prepareLayout {
[super prepareLayout];
// 真正的布局在這里完成
if (_itemsAttributes) {
[_itemsAttributes removeAllObjects];
}else {
_itemsAttributes = [[NSMutableArray alloc] init];
}
if (_widthOfColumns) {
[_widthOfColumns removeAllObjects];
}else {
_widthOfColumns = [[NSMutableArray alloc] init];
}
for (NSInteger i = 0; i < self.numberOfColumns; i++) {
// 初始化每一列的寬度(默認為上邊距)
// _heightOfColumns[i] = @(self.sectionInset.top);
[_widthOfColumns addObject:@(self.sectionInset.left)];
}
// item的總數
NSInteger count = [self.collectionView numberOfItemsInSection:0];
// CGFloat itemWidth = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (_numberOfColumns-1) * _minimumInteritemSpacing )/_numberOfColumns;
// 總的高度 (集合視圖的寬度)
CGFloat totalHeight = self.collectionView.frame.size.height;
// 有效的高度 (出去間隔及邊界)
CGFloat validHeight = totalHeight - self.sectionInset.top - self.self.sectionInset.bottom - (self.numberOfColumns-1) * self.minimumInteritemSpacing;
// 每一個item的高度
CGFloat itemHeight = validHeight/self.numberOfColumns;
// 設置item的默認寬度
CGFloat itemWidth = itemHeight;
for (NSInteger i = 0; i<count; i++) {
// 最短列的下標
NSInteger index = [self indexOfShortestColumn];
CGFloat originY = self.sectionInset.top + index * (itemHeight +self.minimumInteritemSpacing);
CGFloat originX = [_widthOfColumns[index] floatValue];
// 構造 indexPath
NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0];
// 動態的獲取寬度
if ([self.delegate respondsToSelector:@selector(WaterfallFlowLayout:widthForItemAtIndexPath:)]) {
itemWidth = [self.delegate WaterfallFlowLayout:self widthForItemAtIndexPath:indexPath];
}
UICollectionViewLayoutAttributes * attr = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
attr.frame = CGRectMake(originX, originY, itemWidth, itemHeight);
// 保存 item 的屬性 到數組中
[_itemsAttributes addObject:attr];
// 更新布局到的一列(最短列) 的高度
_widthOfColumns[index] = @(originX + itemWidth + self.minimumLineSpacing);
}
// 刷新顯示
[self.collectionView reloadData];
}
//重寫方法 2: 返回指定區域的item的屬性(frame)
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect {
NSMutableArray * array = [NSMutableArray array];
for (UICollectionViewLayoutAttributes * attr in _itemsAttributes) {
// 判斷兩個矩形是否有交集
if (CGRectIntersectsRect(attr.frame, rect)) {
[array addObject:attr];
}
}
return array;
}
//重寫方法 3: 返回內容的尺寸
-(CGSize)collectionViewContentSize {
CGFloat height = self.collectionView.frame.size.height;
NSInteger index = [self indexOfLongestColumn];
CGFloat width = [_widthOfColumns[index] floatValue] + self.sectionInset.right - self.minimumLineSpacing;
return CGSizeMake(width, height);
}
- (NSInteger) indexOfLongestColumn {
NSInteger index = 0;
for (NSInteger i = 0; i<_numberOfColumns; i++) {
if ([_widthOfColumns[i] floatValue] > [_widthOfColumns[index] floatValue]) {
index = i;
}
}
return index;
}
- (NSInteger) indexOfShortestColumn {
NSInteger index = 0;
for (NSInteger i = 0; i<_numberOfColumns; i++) {
if ([_widthOfColumns[i] floatValue] < [_widthOfColumns[index] floatValue]) {
index = i;
}
}
return index;
}
@end
3、上邊的這個布局類可以直接復制粘貼下來。然后就是創建你的UICollectionView
在collectionView的cell中可以直接創建imageView或者是label添加到cell上，用來顯示數據。
collectionView默認section縮進左右是0
調節橫向cell間距
layout.minimumLineSpacing = 10;
調節縱向cell間距
layout.minimumInteritemSpacing = 20;
調節瀑布流顯示的行數，當然了你的collectionView的高（寬）足夠顯示幾行（列）就會自動顯示多上行（列）；
layout.numberOfColumns = 3;
#import "RootViewController.h"
#import "WaterfallFlowLayout.h"
@interface RootViewController () <UICollectionViewDataSource,UICollectionViewDelegateFlowLayout,WaterfallFlowLayoutDelegate>
{
UICollectionView * _collectionView;
}
@end
@implementation RootViewController
- (void)dealloc {
[_collectionView release];
[super dealloc];
}
- (void)viewDidLoad {
[super viewDidLoad];
// 創建集合視圖
[self createCollectionView];
}
- (UICollectionViewLayout *)createLayout {
#if 1
WaterfallFlowLayout * layout = [[WaterfallFlowLayout alloc] init];
layout.sectionInset = UIEdgeInsetsMake(20, 20, 20, 20);
layout.minimumLineSpacing = 10;
layout.minimumInteritemSpacing = 20;
layout.numberOfColumns = 3;
layout.delegate = self;
[self performSelector:@selector(changeLayout:) withObject:layout afterDelay:3];
#else
UICollectionViewFlowLayout * layout = [[UICollectionViewFlowLayout alloc] init];
layout.minimumLineSpacing = 10;
layout.itemSize = CGSizeMake(150, 100);
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
#endif
return [layout autorelease];
}
- (void)changeLayout:(WaterfallFlowLayout *)layout {
layout.numberOfColumns = 3;
}
- (void)createCollectionView {
CGRect frame = CGRectMake(0, 20, VIEW_WIDTH, VIEW_HEIGHT-20);
_collectionView = [[UICollectionView alloc] initWithFrame:frame collectionViewLayout:[self createLayout]];
_collectionView.backgroundColor = [UIColor cyanColor];
// 設置代理
_collectionView.delegate = self;
_collectionView.dataSource = self;
// 注冊cell 類型 及 復用標識
[_collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cellId"];
[self.view addSubview:_collectionView];
}
#pragma mark - UICollectionViewDataSource
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 102;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cellId" forIndexPath:indexPath];
UILabel * label = nil;
NSArray * array = cell.contentView.subviews;
if (array.count) {
label = array[0];
}else {
label = [[UILabel alloc] init];
// label.frame = cell.bounds;
label.textAlignment = NSTextAlignmentCenter;
label.font = [UIFont systemFontOfSize:50];
[cell.contentView addSubview:label];
[label release];
}
label.frame = cell.bounds;
label.text = [NSString stringWithFormat:@"%ld",indexPath.item];
label.textColor = [UIColor whiteColor];
cell.backgroundColor = RandomColor;
return cell;
}
- (CGSize) collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {
return CGSizeMake( arc4random()%100+200, 110);
}
-(CGFloat) WaterfallFlowLayout:(WaterfallFlowLayout *)layout widthForItemAtIndexPath:(NSIndexPath *)indexPath{
return arc4random()%150+50;
}
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"點擊了第 %ld 組，第 %ld 行",indexPath.section,indexPath.row);
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
}
@end
實現的效果如下
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
