UICollectionView 和 UICollectionViewController 類是iOS6 新引進的API，用於展示集合視圖，布局更加靈活，可實現多列布局，用法類似於UITableView 和 UITableViewController 類。
使用UICollectionView 必須實現UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout這三個協議。
1.首先我們創建CollectionView（代碼如下）
- (void)initCollectionView
{
// 我是用masnory進行屏幕適配的 這個坐標你也可以直接給出。
[self.collectionView mas_makeConstraints:^(MASConstraintMaker *make) {
make.top.equalTo(self.view.mas_bottom).offset(0);
make.top.offset(0); ／／頂部間隔
make.left.offset(0);／／左邊
make.bottom.offset(-10);／／底部
make.right.offset(0);／／右邊
//
}];
self.collectionView.backgroundColor = [UIColor colorWithRed:241 green:241 blue:241 alpha:1];／／背景色
self.collectionView.contentInset = UIEdgeInsetsMake(10, 10, 10, 10);／／插入內容的位置 與邊緣
self.collectionView.delegate = self;代理協議
self.collectionView.dataSource = self;數據源協議
[self.collectionView registerClass:[CollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
創建新的cell
}
2.創建collectionview 必須要添加 UICollectionViewFlowLayout
／／使用懶加載的方法
- (UICollectionView *)collectionView
{
if (!_collectionView)
{
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc] init];
flowLayout.itemSize = CGSizeMake((SCREEN_WIDTH - 50)/4, (SCREEN_WIDTH - 50)/4 + 20);
flowLayout.minimumLineSpacing = 10; 每排的間隔
flowLayout.minimumInteritemSpacing = 10; 每行的間隔
self.collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:flowLayout];
[self.view addSubview:self.collectionView];
}
return _collectionView;
}
3.接下來 我們需要新建一個類（CollectionviewCell）
cell.h 文件中呢 我們把需要展示的內容 都有屬性展示出來
比如 展示一個圖片 和文字
@property (nonatomic, strong) UIImageView *familyImageView;
@property (nonatomic, strong) UILabel *titleLabel;
所以 接下來在.m中寫這2個控件（我的坐標都是masnory適配 也可以直接給出）
-(instancetype)initWithFrame:(CGRect)frame
{
if (self = [super initWithFrame:frame])
{
self.familyImageView=[[UIImageView alloc] init];
self.titleLabel = [[UILabel alloc] init];
self.titleLabel.font = [UIFont systemFontOfSize:13];
self.titleLabel.textAlignment=NSTextAlignmentCenter;
[self.contentView addSubview:self.titleLabel];
[self.contentView addSubview:self.familyImageView];
／／make 是masnory的一個屬性 用於定義坐標位置
[self.familyImageView mas_makeConstraints:^(MASConstraintMaker *make)
{
make.top.offset = 10;
make.left.offset = 10;
make.bottom.equalTo(self.titleLabel.mas_top).offset(-10);
make.right.offset = -10;
}];
[self.titleLabel mas_makeConstraints:^(MASConstraintMaker *make)
{
make.left.offset = 0;
make.bottom.offset = 0;
make.right.offset = 0;
make.height.offset = 20;
}];
}
return self;
}
4.前提工作都基本做完了 接下來 就是實現協議代理的 方法 用來展示內容 顯示在屏幕中
／／區數
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 1;
}
／／每個區顯示的小模塊
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 18;
}
cell 上面展示的內容
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath
{
CollectionViewCell*cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
注意上面這個CollectionViewCell 是你新建的cell 名稱是一樣的
下面就是展示你需要展示的內容了 直接用cell 打點調用就可以用屬性了。
cell.familyImageView.image = _arr[indexPath.row];這是我之前定義的一個圖片
cell.titleLabel.text=nameArr[indexPath.row];label
return cell;
}
cell的點擊方法
-(void)collectionView:(UICollectionView *)collectionView didSelectItemAtIndexPath:(NSIndexPath *)indexPath
{
}
大致就是這些了，願猿友們早日迎娶白富美，走向人生peak！