IOS瀑布流通过UICollectionView控件实现
2015-08-25 16:51
471 查看
有些IOS项目会用的瀑布流功能,我们可以选择使用第三方库,也可以自己写一个,如果自己写此功能,可以使用UICollectionView控件进行展示,设置分为几列等。
具体代码如下:
实现结果:
具体代码如下:
#define screenHeight [[UIScreen mainScreen]bounds].size.height //屏幕高度 #define screenWidth [[UIScreen mainScreen]bounds].size.width //屏幕宽度 #define colletionCell 3 //设置具体几列 @interface HomeViewController (){ UICollectionView *collectionView; NSMutableArray *hArr; //记录每个cell的高度 } @end @implementation HomeViewController - (void)viewDidLoad { [super viewDidLoad]; hArr = [[NSMutableArray alloc] init]; UICollectionViewFlowLayout *flowLayout=[[UICollectionViewFlowLayout alloc]init]; [flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical]; //设置横向还是竖向 collectionView=[[UICollectionView alloc] initWithFrame:CGRectMake(0, 0, screenWidth ,screenHeight) collectionViewLayout:flowLayout]; collectionView.dataSource=self; collectionView.delegate=self; [collectionView setBackgroundColor:[UIColor clearColor]]; [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"UICollectionViewCell"]; [self.view addSubview:collectionView]; } #pragma mark -- UICollectionViewDataSource //定义展示的UICollectionViewCell的个数 -(NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section { return 20; } //定义展示的Section的个数 -(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView { return 1; } //每个UICollectionView展示的内容 -(UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath { static NSString * CellIdentifier = @"UICollectionViewCell"; UICollectionViewCell * cell = [collectionView dequeueReusableCellWithReuseIdentifier:CellIdentifier forIndexPath:indexPath]; cell.backgroundColor = [UIColor colorWithRed:((10 * indexPath.row) / 255.0) green:((20 * indexPath.row)/255.0) blue:((30 * indexPath.row)/255.0) alpha:1.0f]; UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, 20, 20)]; label.textColor = [UIColor redColor]; label.text = [NSString stringWithFormat:@"%d",indexPath.row]; //移除cell for (id subView in cell.contentView.subviews) { [subView removeFromSuperview]; } NSInteger remainder=indexPath.row%colletionCell; NSInteger currentRow=indexPath.row/colletionCell; CGFloat currentHeight=[hArr[indexPath.row] floatValue]; CGFloat positonX=(screenWidth/colletionCell-8)*remainder+5*(remainder+1); CGFloat positionY=(currentRow+1)*5; for (NSInteger i=0; i<currentRow; i++) { NSInteger position=remainder+i*colletionCell; positionY+=[hArr[position] floatValue]; } cell.frame = CGRectMake(positonX, positionY,screenWidth/colletionCell-8,currentHeight) ;//重新定义cell位置、宽高 [cell.contentView addSubview:label]; return cell; } #pragma mark --UICollectionViewDelegateFlowLayout //定义每个Item 的大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath { CGFloat height=100+(arc4random()%120); [hArr addObject:[NSString stringWithFormat:@"%f",height]]; return CGSizeMake(screenWidth/colletionCell-8, height); //设置cell宽高 } //定义每个UICollectionView 的 margin -(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section { return UIEdgeInsetsMake(0,0, 0, 0); } #pragma mark --UICollectionViewDelegate //UICollectionView被选中时调用的方法 -(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath { UICollectionViewCell * cell = (UICollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath]; cell.backgroundColor = [UIColor greenColor]; } //返回这个UICollectionView是否可以被选择 -(BOOL)collectionView:(UICollectionView *)collectionView shouldSelectItemAtIndexPath:(NSIndexPath *)indexPath { return YES; } @end
实现结果:
相关文章推荐
- easyui formatter 操作列传多个参数的写法
- easyUI的列名实现简单的树形结构
- UI中的响应时间:3个重要的界限
- iOS开发系列--transform和UIScrollView学习
- IOS:UILocalNotification使用
- poj2749 Building roads 2-sat
- 手动Handler与Thread处理UI数据同步问题
- POJ-1503 Integer Inquiry-多个大数相加
- POJ-2299 Ultra-QuickSort-分治法排序求交换速度
- UIScrollView使用
- 无需编码实现UI动效:XCode+Canvas
- easyui-combobox如何使用选择器
- 代码里手动编写UI
- building live555 library for iphoneos
- POJ 2524 Ubiquitous Religions 并查集
- [leetcode] 95.Unique Binary Search Trees II
- UILabel设置圆角和背景
- 外来人员如何发起流程与参与内部流程?CCFlow中Guest流程说明
- 回顾交互设计史:回归人性,重拾质朴
- POJ - 2524 Ubiquitous Religions(简单并查集)