在網(wǎng)上找了許久,一直沒有發(fā)現(xiàn)有提供橫向瀑布流效果的。在項目中用到了我就在垂直瀑布流的基礎(chǔ)上,進行了修改,做出了橫向瀑布流的效果。同時也對一些UICollectionView的屬性進行簡單的注釋,方便以后查閱。
成都創(chuàng)新互聯(lián)是專業(yè)的定州網(wǎng)站建設(shè)公司,定州接單;提供做網(wǎng)站、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行定州網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!
1、首先要寫一個繼承與NSObject的布局類,記錄每一行(列)目前的寬度(高度)。再添加一個新的cell的時候進行判斷比較,添加到最短的那一行或一列上。
2、橫向的布局類入下,垂直的話就是講對應(yīng)的X Y軸數(shù)據(jù)進行調(diào)整即可。
WaterfallFlowLayout為布局類,繼承與NSObject。.h文件入下
#import <UIKit/UIKit.h> // 類的前置聲明 @class WaterfallFlowLayout; @protocol WaterfallFlowLayoutDelegate <NSObject> // 動態(tài)獲取 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: 準(zhǔn)備布局 -(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的總數(shù) 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; // 設(shè)置item的默認寬度 CGFloat itemWidth = itemHeight; for (NSInteger i = 0; i<count; i++) { // 最短列的下標(biāo) NSInteger index = [self indexOfShortestColumn]; CGFloat originY = self.sectionInset.top + index * (itemHeight +self.minimumInteritemSpacing); CGFloat originX = [_widthOfColumns[index] floatValue]; // 構(gòu)造 indexPath NSIndexPath * indexPath = [NSIndexPath indexPathForItem:i inSection:0]; // 動態(tài)的獲取寬度 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 的屬性 到數(shù)組中 [_itemsAttributes addObject:attr]; // 更新布局到的一列(最短列) 的高度 _widthOfColumns[index] = @(originX + itemWidth + self.minimumLineSpacing); } // 刷新顯示 [self.collectionView reloadData]; } //重寫方法 2: 返回指定區(qū)域的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: 返回內(nèi)容的尺寸 -(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、上邊的這個布局類可以直接復(fù)制粘貼下來。然后就是創(chuàng)建你的UICollectionView
在collectionView的cell中可以直接創(chuàng)建imageView或者是label添加到cell上,用來顯示數(shù)據(jù)。
collectionView默認section縮進左右是0
調(diào)節(jié)橫向cell間距
layout.minimumLineSpacing = 10;
調(diào)節(jié)縱向cell間距
layout.minimumInteritemSpacing = 20;
調(diào)節(jié)瀑布流顯示的行數(shù),當(dāng)然了你的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]; // 創(chuàng)建集合視圖 [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]; // 設(shè)置代理 _collectionView.delegate = self; _collectionView.dataSource = self; // 注冊cell 類型 及 復(fù)用標(biāo)識 [_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
實現(xiàn)的效果如下
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
名稱欄目:ios基于UICollectionView實現(xiàn)橫向瀑布流
本文路徑:http://jinyejixie.com/article0/ijcdoo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站內(nèi)鏈、ChatGPT、用戶體驗、商城網(wǎng)站、響應(yīng)式網(wǎng)站、Google
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)