UICollectionLayout布局 —— UIKit之学习UICollectionView记录二《流水布局》

重点知识

 一、 加载collectionView注意事项

　　1.创建collectionView,有两种方式 ：一种是xib和一种是纯代码；设置代理和数据源，注册cell,配置流水布局的属性，如上、下、左、右间距及行间距和列间距。

　　2. 创建CollectionViewCell，实现collectionView代理和数据源方法。

     3. 设置每个cell的尺寸。

     4.cell出现时显示动画

二、 流水布局思路分析

　　

三、精华代码

 1、布局一

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59

//1.配置collectionView self.automaticallyAdjustsScrollViewInsets = YES;  //默认为No,     [self.view setBackgroundColor:[UIColor yellowColor]];     [self.collectionView registerNib:[UINib nibWithNibName:@"STRNearPeopleCell" bundle:nil] forCellWithReuseIdentifier:nearPeopleCell];      NSLog(@"%@",self.dataList);     [self.collectionView reloadData]; //2.显示动画及设置大小 和加载cell   - (void)collectionView:(UICollectionView *)collectionView willDisplayCell:(UICollectionViewCell *)cell forItemAtIndexPath:(NSIndexPath *)indexPath{     STRNearPeopleCell *hotcell  = (STRNearPeopleCell *)cell;     [hotcell showAnamil];       } //流水布局，系统UICollectionViewLayout.h - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath{     CGFloat outInset = self.collectionView.frame.size.width - 2 * kMargin;     NSInteger count = outInset / kItemSizeW;     NSInteger extraTotal = (NSInteger)(outInset - kMargin * (count - 1 ));           CGFloat itemWH;           if (extraTotal < count * kItemSizeW) {                   itemWH = extraTotal / count;     } else {         CGFloat extraWidth = extraTotal % kItemSizeW;         itemWH = kItemSizeW + extraWidth / count;     }     return CGSizeMake(itemWH, itemWH + 25); } - (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section{     return self.dataList.count; }   // The cell that is returned must be retrieved from a call to -dequeueReusableCellWithReuseIdentifier:forIndexPath: - (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath{           STRNearPeopleCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:nearPeopleCell forIndexPath:indexPath];     return cell; }   //3.设置cell - (void)awakeFromNib {     [super awakeFromNib];     // Initialization code } //此外是模拟数据，真实的话把注释取消掉，用来控制显示动画的。 - (void)showAnamil {     //x和y的最终值为1 //    if (self.live.isShow) {  //当有网络模型时，可以把isShow字段加进去 //        return; //    }     self.layer.transform = CATransform3DMakeScale(0.1, 0.1, 1);           [UIView animateWithDuration:1 animations:^{         self.layer.transform = CATransform3DMakeScale(1, 1, 1); //        self.live.show = YES; //如果已经显示过yes     }]; }

 2、布局二

?

1 2 3 4 5 6 7 8 9 10 11

//定义每个UICollectionView 的大小 - (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath {     return CGSizeMake(([UIScreen mainScreen].bounds.size.width-64) /3 ,([UIScreen mainScreen].bounds.size.width-64) /3); }   //定义每个UICollectionView 的 margin - (UIEdgeInsets)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout*)collectionViewLayout insetForSectionAtIndex:(NSInteger)section {     return UIEdgeInsetsMake(20, 8, 20, 8); }