1. 所有直播带货系统开发的礼物系统,第一步用户看到的无外乎都是礼物的列表界面
纵观主流直播间的礼物列表应该都是使用UICollectionView实现的,所以我也不例外,下面就是各种撸代码.效果如下

看着效果还不错吧.但是但是我突然发现一个问题.直播带货系统开发的礼物展示的顺序跟我想要的顺序不一样,跟数据的排序也不一致.看图来说

黄色的顺序是我们想要的顺序,但是现在顺序确是红色的.为什么呢?我们都知道collectionview的滚动方向是有layout控制的.代码如下

    UICollectionViewFlowLayout *layout = [[UICollectionViewFlowLayout alloc] init];
    layout.itemSize = CGSizeMake(itemW, itemH);
    layout.minimumLineSpacing = 0;
    layout.minimumInteritemSpacing = 0;
    layout.scrollDirection = UICollectionViewScrollDirectionHorizontal;

看代码之后才明白,因为我们设置的滚动方向是横向滚动,所以系统会默认先把垂直方向的Item填充,然后再横向填充,这就不难解释为啥会是这种排序.如果换成垂直滚动呢?这样也不满足我们的需求,既然系统的不行,那么只有拿出独门武器,自定义一个flowlayout吧.让它按照我们的要求去滚动,去排序.

- (void)prepareLayout {
    //自定义layout都必须重写这个方法
    [super prepareLayout];
    //设置基本属性
    CGFloat itemW = SCREEN_WIDTH/4.0;
    CGFloat itemH = itemW*105/93.8;
    self.itemSize = CGSizeMake(itemW, itemH);
    self.minimumLineSpacing = 0;
    self.minimumInteritemSpacing = 0;
    self.scrollDirection = UICollectionViewScrollDirectionHorizontal;
    //刷新后清除所有已布局的属性 重新获取
    [self.cellAttributesArray removeAllObjects];
    NSInteger cellCount = [self.collectionView numberOfItemsInSection:0];
    for (NSInteger i = 0; i < cellCount; i++) {
        //取出每一个的Item的布局.重新赋值
        NSIndexPath *indexPath = [NSIndexPath indexPathForRow:i inSection:0];
        UICollectionViewLayoutAttributes *attibute = [self layoutAttributesForItemAtIndexPath:indexPath];
        NSInteger page = i / 8;//第几页
        NSInteger row = i % 4 + page*4;//第几列
        NSInteger col = i / 4 - page*2;//第几行
        attibute.frame = CGRectMake(row*itemW, col*itemH, itemW, itemH);
        //保存所有已经重新赋值的布局
        [self.cellAttributesArray addObject:attibute];
    }
}
- (NSArray<UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect{
    //返回当前可见区域内的已经计算好的布局
    return self.cellAttributesArray;
}

写出来之后心里沾沾自喜,这样应该可以实现了吧.看看效果吧

* 应该可以看出来问题了吧,我选中的那个礼物第一页和第二页竟然都出现了,我明明设置了分页滚动的呀.查看层级结构如下

* 原来是可爱的么么哒礼物被挤到外面了.由于没有设置弹簧的效果,所以没太注意少了一个礼物,那么原因呢? 想了好久才想起来是不是滚动的范围不够,导致么么哒不显示在界面中呢?又去扒了扒怎么设置自定义的layout的contentoffset.最终找到一个方法.

- (CGSize)collectionViewContentSize{
    NSInteger cellCount = [self.collectionView numberOfItemsInSection:0];
    NSInteger page = cellCount / 8 + 1;
    return CGSizeMake(SCREEN_WIDTH*page, 0);
}

但是这样做真的可以么?看看效果吧

到此为止基本实现了一个主流直播带货系统开发的礼物列表界面.关于礼物的点击逻辑看看代码就可以了.在此就不多啰嗦了.
————————————————
声明：本文由云豹科技转发自白衣哥博客，如有侵权请联系作者删除
原文链接：https://blog.csdn.net/Keep_Dream/article/details/79917541

ITPub博客

直播带货系统开发，如何实现直播礼物系统

最新文章