你的小可愛已上線
淘寶點(diǎn)擊商品可以進(jìn)行商品的選擇比如大小之類的堪滨，這類可以選擇用collectionView來寫咐刨，下面我講述一下我的項(xiàng)目中所用的界面做一個(gè)簡單的分析和實(shí)現(xiàn)想法昙楚，如果有更好的想法可以分享給我刽肠。
效果.gif
規(guī)格上面的是一個(gè)固定的view纯命，規(guī)格下面第一個(gè)粉框框是collectionView愿题，根據(jù)文字大小實(shí)現(xiàn)動(dòng)態(tài)顯示损俭，數(shù)量一個(gè)框是UICollectionReusableView可以設(shè)為footer
先來分析下如何是實(shí)現(xiàn)動(dòng)態(tài)獲取
string長度
//collectionItemSize
func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
return CGSize.init(width: self.getWidthWithText(text: self.dataArr[indexPath.row] as NSString, height: 30*W, font: 12*W)+20*W, height: 30*W)
}
//獲取長度
func getWidthWithText(text:NSString,height:CGFloat,font:CGFloat) -> CGFloat{
let size = text.boundingRect(with: CGSize.init(width: CGFloat(MAXFLOAT), height: height), options: NSStringDrawingOptions.usesLineFragmentOrigin, attributes: [NSAttributedStringKey.font : UIFont.systemFont(ofSize: font) ], context: nil)
return size.width
}
進(jìn)行collectionItemSize寬度賦值，如果是網(wǎng)絡(luò)數(shù)據(jù)我們可以進(jìn)行再model其中加一個(gè)屬性為width把這個(gè)獲取到string寬度進(jìn)行封存潘酗，在cell內(nèi)賦值時(shí)候要對這個(gè)label的寬度重新賦值杆兵，實(shí)現(xiàn)動(dòng)態(tài)顯示寬度。
再來分析下如何實(shí)現(xiàn)單選問題仔夺，這個(gè)問題就很好解決創(chuàng)建一個(gè)全局變量cell琐脏，當(dāng)每次點(diǎn)擊時(shí)候進(jìn)行一次賦值和樣式改變就好了，我還是附上代碼
func collectionView(_ collectionView: UICollectionView, didSelectItemAt indexPath: IndexPath) {
let cell = collectionView.cellForItem(at: indexPath) as!XBSetAddGoodsCollectionViewCell
if (self.selectCell != cell) {
cell.titleLable.backgroundColor = #colorLiteral(red: 0.9921568627, green: 0.5921568627, blue: 0.3254901961, alpha: 1)
cell.titleLable.textColor = UIColor.white
if self.selectCell != nil {
selectCell.titleLable.backgroundColor = #colorLiteral(red: 0.9647058824, green: 0.9647058824, blue: 0.9647058824, alpha: 1)
selectCell.titleLable.textColor = LabelColor_51
}
selectCell = cell
}else{
cell.titleLable.backgroundColor = #colorLiteral(red: 0.9921568627, green: 0.5921568627, blue: 0.3254901961, alpha: 1)
cell.titleLable.textColor = UIColor.white
selectCell = cell
}
}
那么有人肯定問了，你的cell為何可以居左面日裙，這個(gè)問題嘛 網(wǎng)上很多解決辦法 畢竟都是大佬寫好的我也不想自己寫吹艇，畢竟我不是大佬，只是一個(gè)搬磚的昂拂，我就拿來搬了這樣我把方法也分給大家吧受神！到底是哪個(gè)大佬我也忘了，光顧復(fù)制了格侯，哈哈哈哈哈鼻听！
1.首先你創(chuàng)建一個(gè)繼承UICollectionViewFlowLayout的類
/// 對齊方向的枚舉, 可拓展, 命名可根據(jù)自己喜好
enum AlignType : NSInteger {
case left = 0
case center = 1
case right = 2
}
class CollectionViewAlignFlowLayout: UICollectionViewFlowLayout {
//兩個(gè)Cell之間的距離
var betweenOfCell : CGFloat{
didSet{
self.minimumInteritemSpacing = betweenOfCell
}
}
//cell對齊方式
var cellType : AlignType = AlignType.center
//在居中對齊的時(shí)候需要知道這行所有cell的寬度總和
var sumCellWidth : CGFloat = 0.0
override init() {
betweenOfCell = 5.0
super.init()
scrollDirection = UICollectionViewScrollDirection.vertical
minimumLineSpacing = 5
sectionInset = UIEdgeInsetsMake(5, 5, 5, 5)
}
convenience init(_ cellType:AlignType){
self.init()
self.cellType = cellType
}
convenience init(_ cellType: AlignType, _ betweenOfCell: CGFloat){
self.init()
self.cellType = cellType
self.betweenOfCell = betweenOfCell
}
override func layoutAttributesForElements(in rect: CGRect) -> [UICollectionViewLayoutAttributes]? {
let layoutAttributes_super : [UICollectionViewLayoutAttributes] = super.layoutAttributesForElements(in: rect) ?? [UICollectionViewLayoutAttributes]()
let layoutAttributes:[UICollectionViewLayoutAttributes] = NSArray(array: layoutAttributes_super, copyItems:true)as! [UICollectionViewLayoutAttributes]
var layoutAttributes_t : [UICollectionViewLayoutAttributes] = [UICollectionViewLayoutAttributes]()
for index in 0..<layoutAttributes.count{
let currentAttr = layoutAttributes[index]
let previousAttr = index == 0 ? nil : layoutAttributes[index-1]
let nextAttr = index + 1 == layoutAttributes.count ?
nil : layoutAttributes[index+1]
layoutAttributes_t.append(currentAttr)
sumCellWidth += currentAttr.frame.size.width
let previousY :CGFloat = previousAttr == nil ? 0 : previousAttr!.frame.maxY
let currentY :CGFloat = currentAttr.frame.maxY
let nextY:CGFloat = nextAttr == nil ? 0 : nextAttr!.frame.maxY
if currentY != previousY && currentY != nextY{
if currentAttr.representedElementKind == UICollectionElementKindSectionHeader{
layoutAttributes_t.removeAll()
sumCellWidth = 0.0
}else if currentAttr.representedElementKind == UICollectionElementKindSectionFooter{
layoutAttributes_t.removeAll()
sumCellWidth = 0.0
}else{
self.setCellFrame(with: layoutAttributes_t)
layoutAttributes_t.removeAll()
sumCellWidth = 0.0
}
}else if currentY != nextY{
self.setCellFrame(with: layoutAttributes_t)
layoutAttributes_t.removeAll()
sumCellWidth = 0.0
}
}
return layoutAttributes
}
/// 調(diào)整Cell的Frame
///
/// - Parameter layoutAttributes: layoutAttribute 數(shù)組
func setCellFrame(with layoutAttributes : [UICollectionViewLayoutAttributes]){
var nowWidth : CGFloat = 0.0
switch cellType {
case AlignType.left:
nowWidth = self.sectionInset.left
for attributes in layoutAttributes{
var nowFrame = attributes.frame
nowFrame.origin.x = nowWidth
attributes.frame = nowFrame
nowWidth += nowFrame.size.width + self.betweenOfCell
}
break;
case AlignType.center:
nowWidth = (self.collectionView!.frame.size.width - sumCellWidth - (CGFloat(layoutAttributes.count - 1) * betweenOfCell)) / 2
for attributes in layoutAttributes{
var nowFrame = attributes.frame
nowFrame.origin.x = nowWidth
attributes.frame = nowFrame
nowWidth += nowFrame.size.width + self.betweenOfCell
}
break;
case AlignType.right:
nowWidth = self.collectionView!.frame.size.width - self.sectionInset.right
for var index in 0 ..< layoutAttributes.count{
index = layoutAttributes.count - 1 - index
let attributes = layoutAttributes[index]
var nowFrame = attributes.frame
nowFrame.origin.x = nowWidth - nowFrame.size.width
attributes.frame = nowFrame
nowWidth = nowWidth - nowFrame.size.width - betweenOfCell
}
break;
}
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
}
2.聲明一個(gè)全局變量var flowlayout: CollectionViewAlignFlowLayout!并且實(shí)現(xiàn)代理就好，完事联四！
flowlayout = CollectionViewAlignFlowLayout(AlignType.left, 10*W)
flowlayout.minimumLineSpacing = 10*W
flowlayout.minimumInteritemSpacing = 15*W
flowlayout.sectionInset = UIEdgeInsets.init(top: 10*W, left: 10*W, bottom: 10*W, right: 10*W)
let collectionView = UICollectionView(frame: CGRect(x:0, y: 0, width:0, height:0), collectionViewLayout: flowlayout)
我的git demo地址：https://github.com/sunrose11/CollectionViewShopCart
下面的加減號(hào) 我是用的別人的 還是那句話自己寫的有bug撑碴，這個(gè)哥們的寫的很好而且很多樣子，就一個(gè)類的代碼量 我很是喜歡朝墩。給大家他的git：https://github.com/jkpang
