iOS搜索记录，横着动态排布
2018-07-12 本文已影响27人
呼呼兔
先放一张效果图。
效果图
实现思路，使用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的效果图
这是使用自定义后的效果图
使用自定义后的效果图
