UICollectionView 其實和UITableview差不多,學會簡單的使用後,根據 UITableview 的各種使用邏輯,就能夠輕鬆的實現你想要實現的各種功能,下面直接上代碼啦
1,ViewController.h 文件
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
// flowLayout 的滑動方向
[flowLayout setScrollDirection:UICollectionViewScrollDirectionVertical];
// 兩個 item 之間 的 橫向間隔
flowLayout.minimumInteritemSpacing = 20;
// 兩個 item 之間 的 縱向間隔
flowLayout.minimumLineSpacing = 10;
UICollectionView *collectionView = [[UICollectionView alloc]initWithFrame:self.view.frame collectionViewLayout:flowLayout];
collectionView.delegate = self;
collectionView.dataSource = self;
[self.view addSubview:collectionView];
// 初始化 UICollectionView 的時候,同時 註冊 cell
[collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:cellID];
}
// 定義每組 Items 的個數
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{
return 5;
}
//定義展示的Section的個數
-(NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView
{
return 2;
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{
CollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:cellID forIndexPath:indexPath];
cell.backgroundColor = [UIColor cyanColor];
cell.imageVieww.image = [UIImage imageNamed:@"小猴猴"];
cell.nameLabel.text = @"你哈";
return cell;
}
//定義每個Item 的大小
- (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath
{
// cell 的寬高
return CGSizeMake(80, 80);
}
//定義每個UICollectionView 的 margin
-(UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout insetForSectionAtIndex:(NSInteger)section
{
return UIEdgeInsetsMake(50, 15, 50, 15);//(上邊距,左邊距,下邊距,右邊距)
}
#pragma mark ------ 選中 cell -------
- (void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath{
CollectionViewCell *cell = (CollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
NSLog(@"點擊的是%@",cell.nameLabel.text);
cell.backgroundColor = [UIColor yellowColor];
}
#pragma mark ----取消選中上一個 -------
- (void)collectionView:(UICollectionView *)collectionView didDeselectItemAtIndexPath:(NSIndexPath *)indexPath{
CollectionViewCell *cell = (CollectionViewCell *)[collectionView cellForItemAtIndexPath:indexPath];
cell.backgroundColor = [UIColor cyanColor];
}
2, 自定義的
UICollectionViewCell
.h 文件
#import <UIKit/UIKit.h>
@interface CollectionViewCell : UICollectionViewCell
@property (nonatomic, retain)UIImageView *imageVieww;
@property (nonatomic, retain)UILabel *nameLabel;
@end
.m 文件
#define WIDTH [UIScreen mainScreen].bounds.size.width
#define HEIGHT [UIScreen mainScreen].bounds.size.height
#import "CollectionViewCell.h"
@implementation CollectionViewCell
- (instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
self.imageVieww = [[UIImageView alloc]initWithFrame:CGRectMake(0, 0, WIDTH/5, WIDTH/5)];
self.imageVieww.layer.cornerRadius = WIDTH/5/2;
self.imageVieww.layer.masksToBounds = YES;
self.imageVieww.layer.borderWidth = 2;
self.imageVieww.layer.borderColor = [UIColor cyanColor].CGColor;
[self.contentView addSubview:self.imageVieww];
self.nameLabel = [[UILabel alloc]initWithFrame:CGRectMake(0, CGRectGetMaxY(self.imageVieww.frame)-20, CGRectGetWidth(self.imageVieww.frame), 20)];
self.nameLabel.textColor = [UIColor yellowColor];
self.nameLabel.textAlignment = 1;
[self.contentView addSubview:self.nameLabel];
}
return self;
}
效果圖如下: