在iOS6.0之後,蘋果推出了?個新的繼承於UIScrolleriew的一個視 圖,UICollectionView,也被稱之為集合視圖。和UITableView共同作為 在開發中常常用的兩個視圖,常常作為項目的主界面出現。
代碼演示:
#import "YourCollectionViewCell.h"
@implementation YourCollectionViewCell
-(instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
//獲取整體item的寬和高
CGFloat totalWidth = frame.size.width;
CGFloat totalHeight = frame.size.height;
self.numberLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, 10, totalWidth, totalHeight - 20)];
self.numberLabel.textAlignment = NSTextAlignmentCenter;
self.numberLabel.font = [UIFont boldSystemFontOfSize:36];
[self.contentView addSubview:self.numberLabel];
}return self;
}
@end
#import "MyCollectionReusableView.h"
@implementation MyCollectionReusableView
- (instancetype)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if (self) {
self.headerLabel = [[UILabel alloc]initWithFrame:self.bounds];
self.headerLabel.textAlignment = NSTextAlignmentCenter;
self.headerLabel.font = [UIFont boldSystemFontOfSize:36];
[self addSubview:self.headerLabel];
}return self;
}
@end
#import "ViewController.h"
#import "YourCollectionViewCell.h"
#import "MyCollectionReusableView.h"
#define kReuse @"reuse"
#define kWidth self.view.frame.size.width
@interface ViewController ()
@end
@implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
//創建一個布局對象,采用系統布局類UICollectionViewFlowLayout
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc]init];
/*
//設置最小行間距
layout.minimumLineSpacing = 20;
//設置item與item之間的間距
layout.minimumInteritemSpacing = 10;
layout.sectionInset = UIEdgeInsetsMake(10, 10, 10, 10);
//設置每一個item的尺寸
CGFloat totalWidth = self.view.frame.size.width;
layout.itemSize = CGSizeMake((totalWidth - 40)/3, 80);
*/
//設置滑動方向
layout.scrollDirection = UICollectionViewScrollDirectionVertical;
//集合視圖的創建必須指定布局,如果沒有布局,顯示不了任何東西
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:[[UIScreen mainScreen]bounds] collectionViewLayout:layout];
collectionView.dataSource = self;
collectionView.delegate = self;
//集合視圖如果想要顯示內容,必須要將cell進行注冊
[collectionView registerClass:[YourCollectionViewCell class] forCellWithReuseIdentifier:kReuse];
//集合視圖如果想要分區頭視圖顯示 ,必須注冊增廣視圖
[collectionView registerClass:[MyCollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header"];
//給頭視圖布局
layout.headerReferenceSize = CGSizeMake(kWidth, 40);
[self.view addSubview:collectionView];
}
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{
return CGSizeMake((kWidth - 40)/3, 80);
}
- (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section{
return UIEdgeInsetsMake(0, 0, 0, 0);
}
- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumLineSpacingForSectionAtIndex:(NSInteger)section{
return 20;
}
//- (CGFloat)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout minimumInteritemSpacingForSectionAtIndex:(NSInteger)section{
// return 20;
//}
- (void)didReceiveMemoryWarning {
[super didReceiveMemoryWarning];
// Dispose of any resources that can be recreated.
}
#pragma mark -------集合視圖數據源協議-------
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 15;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
YourCollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:kReuse forIndexPath:indexPath];
cell.contentView.backgroundColor = [UIColor colorWithRed:arc4random() %256 / 255.0 green:arc4random() %256 / 255.0 blue:arc4random() %256 / 255.0 alpha:1.0];
cell.numberLabel.text = [NSString stringWithFormat:@"%ld",indexPath.row];
return cell;
}
//返回增廣視圖,也就是集合視圖的頭視圖或者尾視圖
-(UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath{
MyCollectionReusableView *view = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"header" forIndexPath:indexPath];
view.headerLabel.text = [NSString stringWithFormat:@"當前分區為:%ld",indexPath.section];
view.backgroundColor = [UIColor yellowColor];
return view;
}
//設置分區個數
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView{
return 10;
}
#pragma mark -------集合視圖代理方法-----
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
NSLog(@"%ld,%ld",indexPath.section,indexPath.row);
}
@end