零基础iOS开发学习日记—控件篇—UICollectionView

99永远差一分
5,155 阅读3分钟

开头

UICollectionView

实际用处

  • app中的新版本页面，主要用UICollectionView来实现，放在控制器篇整理
  • 大量图像的显示，例如表情包图标、九宫格图

基础用法

  • 使用UICollectionView有几个必须要设置的地方
  1. 自身frame的大小，可以理解为容器
  2. UICollectionViewFlowLayout布局，设置里面每组和每个元素的大小与布局
  3. UICollectionView的数据，要通过数据源方法进行设置，并且要实现两个必要的数据源方法，返回每组的元素个数和元素的样式，返回组数默认为1组
  4. 由于追求优化的原因，在设置UICollectionViewCell需要注意可重用标识符，系统会根据标识符自动在缓存池中查找对应的样式的cell，以便重用
- (void)viewDidLoad {
    [super viewDidLoad];
    UICollectionViewFlowLayout *layout = [UICollectionViewFlowLayout new];
    UICollectionView *collectionView = [[UICollectionView alloc] initWithFrame:CGRectMake(10, 10, 125, 300) collectionViewLayout:layout];
    //设置item布局
    //设置item大小
    layout.itemSize = CGSizeMake(50, 50);
    //设置item左右间距
    layout.minimumInteritemSpacing = 5;
    //设置item上下间距
    layout.minimumLineSpacing = 10;
    //滚动方向
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //设置组间距
    layout.sectionInset = UIEdgeInsetsMake(0, 10, 0, 10);
    //数据源代理
    collectionView.dataSource = self;
    //是否允许翻页
    collectionView.pagingEnabled = YES;
    //关闭弹力
    collectionView.bounces = NO;
    //注册可重用cell
    [collectionView registerClass:[UICollectionViewCell class] forCellWithReuseIdentifier:@"testCell"];
    [self.view addSubview:collectionView];
}
  • 返回组数
- (NSInteger)numberOfSectionsInCollectionView:(UICollectionView *)collectionView {
    return 1;
}
  • 返回每组的个数
- (NSInteger)collectionView:(UICollectionView *)collectionView numberOfItemsInSection:(NSInteger)section {
    return 6;
}
  • 返回cell元素
- (__kindof UICollectionViewCell *)collectionView:(UICollectionView *)collectionView cellForItemAtIndexPath:(NSIndexPath *)indexPath {
    //获取cell
    UICollectionViewCell *cell = [collectionView dequeueReusableCellWithReuseIdentifier:@"testCell" forIndexPath:indexPath];
    cell.backgroundColor = [UIColor redColor];
    return cell;
}

UICollectionViewFlowLayout

  • UICollectionViewFlowLayout在ios14中，默认的布局是左右对称，而在实际开发中，需要向左对齐，所以就需要自定义布局，我是直接用的网上的UICollectionViewLeftAlignedLayout，直接代替系统的就可以了
  • 链接 UICollectionViewLeftAlignedLayout

布局优先级

  • UICollectionViewFlowLayout是有布局优先级的，即设置了某个距离，另一个距离就无效了，下面是我测试总结的使用注意
  1. 左右布局优先于元素间距，即collectionView的宽度够大，而且系统计算后，可以显示两个cell，就会优先左右布局，无论设置的中间间距是多少
  2. sectionInset优先于minimumLineSpacing和minimumInteritemSpacing，即设置了前者，系统会先设置边距，再设置元素内的关系

scrollDirection

  • UICollectionView的滚动方向默认是垂直的，且元素排列顺序也是从左至右，从上到下的，元素间的距离也是正常的
  • 但是，如果设置为水平滚动，则元素排列顺序是从上到下，从左至右，而且元素间的距离的意义也要交换，也就是说minimumInteritemSpacing决定上下的距离，minimumLineSpacing决定左右的距离

翻页

  • UICollectionView翻页的思路与UIScrollView的一致，根据可见大小，将内容分割成页

总结

  • 综上，UICollectionView的使用有以下几点要注意
  1. 不要设置contentSize，而需要设置UICollectionViewFlowLayout，设置元素的大小和布局
  2. 通过数据源方法进行内容的设置
  3. 在实际开发中，要精确计算可见视图的大小和内容视图大小，才能呈现更好的效果
  4. 在使用过程中，大部分情况下cell是自定义设置的
avatar
文章
阅读
粉丝