(iOS)简单的瀑布流布局

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;


@end

MyCollectionViewCell.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

这里写图片描述

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值