(iOS)简单的瀑布流布局

来源:互联网 发布:无锡软件开发公司 编辑:程序博客网 时间:2024/05/17 04:19
MyLayout.h文件中#import <UIKit/UIKit.h>@class MyLayout;@protocol MyLayoutDelegate <NSObject>- (CGFloat)flowLayout:(MyLayout *)flowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath;@end@interface MyLayout : UICollectionViewLayout/** 列间距 */@property(assign)CGFloat columnMargin;/** 行间距 */@property(assign)CGFloat rowMargin;/** 列数 */@property(assign)int columnsCount;/** 外边距 */@property (assign) UIEdgeInsets sectionInset;@property (retain) id<MyLayoutDelegate> delegate;MyLayout.m文件中#import "MyLayout.h"@interface MyLayout ()/** 这个字典用来存储每一列最大的Y值(每一列的高度) */@property (nonatomic, strong) NSMutableDictionary *maxYDict;/** 存放所有的布局属性 */@property(nonatomic,strong)NSMutableArray *attributeArray;@end@implementation MyLayout//懒加载-(NSMutableDictionary*)maxYDict{    if (_maxYDict==nil) {        _maxYDict=[[NSMutableDictionary alloc]init];    }    return _maxYDict;}-(NSMutableArray *)attributeArray{    if (_attributeArray==nil) {        _attributeArray=[[NSMutableArray alloc]init];    }    return _attributeArray;}//初始化默认值-(id)init{    self=[super init];    if (self) {        self.columnMargin=15;        self.rowMargin=10;        self.columnsCount=2;        self.sectionInset=UIEdgeInsetsMake(0, 0, 0, 0);    }    return self;}//返回YES使集合视图重新查询几何信息的布局-(BOOL)shouldInvalidateLayoutForBoundsChange:(CGRect)newBounds{    return YES;}// 布局每一个indexPath的位置-(UICollectionViewLayoutAttributes*)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath{    // 1.计算尺寸    CGFloat width = (self.collectionView.frame.size.width - self.sectionInset.left - self.sectionInset.right - (self.columnsCount - 1) * self.columnMargin) / self.columnsCount;    // 代理计算传入高的值    CGFloat height = [self.delegate flowLayout:self heightForWidth:width atIndexPath:indexPath];    // 2.0假设最短的那一列的第0列    __block NSString *minColumn = @"0";    // 遍历字典找出最短的那一列    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {        if ([maxY floatValue] < [self.maxYDict[minColumn] floatValue]) {            minColumn = column;        }    }];    // 2.1计算位置    CGFloat x = self.sectionInset.left + (self.columnMargin + width) * [minColumn intValue];    CGFloat y = [self.maxYDict[minColumn] floatValue]+ _rowMargin;    self.maxYDict[minColumn] = @(y + height);    // 3.创建属性    UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];    attrs.frame = CGRectMake(x, y, width, height);    return attrs;}// 每次布局之前的准备- (void)prepareLayout{    [super prepareLayout];    // 1.清空最大的Y值    for (int i = 0; i<self.columnsCount; i++) {        NSString *column = [NSString stringWithFormat:@"%d", i];        self.maxYDict[column] = @(self.sectionInset.top);    }    [self.attributeArray removeAllObjects];    // 总 item 数    NSInteger count = [self.collectionView numberOfItemsInSection:0];    for (int i = 0; i <count; i++) {        UICollectionViewLayoutAttributes *attris = [self layoutAttributesForItemAtIndexPath:[NSIndexPath indexPathForRow:i inSection:0]];        [self.attributeArray addObject:attris];    }}// 返回rect范围内的布局属性- (NSArray *)layoutAttributesForElementsInRect:(CGRect)rect{    return self.attributeArray;}// 计算ContentSize   // 返回所有的尺寸- (CGSize)collectionViewContentSize{    // 默认最大Y值在第0列    __block NSString *maxColumn = @"0";    [self.maxYDict enumerateKeysAndObjectsUsingBlock:^(NSString *column, NSNumber *maxY, BOOL *stop) {        if ([maxY floatValue] > [self.maxYDict[maxColumn] floatValue]) {            maxColumn = column;        }    }];    return CGSizeMake(0, [self.maxYDict[maxColumn] floatValue] + self.sectionInset.bottom);}@end
MyCollectionViewCell。h文件中#import <UIKit/UIKit.h>@class MyCollectionViewCell;@interface MyCollectionViewCell : UICollectionViewCell@property(retain)UILabel* label;@property(retain)UIImageView* imageViews;//@property (nonatomic, strong) MyCollectionViewCell *shop;@endMyCollectionViewCell.m文件中#import "MyCollectionViewCell.h"#define width [UIScreen mainScreen].bounds.size.width#define height [UIScreen mainScreen].bounds.size.height@implementation MyCollectionViewCell-(id)initWithFrame:(CGRect)frame{    self=[super initWithFrame:frame];    if (self) {        _imageViews=[[UIImageView alloc]initWithFrame:CGRectZero];        [self.contentView addSubview:_imageViews];        _label=[[UILabel alloc]initWithFrame:CGRectZero];        [self.contentView addSubview:_label];    }    return self;}#pragma mark - 重写方法 进行重新布局视图- (void)layoutSubviews{    [super layoutSubviews];}////-(void)setShop:(MyCollectionViewCell *)shop//{//    _imageViews=[[UIImageView alloc]initWithFrame:CGRectZero];//    [self.contentView addSubview:_imageViews];//    _label=[[UILabel alloc]initWithFrame:CGRectZero];//    [self.contentView addSubview:_label];//}@end
ViewController.m文件中#import "ViewController.h"#import "MyLayout.h"#import "MyCollectionViewCell.h"#define width1 [UIScreen mainScreen].bounds.size.width#define height1 [UIScreen mainScreen].bounds.size.height@interface ViewController ()<UICollectionViewDelegate,UICollectionViewDataSource,MyLayoutDelegate>//集合视图中的数据源@property(retain)NSMutableArray* dataSoucers;//每行单元格的个数@property(assign)NSInteger number;//集合视图对象@property(retain)UICollectionView* collectionView;@end@implementation ViewController- (void)viewDidLoad {    [super viewDidLoad];    _dataSoucers=[[NSMutableArray alloc]init];    self.automaticallyAdjustsScrollViewInsets=YES;    self.view.backgroundColor=[UIColor lightGrayColor];    for (int i=0; i<23; i++) {        NSString* str=[NSString stringWithFormat:@"第:%d 张",i+1];        [_dataSoucers addObject:str];    }    MyLayout* layout=[[MyLayout alloc]init];    layout.delegate=self;    _collectionView=[[UICollectionView alloc]initWithFrame:CGRectMake(0, 20,width1 , height1-20) collectionViewLayout:layout];    _collectionView.delegate=self;    _collectionView.dataSource=self;    _collectionView.backgroundColor=[UIColor whiteColor];    //加载集合视图    [self.view addSubview:_collectionView];    //注册单元格    [_collectionView registerClass:[MyCollectionViewCell class] forCellWithReuseIdentifier:@"MyCell"];}//设置每个分区item的个数-(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{    return _dataSoucers.count;}//设置分区的个数-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{    return 1;}-(UICollectionViewCell*)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{    MyCollectionViewCell* cell=[collectionView dequeueReusableCellWithReuseIdentifier:@"MyCell" forIndexPath:indexPath];    if (indexPath.row%2==0) {        cell.backgroundColor=[UIColor greenColor];        cell.imageViews.image=[UIImage imageNamed:@"32_2"];        cell.imageViews.frame=CGRectMake(0, 0, (width1-15)/2, 120);        cell.label.frame=CGRectMake(0, 120, (width1-15)/2, 30);    }    else {        cell.backgroundColor=[UIColor cyanColor];        cell.imageViews.image=[UIImage imageNamed:@"32_8"];        cell.imageViews.frame=CGRectMake(0, 0, (width1-15)/2, 170);        cell.label.frame=CGRectMake(0, 170, (width1-15)/2, 30);    }    cell.label.text=_dataSoucers[indexPath.row];    cell.label.textAlignment=NSTextAlignmentCenter;    cell.label.font=[UIFont boldSystemFontOfSize:20];    return cell;}- (CGFloat)flowLayout:(MyLayout *)flowLayout heightForWidth:(CGFloat)width atIndexPath:(NSIndexPath *)indexPath{    if (indexPath.row%2==0) {        return  150;    }    else        return 200;}- (void)didReceiveMemoryWarning {    [super didReceiveMemoryWarning];    // Dispose of any resources that can be recreated.}@end

这里写图片描述

原创粉丝点击