06-UICollectionView

2019-06-17  本文已影响0人  ForstDragon

1、可以实现多列布局,布局更加灵活,用法类似于UITableView.


常见样式.png

1.1、UICollectionView和UICollectionViewLayout的关系
UICollectionViewLayout和UICollectionView的关系,就像人的大脑和人的行为的关系一样。
大脑控制人的行为。UICollectionViewLayout负责管理(决定)每一个cell的大小,位置信息等。UICollectionView只是负责显示每一个cell。
1.2、UICollectionViewFlowLayout的使用,UICollectionViewLayout的子类.
线性布局,或者称为流水式布局.
1.3、Flow Layout常用的属性:
Item size
Line spacing
Inter cell spacing
Scrolling direction
Header and footer size
Section Inset


组成部分.png
流水布局.png
cell之间的距离.png
组之间的距离.png

2、创建

    UICollectionViewFlowLayout *flowLayout2 = [[UICollectionViewFlowLayout alloc] init];
    flowLayout2.itemSize = CGSizeMake((mainScreenW -30)/2, 170*SIZEW);
    flowLayout2.sectionInset = UIEdgeInsetsMake(0, 10, 0, 0);
    flowLayout2.minimumLineSpacing =  0;
    [flowLayout2 setScrollDirection:UICollectionViewScrollDirectionHorizontal];
    _MHColltionView = [[UICollectionView alloc] initWithFrame:CGRectMake(0,40*SIZEW, mainScreenW, 175*SIZEW) collectionViewLayout:flowLayout2];
    _MHColltionView.dataSource = self;
    _MHColltionView.delegate = self;
    _MHColltionView.tag = 1003;
    _MHColltionView.backgroundColor = mainWhiteColor;
    _MHColltionView.showsHorizontalScrollIndicator = NO;
    [_MHColltionView registerClass:[moneyHeightColltionCell class] forCellWithReuseIdentifier:@"moneyHeightColltionCell"];
    [_moneyHeightProDuctView addSubview:_MHColltionView];

1.1.1 设置重用的方法

- (void)registerClass:(nullable Class)cellClass forCellWithReuseIdentifier:(NSString *)identifier;
- (void)registerNib:(nullable UINib *)nib forCellWithReuseIdentifier:(NSString *)identifier

2.1、数据源方法

- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
   return 5;//cell个数
}
- (UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
      recommendProDuctViewCell*item = [collectionView dequeueReusableCellWithReuseIdentifier:@"moneyHeightColltionCell" forIndexPath:indexPath];

      return  item;

}

上一篇下一篇

猜你喜欢

热点阅读