心靈雞湯可不是誰想喝就喝的! --------------棟哥
看完千篇一律的UI布局之后,當我們看到瀑布流的布局是不是覺得有種耳目一新的感覺呢?今天我們就說一下如果實現瀑布流,對于瀑布流,現在iOS中總共存在著三種實現方法.
1.實現瀑布流的布局,我們需要計算每一張圖片的尺寸大小,然后根據列數布局到我們的UIScrollView上去
2.UITableView實現瀑布流效果,就是每一列都是一個視圖.
3.UICollectionView實現瀑布流就是對UICollectionView的FlowLayout重寫.
UICollectionView 實現瀑布流
瀑布流的實現,現在大多數人都是使用集合視圖 UICollectionView 這個類做的,我們需要把集合視圖的布局進行重新定義.
對于UICollectionViewFlowLayout 這里有個封裝好的類,有需要的可以直接拿去使用了
WaterfallLayout.h文件中.
//
// WaterfallLayout.h
// Abe的瀑布流的封裝
//
// Created by dongge on 16/3/2.
// Copyright ? 2016年 Abe. All rights reserved.
//
#import <UIKit/UIKit.h>
@protocol WaterfallLayoutDelegate <NSObject>
// 獲取圖片高度
- (CGFloat)heightForItemIndexPath:(NSIndexPath *)indexPath;
@end
@interface WaterfallLayout : UICollectionViewFlowLayout
// item大小
@property (nonatomic,assign)CGSize itemSize;
// 內邊距
@property (nonatomic,assign)UIEdgeInsets sectionInsets;
// 間距
@property (nonatomic,assign)CGFloat insertItemSpacing;
// 列數
@property (nonatomic,assign)NSUInteger numberOfColumn;
// 代理（提供圖片高度）
@property (nonatomic,weak)id<WaterfallLayoutDelegate>delegate;
@end
WaterfallLayout.m中
//
// WaterfallLayout.m
// Abe的瀑布流的封裝
//
// Created by dongge on 16/3/2.
// Copyright ? 2016年 Abe. All rights reserved.
//
#import "WaterfallLayout.h"
@interface WaterfallLayout()
// 所有Item的數量
@property (nonatomic,assign)NSUInteger numberOfItems;
// 這是一個數組，保存每一列的高度
@property (nonatomic,strong)NSMutableArray *columnHeights;
// 這是一個數組，數組中保存的是一種類型，這種類型決定item的位置和大小。
@property (nonatomic,strong)NSMutableArray *itemAttributes;
// 獲取最長列索引
- (NSInteger)indexForLongestColumn;
// 獲取最短列索引
- (NSInteger)indexForShortestColumn;
@end
@implementation WaterfallLayout
- (NSMutableArray *)columnHeights{
if (nil == _columnHeights) {
self.columnHeights = [NSMutableArray array];
}
return _columnHeights;
}
-(NSMutableArray *)itemAttributes{
if (nil == _itemAttributes) {
self.itemAttributes = [NSMutableArray array];
}
return _itemAttributes;
}
// 獲取最長列索引
- (NSInteger)indexForLongestColumn{
// 記錄索引
NSInteger longestIndex = 0;
// 記錄當前最長列高度
CGFloat longestHeight = 0;
for (int i = 0; i < self.numberOfColumn; i++) {
// 取出列高度
CGFloat currentHeight = [self.columnHeights[i] floatValue];
// 判斷
if (currentHeight > longestHeight) {
longestHeight = currentHeight;
longestIndex = i;
}
}
return longestIndex;
}
// 獲取最短列索引
- (NSInteger)indexForShortestColumn{
// 記錄索引
NSInteger shortestIndex = 0;
// 記錄最短高度
CGFloat shortestHeight = MAXFLOAT;
for (int i = 0; i < self.numberOfColumn; i++) {
CGFloat currentHeight = [self.columnHeights[i] floatValue];
if (currentHeight < shortestHeight) {
shortestHeight = currentHeight;
shortestIndex = i;
}
}
return shortestIndex;
}
// 這里計算每一個item的x，y，w，h。并放入數組
-(void)prepareLayout{
[super prepareLayout];
// 循環添加top高度
for (int i = 0; i < self.numberOfColumn; i++) {
self.columnHeights[i] = @(self.sectionInsets.top);
}
// 獲取item數量
self.numberOfItems = [self.collectionView numberOfItemsInSection:0];
// 循環計算每一個item的x,y,width,height
for (int i = 0; i < self.numberOfItems; i++) {
// x,y
// 獲取最短列
NSInteger shortIndex = [self indexForShortestColumn];
// 獲取最短列高度
CGFloat shortestH = [self.columnHeights[shortIndex] floatValue];
// x
CGFloat detalX = self.sectionInsets.left + (self.itemSize.width + self.insertItemSpacing) * shortIndex;
// y
CGFloat detalY = shortestH + self.insertItemSpacing;
// h
NSIndexPath *indexPath = [NSIndexPath indexPathForItem:i inSection:0];
CGFloat itemHeight = 0;
if (self.delegate != nil && [self.delegate respondsToSelector:@selector(heightForItemIndexPath:)]){
itemHeight = [self.delegate heightForItemIndexPath:indexPath];
}
// 保存item frame屬性的對象
UICollectionViewLayoutAttributes *la = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
la.frame = CGRectMake(detalX, detalY, self.itemSize.width, itemHeight);
// 放入數組
[self.itemAttributes addObject:la];
// 更新高度
self.columnHeights[shortIndex] = @(detalY + itemHeight);
}
}
// 計算contentSize
- (CGSize)collectionViewContentSize{
// 獲取最高列
NSInteger longestIndex = [self indexForLongestColumn];
CGFloat longestH = [self.columnHeights[longestIndex] floatValue];
// 計算contentSize
CGSize contentSize = self.collectionView.frame.size;
contentSize.height = longestH + self.sectionInsets.bottom;
return contentSize;
}
// 返回所有item的位置和大小(數組)
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
return self.itemAttributes;
}
@end
接下來我們就在我們需要的地方調用我們已經封裝好的類和實現協議方法就可以了.這里我在ViewController.m中做了一下測試
//
// ViewController.m
// Abe的瀑布流的封裝
//
// Created by dongge on 16/3/2.
// Copyright ? 2016年 Abe. All rights reserved.
//
#import "ViewController.h"
#import "WaterFlowModel.h"
#import "WaterFlowCell.h"
#import "WaterfallLayout.h"
#import "UIImageView+WebCache.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,WaterfallLayoutDelegate>
@property(nonatomic,strong)NSMutableArray *dataArray;//創建可變數組,存儲json文件數據
@end
@implementation ViewController
-(NSMutableArray *)dataArray{
if (nil == _dataArray) {
_dataArray = [NSMutableArray array];
}
return _dataArray;
}
//解析json文件
-(void)parserJsonData {
NSString *filePath = [[NSBundle mainBundle] pathForResource:@"Data" ofType:@"json"];
NSData *jsonData = [NSData dataWithContentsOfFile:filePath];
NSMutableArray *arr = [NSMutableArray array ];
arr = [NSJSONSerialization JSONObjectWithData:jsonData options:(NSJSONReadingAllowFragments) error:nil];
for (NSDictionary *dic in arr) {
WaterFlowModel *model = [[WaterFlowModel alloc]init];
[model setValuesForKeysWithDictionary:dic];
[self.dataArray addObject: model];
}
}
//在viewDidLoad設置集合視圖的flowLayout,我們要做的就是新創建一個繼承于UICollectionViewLayout的類,在這個子類當中,做出瀑布流的布局.
- (void)viewDidLoad {
[super viewDidLoad];
// UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
self.view.backgroundColor = [UIColor whiteColor];
WaterfallLayout *flowLayout = [[WaterfallLayout alloc] init];
// 高度
flowLayout.delegate = self;
CGFloat w = ([UIScreen mainScreen].bounds.size.width - 40) / 3;
flowLayout.itemSize = CGSizeMake(w, w);
// 間隙
flowLayout.insertItemSpacing = 10;
// 內邊距
flowLayout.sectionInsets = UIEdgeInsetsMake(10, 10, 10, 10);
// 列數
flowLayout.numberOfColumn = 3;
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
collectionView.delegate = self;
collectionView.dataSource = self;
[self.view addSubview:collectionView];
[collectionView registerClass:[WaterFlowCell class] forCellWithReuseIdentifier:@"cell"];
collectionView.backgroundColor = [UIColor whiteColor];
[self parserJsonData];
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.dataArray.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
WaterFlowCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
WaterFlowModel *m = self.dataArray[indexPath.item];
[cell.imgView sd_setImageWithURL:[NSURL URLWithString:m.thumbURL]];
return cell;
}
// 計算高度
- (CGFloat)heightForItemIndexPath:(NSIndexPath *)indexPath{
WaterFlowModel *m = self.dataArray[indexPath.item];
CGFloat w = ([UIScreen mainScreen].bounds.size.width - 40) / 3;
CGFloat h = (w * m.height) / m.width;
return h;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
上面的WaterFlowCell 和 WaterFlowModel 就是測試用的,
總結:瀑布流的實現原理就是當我們需要往某一行添加上新的圖片的時候,我們就先判斷那一行的長度最短,然后就添加上去即可.
