UICollectionView详解:7-UICollectionViewFlowLayout使用示例
下方的示例代码对集合视图中的collectionViewLayout属性进行设置,从而影响到集合视图中的单元格的布局效果。
- 创建集合视图对象,并设置其布局属性。创建一个UICollectionViewFlowLayout类的布局对象,并对其中布局相关的属性进行设置后,把其作为入参传入集合视图的实例化方法中。
- (UICollectionView *)collectionView {
if (_collectionView == nil) {
UICollectionViewFlowLayout *flowLayout = [[UICollectionViewFlowLayout alloc]init];
flowLayout.minimumLineSpacing = 30;
flowLayout.minimumInteritemSpacing = 40;
flowLayout.headerReferenceSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 50);
flowLayout.footerReferenceSize = CGSizeMake([UIScreen mainScreen].bounds.size.width, 50);
flowLayout.sectionInset = UIEdgeInsetsMake(10, 20, 30, 40);
_collectionView = [[UICollectionView alloc]initWithFrame:self.view.bounds collectionViewLayout:flowLayout];
_collectionView.dataSource = self;
_collectionView.delegate = self;
_collectionView.backgroundColor = [UIColor whiteColor];
}
return _collectionView;
}
- 在viewDidLoad方法中注册单元格和段Section的头尾视图
- (void)viewDidLoad {
[super viewDidLoad];
[self.view addSubview:self.collectionView];
[self.collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:cellId];
// 注册header和footer
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" ];
[self.collectionView registerClass:[UICollectionReusableView class] forSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" ];
}
- 在集合视图的数据源方法中,设置每个段中单元格的数量以及集合视图中包含的段Section数。
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
return 10;
}
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
return 10;
}
- 在集合视图的数据源方法中,创建单元格对象
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"cell" forIndexPath:indexPath];
cell.backgroundColor = [UIColor yellowColor];
return cell;
}
- 实现头尾视图
- (UICollectionReusableView *)collectionView:(UICollectionView *)collectionView viewForSupplementaryElementOfKind:(NSString *)kind atIndexPath:(NSIndexPath *)indexPath {
UICollectionReusableView *reusableView = nil;
if ([kind isEqualToString:UICollectionElementKindSectionHeader]) {
UICollectionReusableView *header = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionHeader withReuseIdentifier:@"headerView" forIndexPath:indexPath];
header.backgroundColor = [UIColor greenColor];
reusableView = header;
} else {
UICollectionReusableView *footer = [collectionView dequeueReusableSupplementaryViewOfKind:UICollectionElementKindSectionFooter withReuseIdentifier:@"footerView" forIndexPath:indexPath];
footer.backgroundColor = [UIColor redColor];
reusableView = footer;
}
return reusableView;
}
- 运行效果如下。
示例代码
https://github.com/99ios/8.3.7
文章发布时间为: November 17th , 2016 at 09:35 am
最后编辑时间为: September 13th , 2017 at 02:53 pm
本文由 99ios 创作,转载请注明出处
最后编辑时间为: September 13th , 2017 at 02:53 pm
本文由 99ios 创作,转载请注明出处