UIcollectionView等间距居中换行

2017-05-11  本文已影响555人  巧克力色可可

最近项目有个需求,是展示一堆供用户选择的标签,根据宽度自动换行,自动居中,可滑动,综上选择了UICollectionView,因为之前几乎都是用TableView,所以用此篇日志来记录下来遇见的坑。

先上个效果图:

02.gif

我用一个point记录了每一个item的origin。因为每个标签的长度不同,故更新point时需要将下一个item的宽度计算出来,再决定是否要换行。

这样得到了所有item的布局信息,但是这样并没有满足居中的需求,你需要重写这个方法:

- (nullable NSArray< UICollectionViewLayoutAttributes *> *)layoutAttributesForElementsInRect:(CGRect)rect;

这个方法返回collectionView中所有单元格和视图的布局属性,我们在这里拿到之前设置好的布局属性然后更改,使每一行的视图都居中。

代码如下:

[_dic enumerateKeysAndObjectsUsingBlock:^(NSString *y, NSArray *arr, BOOL * _Nonnull stop) {
        CGFloat width = 0;
        CGFloat originX = 0;
        for (int i=0; i<arr.count; i++) {
            UICollectionViewLayoutAttributes *att = arr[i];
            width += att.frame.size.width;
            if (i == 0) originX = att.frame.origin.x;
        }
        width += (arr.count-1)*_columnSpace;
        CGFloat startX = (kWidth-width)/2.;
        CGFloat cha = startX - originX;
        for (int i=0; i<arr.count; i++) {
            UICollectionViewLayoutAttributes *att = arr[i];
            att.frame = CGRectMake(att.frame.origin.x+cha, att.frame.origin.y, att.frame.size.width, att.frame.size.height);
            [_attributeDic setObject:att forKey:att.indexPath];
        }
    }];

至此,效果已基本达到,如果有更好的方法,欢迎来一起讨论。
Demo摸我

上一篇 下一篇

猜你喜欢

热点阅读