UICollectionView

发表于

对于UICollectionView在之前的项目中就有接触到过，只可惜接触到的知之甚少又没有抓紧巩固所以很快就生疏了。可幸的是在最近的项目中好好的使用了一番，虽然用到的都是很基础的但也学到了很多。

UICollectionView

UICollectionView的主要用途是数据管理和显示，而数据显示就多半跟布局样式有关联。UICollectionView自然也有自己的一套自定义布局的流程。

UICollectionViewLayout

在文档的视图与布局中提到了一个重要的类-UICollectionViewLayout

###UICollectionViewLayout

  • OC
1
2
3
4
5
6
UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init]; //初始化
layout.minimumLineSpacing = 0.0; // 最小行间距
layout.minimumInteritemSpacing = 0.0; // 最小item间距
layout.scrollDirection = UICollectionViewScrollDirectionHorizontal; // 滚动方向 可设置水平滚动或垂直滚动
layout.sectionInset = UIEdgeInsetsMake(0, 12, 0, 12); // 调整内容的边距
layout.itemSize = (CGSizeMake((WIDTH - 33) / 2,(((WIDTH - 33) / 2) * 5) / 4 + 40)); // 尺寸大小
  • swift 
1
2
3
4
5
6
7
let layout = UICollectionViewFlowLayout.init()
layout.minimumLineSpacing = 0.0
layout.minimumInteritemSpacing = 0.0
layout.scrollDirection = .horizontal
layout.sectionInset = UIEdgeInsets.init(top: 0, left: 12, bottom: 0, right: 12)
layout.scrollDirection = .vertical
layout.itemSize = CGSize(width: (kScreenWidth - 33) / 2, height: ((kScreenWidth - 33) / 2) / 2 + 60)

对于sectionInset再借用一张网图来说明下

Alt Image Text

以上属性设置也可以通过UICollectionViewDelegateFlowLayout的代理方法来进行设置

###UICollectionView

UICollectionView的设置就跟UITableView很像了

关键是初始化时必须使用指定的初始化布局

  • OC
1
2
3
4
UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectZero collectionViewLayout:layout]; 
collectionView.delegate = self;
collectionView.dataSource = self;
[collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"cell"];
  • swift
1
2
3
4
collectionview = UICollectionView.init(frame: .zero, collectionViewLayout: layout)
collectionview.backgroundColor = UIColor.white
collectionview.isScrollEnabled = false
self.addSubview(collectionview)
  • 数据源和代理当然必不可少
1
2
3
4
5
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView;

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section;

- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath;

在设置cell的尺寸时需要注意，cell的大小也影响这numberOfItemsInSection也就是每行显示的数量。cell的布局个数 * cell的宽度 + 间隙 > 屏幕宽度时 那么就会导致第一行的最后一个cell会被挤压到新的一行.因此在设置cell的size时就应该考虑合适的宽度和间隙比例。

demo

  • 根据上图略带在讲解下黄色部分是通过UICollectionViewFlowLayout设置的，红色的则是UICollectionViewCell。白色间隔通过UICollectionViewFlowLayout的minimumLineSpacing，minimumInteritemSpacing这两个属性来设置。要想得到更好的布局可以搭配上sectionInset属性一起设置。
  • 如有差错请赐教