ColletionView(集合视图)是使用一个灵活的和可改变的布局来呈现一个有序的数据项集的方式。ColletionView最常见的用途是在网格状排列,但是在iOS集合视图可不仅仅是行和列。集合视图,精确的布局的视觉元素是定义通过子类时,可以动态地改变,所以你可以实现网格,栈,圆形布局,动态改变布局,或你能想象的任何类型的安排。
创建步骤:
(1)子类化UICollectionViewFlowLayout
(2)创建UIColletionView
(3)实现代理:UICollectionViewDataSource、UICollectionViewDelegate及第一步子类化后的布局代理
下面通过通过一个简单的demo来说明:
ViewController.m
#import "ViewController.h"
#import "ClassMatesCell.h"
#import "HPCollectionViewWaterfallLayout.h"
@interface ViewController ()<UICollectionViewDataSource,UICollectionViewDelegate,HPCollectionViewDelegateWaterfallLayout>
@property (nonatomic,strong) UICollectionView *colletionView;
@property (nonatomic,strong) NSMutableArray *listData;
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view, typically from a nib.
NSDictionary *dic1 = @{@"stu_name" : @"文字1"};
NSDictionary *dic2 = @{@"stu_name" : @"文字2"};
NSDictionary *dic3 = @{@"stu_name" : @"文字3"};
NSDictionary *dic4 = @{@"stu_name" : @"文字4"};
NSDictionary *dic5 = @{@"stu_name" : @"文字5"};
NSDictionary *dic6 = @{@"stu_name" : @"文字6"};
NSDictionary *dic7 = @{@"stu_name" : @"李晓7"};
NSDictionary *dic8 = @{@"stu_name" : @"文字8"};
NSDictionary *dic9 = @{@"stu_name" : @"文字9"};
NSDictionary *dic10 = @{@"stu_name" : @"文字10"};
_listData =[NSMutableArray arrayWithObjects:dic1,dic2,dic3,dic4,dic5,dic6,dic7,dic8,dic9,dic10 ,nil];
[self createCollectionView];
}
- (void)createCollectionView
{
if (!_colletionView) {
HPCollectionViewWaterfallLayout *layout = [[HPCollectionViewWaterfallLayout alloc] init];
layout.delegate=self;
_colletionView = [[UICollectionView alloc] initWithFrame:self.view.bounds collectionViewLayout:layout];
_colletionView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
_colletionView.dataSource = self;
_colletionView.delegate = self;
_colletionView.backgroundColor = [UIColor clearColor];
[_colletionView registerClass:[ClassMatesCell class] forCellWithReuseIdentifier:@"colletionviewcell"];
[self.view addSubview:_colletionView];
}
else {
[_colletionView reloadData];
}
}
#pragma mark - UIColltionView datasource
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 1;
}
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return self.listData.count;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
ClassMatesCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"colletionviewcell" forIndexPath:indexPath];
NSUInteger row = [indexPath row];
cell.tag = row + 1000;
if ([self.listData count]>0) {
NSDictionary *rowData = [self.listData objectAtIndex:(row)];
[cell.imageView setImage:[UIImage imageNamed:@"money"]];
//内容
cell.nameLabel.text = [rowData objectForKey:@"stu_name"];
}
return cell;
}
#pragma mark - HPCollectionViewDelegateWaterfallLayout
-(CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout interItemSpaceForSection:(NSUInteger)section{
return 0;
}
-(CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake(100, 110);
}
-(NSUInteger)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout numberOfColumnsForSection:(NSUInteger)section{
return section+3;
}
-(CGFloat)collectionView:(UICollectionView*)collectionView layout:(UICollectionViewLayout*)collectionViewLayout preferredColumnSpaceForSection:(NSUInteger)section{
return 3;
}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
@end
想进一步了解UIColletionView使用方法,请访问:https://developer.apple.com/library/ios/documentation/WindowsViews/Conceptual/CollectionViewPGforIOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40012334-CH1-SW1