iOS搜索记录，横着动态排布

先放一张效果图。

效果图

   实现思路，使用UICollectionView，根据每个cell的文字来计算cell的size，然后自定义 UICollectionViewFlowLayout，修改item的frame。

1、创建CollectionView，在代理中根据文字计算cell的宽度

funccollectionView(_collectionView:UICollectionView, layout collectionViewLayout:UICollectionViewLayout, sizeForItemAt indexPath:IndexPath) ->CGSize{

        letmodel =dataSources[indexPath.row]

        letwidth =SearchingCollectionViewCell.getCellW(with: modelasNSString)

                ///防止宽度 超过collectionView的宽度

        returnCGSize.init(width:  min(width, collectionView.frame.width), height:30)

    }

staticfuncgetCellW(with title:NSString) ->CGFloat{

        lettitleSize = title.size(withAttributes: [.font:UIFont.systemFont(ofSize:15)])

        returntitleSize.width+20

    }

2、自定义UICollectionViewFlowLayout

<small>classItemLeftCollectionViewFlowLayout:UICollectionViewFlowLayout{

    overridevarflipsHorizontallyInOppositeLayoutDirection:Bool{

        return true

    }

    overridefunclayoutAttributesForElements(in rect:CGRect) -> [UICollectionViewLayoutAttributes]? {

        ///默认所有的cell 的间距相同，且右边靠边， 所以需要对所有的cell向左移

        letsupAttributes =super.layoutAttributesForElements(in: rect)

       // return supAttributes

        guardlet  supAtts = supAttributes  else{

            returnsupAttributes

        }

        varcellX:CGFloat=0

        forlayoutAttrinsupAtts {

            iflayoutAttr.representedElementCategory== .cell{

                varlayFrame = layoutAttr.frame

                iflayFrame.origin.x==0{

                    cellX = layFrame.width

                    layoutAttr.frame= layFrame

                    continue

                }

                iflayFrame.origin.x< cellX{

                    layFrame.origin.x=0

                    cellX = layFrame.width

                    layoutAttr.frame= layFrame

                    continue

                }

                ifcellX >0{

                    let collDele = collectionView?.delegate as? UICollectionViewDelegateFlowLayout

                    ifletminInteritemSpace = collDele?.collectionView?(collectionView!, layout:self, minimumInteritemSpacingForSectionAt: layoutAttr.indexPath.section){

                        ///如果有代理 就用代理的值

                         layFrame.origin.x= cellX + minInteritemSpace

                    }else{

                        layFrame.origin.x= cellX +minimumInteritemSpacing

                    }

                }else{

                    // cellX = 0时

                    layFrame.origin.x=0

                }

                cellX = layFrame.origin.x+ layFrame.width

                layoutAttr.frame= layFrame

            }

        }

        returnsupAttributes

    }</small>

这是使用系统UICollectionViewFlowLayout的效果图

系统UICollectionViewFlowLayout的效果图

这是使用自定义后的效果图

使用自定义后的效果图

github