本人小白,歡迎各位大佬補(bǔ)充指點(diǎn)
自定義布局-瀑布流
實(shí)現(xiàn)瀑布流常見(jiàn)的3中方案:
1.view上面添加一個(gè)scrollView,接著在添加3列tableView,分別禁止tableView的滾動(dòng)
2.view上面添加一個(gè)scrollView,在一個(gè)一個(gè)往scrollView上面添加
3.用UIConllectionView
分析可得:瀑布流總是找最短的那個(gè)添加,因此不是流水布局,那么自定義布局就要繼承自根布局
控制器代碼如下:
#import "ZHWaterLayout.h"
#import "ViewController3.h"
#import "ZHShopViewCell.h"
#import "MJRefresh.h"
#import "ZHShop.h"
#import "MJExtension.h"
@interface ViewController3 ()<UICollectionViewDataSource,ZHWaterLayoutDelegate>
@property (nonatomic,strong) NSMutableArray *dataArray;
@property (nonatomic,weak) UICollectionView *collectionView;
@end
static NSString * const cellID = @"shopcell";
@implementation ViewController3
-(NSMutableArray *)dataArray{
if (_dataArray == nil) {
_dataArray = [NSMutableArray array];
}
return _dataArray ;
}
- (void)viewDidLoad {
[super viewDidLoad];
[self setupLayout];
[self setupRefresh];
}
-(void)setupRefresh{
self.collectionView.header = [MJRefreshNormalHeader headerWithRefreshingTarget:self refreshingAction:@selector(newData)];
[self.collectionView.header beginRefreshing];
self.collectionView.footer = [MJRefreshAutoNormalFooter footerWithRefreshingTarget:self refreshingAction:@selector(moreData)];
self.collectionView.footer.hidden = YES;
}
-(void)newData{
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
NSArray *aray = [ZHShop objectArrayWithFilename:@"112.plist"];
[self.dataArray removeAllObjects];
[self.dataArray addObjectsFromArray:aray];
[self.collectionView reloadData];
[self.collectionView.header endRefreshing];
});
}
-(void)moreData{
dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(1.0 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
NSArray *aray = [ZHShop objectArrayWithFilename:@"112.plist"];
[self.dataArray addObjectsFromArray:aray];
[self.collectionView reloadData];
[self.collectionView.footer endRefreshing];
});
}
-(void)setupLayout{
ZHWaterLayout *layout = [[ZHWaterLayout alloc] init];
layout.delegate = self;
UICollectionView *collection = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
//只能注冊(cè)
[collection registerNib:[UINib nibWithNibName:@"ZHShopViewCell" bundle:nil] forCellWithReuseIdentifier:cellID];
collection.backgroundColor = [UIColor whiteColor];
collection.dataSource = self;
self.collectionView = collection;
[self.view addSubview:collection];
}
#pragma mark - UICollectionViewDataSource
//必須實(shí)現(xiàn)@required:
//每個(gè)section里面有多少個(gè)item
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
self.collectionView.footer.hidden = self.dataArray.count == 0;
return self.dataArray.count;
}
//每個(gè)cell
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
ZHShopViewCell *item = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
item.shop = self.dataArray[indexPath.item];
return item;
}
#pragma mark - ZHWaterLayoutDelegate
-(CGFloat)waterLayout:(ZHWaterLayout *)waterLayout heightForItemAtIndex:(NSInteger )index andItemWidth:(CGFloat)itemWidth{
ZHShop *shop = self.dataArray[index];
return itemWidth * shop.h/shop.w;
}
-(NSInteger)columCountWaterLayout:(ZHWaterLayout *)waterLayout{
return 4;
}
-(CGFloat)columMarginWaterLayout:(ZHWaterLayout *)waterLayout{
return 10;
}
-(CGFloat)rowMarginWaterLayout:(ZHWaterLayout *)waterLayout{
return 10;
}
-(UIEdgeInsets)edgeInsetsWaterLayout:(ZHWaterLayout *)waterLayout{
return UIEdgeInsetsMake(10, 10, 10, 10);
}
@end
自定義xib的cell代碼如下:
#import <UIKit/UIKit.h>
@class ZHShop;
@interface ZHShopViewCell : UICollectionViewCell
@property (nonatomic, strong) ZHShop *shop;
@end
#import "ZHShopViewCell.h"
#import "ZHShop.h"
#import "UIImageView+WebCache.h"
@interface ZHShopViewCell()
@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet UILabel *priceLabel;
@end
@implementation ZHShopViewCell
- (void)setShop:(ZHShop *)shop
{
_shop = shop;
// 1.圖片
[self.imageView sd_setImageWithURL:[NSURL URLWithString:shop.img] placeholderImage:[UIImage imageNamed:@"loading"]];
// 2.價(jià)格
self.priceLabel.text = shop.price;
}
@end
模型ZHShop如下:
#import <UIKit/UIKit.h>
@interface ZHShop : NSObject
@property (nonatomic, assign) CGFloat w;
@property (nonatomic, assign) CGFloat h;
@property (nonatomic, copy) NSString *img;
@property (nonatomic, copy) NSString *price;
@end
自定義布局ZHWaterLayout如下:
#import <UIKit/UIKit.h>
@class ZHWaterLayout;
//自定義協(xié)議
@protocol ZHWaterLayoutDelegate<NSObject>
@required
/**
返回item的高度
*/
-(CGFloat)waterLayout:(ZHWaterLayout *)waterLayout heightForItemAtIndex:(NSInteger )index andItemWidth:(CGFloat)itemWidth;
@optional
/**
有多少列
*/
-(NSInteger)columCountWaterLayout:(ZHWaterLayout *)waterLayout;
/**
列邊距
*/
-(CGFloat)columMarginWaterLayout:(ZHWaterLayout *)waterLayout;
/**
行間距
*/
-(CGFloat)rowMarginWaterLayout:(ZHWaterLayout *)waterLayout;
/**
內(nèi)邊距
*/
-(UIEdgeInsets )edgeInsetsWaterLayout:(ZHWaterLayout *)waterLayout;
@end
@interface ZHWaterLayout : UICollectionViewLayout
@property (nonatomic,weak) id<ZHWaterLayoutDelegate> delegate;
@end
#import "ZHWaterLayout.h"
@interface ZHWaterLayout()
@property (nonatomic,strong) NSMutableArray *attriArray;
//用來(lái)存放所有列的高度
@property (nonatomic,strong) NSMutableArray *colsHeght;
//注意get方法要想提示寫(xiě)出,必須在這里先聲明!!!!
-(CGFloat)rowMargin;
-(CGFloat)columMargin;
-(NSInteger)columCount;
-(UIEdgeInsets)edgeInsets;
@end
//默認(rèn)值
static const CGFloat rowMargin = 10;//行距
static const CGFloat colMargin = 10;//列距
static const NSInteger col = 3;//默認(rèn)列數(shù)
static const UIEdgeInsets edgeInsets = {10,10,10,10};//內(nèi)邊距
@implementation ZHWaterLayout
//數(shù)據(jù)處理get方法
-(CGFloat)rowMargin{
if ([self.delegate respondsToSelector:@selector(rowMarginWaterLayout:)]) {
return [self.delegate rowMarginWaterLayout:self];
}else{
return rowMargin;
}
}
-(CGFloat)columMargin{
if ([self.delegate respondsToSelector:@selector(columMarginWaterLayout:)]) {
return [self.delegate columMarginWaterLayout:self];
}else{
return colMargin;
}
}
-(NSInteger)columCount{
if ([self.delegate respondsToSelector:@selector(columCountWaterLayout:)]) {
return [self.delegate columCountWaterLayout:self];
}else{
return col;
}
}
-(UIEdgeInsets)edgeInsets{
if ([self.delegate respondsToSelector:@selector(edgeInsetsWaterLayout:)]) {
return [self.delegate edgeInsetsWaterLayout:self];
}else{
return edgeInsets;
}
}
//記錄各列的高度
-(NSMutableArray *)colsHeght{
if (_colsHeght == nil) {
_colsHeght = [NSMutableArray array];
}
return _colsHeght ;
}
//存儲(chǔ)所有cell的UICollectionViewLayoutAttributes
-(NSMutableArray *)attriArray{
if (_attriArray == nil) {
_attriArray = [NSMutableArray array];
}
return _attriArray ;
}
//初始化操作
-(void)prepareLayout{
[super prepareLayout];
//1.每次刷新就回重新布局一次,重新清理一下數(shù)據(jù)
//1.1清除高度數(shù)組并初始化
[self.colsHeght removeAllObjects];
//初始化數(shù)組
for (int i= 0; i<self.columCount; i++) {
[self.colsHeght addObject:@(self.edgeInsets.top)];
}
//1.2清除布局屬性數(shù)據(jù)
[self.attriArray removeAllObjects];
//2.計(jì)算出所有cell的UICollectionViewLayoutAttributes
//共多少個(gè)item
NSInteger rowcount = [self.collectionView numberOfItemsInSection:0];
//遍歷計(jì)算出每一個(gè)
for (int i = 0 ; i<rowcount; i++) {
//創(chuàng)建UICollectionViewLayoutAttributes
NSIndexPath *indexpath = [NSIndexPath indexPathForItem:i inSection:0];
UICollectionViewLayoutAttributes *attri = [self layoutAttributesForItemAtIndexPath:indexpath];
//添加UICollectionViewLayoutAttributes到數(shù)組中
[self.attriArray addObject:attri];
}
}
//返回rect內(nèi)的所有cell的UICollectionViewLayoutAttributes數(shù)組
-(NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
return self.attriArray;
}
//返回每一個(gè)cell的UICollectionViewLayoutAttributes
-(UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{
//1.創(chuàng)建UICollectionViewLayoutAttributes對(duì)象
UICollectionViewLayoutAttributes *attri = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];
//2.設(shè)置UICollectionViewLayoutAttributes的frame屬性
CGFloat collectW = self.collectionView.frame.size.width;
//2.1計(jì)算出寬度
CGFloat width = (collectW-self.edgeInsets.left-self.edgeInsets.right-(self.columCount-1)*self.columMargin)/self.columCount;
//2.2根據(jù)外部模型數(shù)據(jù)傳進(jìn)來(lái)的高度計(jì)算出高度
CGFloat height = [self.delegate waterLayout:self heightForItemAtIndex:indexPath.item andItemWidth:width];
//2.3 計(jì)算出x
//找出高度最短的那一列
// __block NSUInteger desCol = 0;
// __block CGFloat minColHeight = MAXFLOAT;
// [self.colsHeght enumerateObjectsUsingBlock:^(NSNumber * _Nonnull colHeight, NSUInteger idx, BOOL * _Nonnull stop) {
// if (colHeight.doubleValue < minColHeight) {
// minColHeight = colHeight.doubleValue;
// desCol = idx;
// }
// }];
//這樣遍歷可以少算一列
NSInteger desCol = 0;
CGFloat minColHeight = [self.colsHeght[0] doubleValue];
for (NSInteger i = 1; i<self.columCount; i++) {
//獲取第一列的高度
CGFloat colH = [self.colsHeght[i] doubleValue];
if (colH<minColHeight) {
minColHeight = colH;
desCol = i;
}
}
CGFloat x = self.edgeInsets.left + desCol*(width + self.columMargin);
//2.4計(jì)算出y值
CGFloat y = minColHeight;//第一行時(shí)不加rowmargin
if (y != self.edgeInsets.top) {
y += self.rowMargin;
}
//3.賦值frame
attri.frame = CGRectMake(x,y, width, height);
//4.更新高度數(shù)組
self.colsHeght[desCol] =@(CGRectGetMaxY(attri.frame)) ;
return attri;
}
//返回collectionView的contentsize
-(CGSize)collectionViewContentSize{
CGFloat maxColHeight = [self.colsHeght[0] doubleValue];
for (NSInteger i = 1; i<self.columCount
; i++) {
//獲取第一列的高度
CGFloat colH = [self.colsHeght[i] doubleValue];
if (colH>maxColHeight) {
maxColHeight = colH;
}
}
return CGSizeMake(0, maxColHeight+self.edgeInsets.bottom);
}
@end
效果圖如下:
2.gif
