在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