(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
阅读全文
0 0
- (iOS)简单的瀑布流布局
- iOS瀑布流布局
- 瀑布流布局的简单应用
- 瀑布流布局简单应用
- 简单实现瀑布流布局
- iOS瀑布流布局实现
- 瀑布流布局的实现(一)
- 一个简单的瀑布流布局的实现
- 很简单的Vue.js瀑布流布局
- 瀑布流布局的实现
- 网页的瀑布流布局
- iOS 瀑布流布局 加载网络图片
- iOS开发 - WaterflowLayout 瀑布流布局
- iOS开发 - WaterflowLayout 瀑布流布局
- iOS 【使用CollectionView瀑布流布局】
- 等高瀑布流布局的算法
- 瀑布流布局的几种实现
- Android版的瀑布流布局
- Mac下使用simiki搭建个人wiki
- select服务器编程综合
- vertical-align
- 生产环境部署hadoop
- jQuery去除子元素
- (iOS)简单的瀑布流布局
- IIS优化网站性能二
- 安装jenkins
- Virtual SVN + Ubuntu 访问 SSL handshake failed
- 深入浅出ES6(三):生成器 Generators
- 记录一下HTC vive播放2d视频或全景视频
- centos 7.2 安装mysql 修改 初始密码
- SVN 双机热备份(crontab定时)
- 常用 Git 命令清单