欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

UICollectionView的水平流水布局自定义layout

程序员文章站 2023-11-09 14:01:34
最近做合创共美的商城项目,遇到发货地址的不配送地区,是做一个弹出框,弹出框的布局是根据地名字数长短不齐的标签。 本来也可以用tableview来做的。只不过多建几个tableviewcell就可以了。因为除了需要动画效果,所有的collection view都可以用tableview来做。 但是觉得 ......

最近做合创共美的商城项目,遇到发货地址的不配送地区,是做一个弹出框,弹出框的布局是根据地名字数长短不齐的标签。

UICollectionView的水平流水布局自定义layout

本来也可以用tableview来做的。只不过多建几个tableviewcell就可以了。因为除了需要动画效果,所有的collection view都可以用tableview来做。

但是觉得还是需要做一下。因为以前弄过的都很模糊了。

所以先下了个demo。苹果开发者上面的sample demo-CollectionViewTransition:

   UICollectionView的水平流水布局自定义layout  UICollectionView的水平流水布局自定义layout

这是个带动画效果的。

UICollectionView的水平流水布局自定义layout

collectionview的cell先结合在一起,同样的中心点,动画的时候以不同的起始角度旋转动画,改变中心点size或frame。

 

UICollectionView的水平流水布局自定义layout

动画参数:

 以上一次的中心点加一个量。 

 

UICollectionView的水平流水布局自定义layout

当然这两种layout转换也需要定义一个UICollectionViewTransitionLayout

并让collectionview知道。

  

UICollectionView的水平流水布局自定义layout

。。。。。。。。。。。。。。。。。。。。

然而,我并不需要动画效果。所以只需定义一个UICollectionViewLayout就行。

然后一个一个的cell的frame赋值就可以了。

 

UICollectionView的水平流水布局自定义layout

在它的

- (UICollectionViewLayoutAttributes *)layoutAttributesForItemAtIndexPath:(NSIndexPath *)indexPath

方法里获取每个cell 的属性:

 UICollectionViewLayoutAttributes *attrs = [UICollectionViewLayoutAttributes layoutAttributesForCellWithIndexPath:indexPath];

修改每个attrs的frame或中心点size,像这样: 

 

UICollectionView的水平流水布局自定义layout

最后别忘了return一下collection view的size大小,防止拉不动。大小需要调试到合适的大小。

UICollectionView的水平流水布局自定义layout

 

然后赋给viewcontroller的collection view就可以了。 

UICollectionView的水平流水布局自定义layout

在这个方法里fo.length指字符串地名的长度。大于3个字宽度就给102,小于等于就给80。总长度fje大于collectionview的宽度减去当前的cell宽度时就conn++,换到下一行。

其中SizeModel是为了方便传数组过去建的。 

UICollectionView的水平流水布局自定义layout

效果就是这样: 

UICollectionView的水平流水布局自定义layout

 

 至于每个地名标签的黑色边框,给每个cell加一下约束就好了。因为本身的底色时深灰色的,露出一点就时边框了。哈哈哈哈哈

 

UICollectionView的水平流水布局自定义layout