iOS-Swift-SnapKit实现历史记录自由展示

历史搜索.pic.jpg 这是闲鱼上的搜索记录展示，每个单独的item的宽度没有限定，由每个item内部的宽度撑开，文字展示完整，每个item之间等距，靠左边依次排序，我选择用UICollectionView来实现，实现得有瑕疵，可全部撑开cell展示，不能靠左展示，还需要优化。 视图层

不废话，上代码：
cell中直接添加的label，label使用SnapKit自动布局设置与父视图的边距约束，

import UIKit
import SnapKit
class TagCell: UICollectionViewCell {
    lazy var tagLabel: UILabel = {
        let label = UILabel()
        label.textColor = UIColor.black
        label.font = UIFont.systemFont(ofSize: 16)
        label.numberOfLines = 1
        label.textAlignment = .center
        return label
    }()
    override init(frame: CGRect) {
        super.init(frame: frame)
        self.contentView.addSubview(tagLabel)
        tagLabel.snp.makeConstraints { (make) in
            make.left.equalToSuperview().offset(10)
            make.top.equalToSuperview().offset(5)
            make.center.equalToSuperview()
        }
        self.contentView.backgroundColor = UIColor(red: 246/255, green: 246/255, blue: 246/255, alpha: 1)
    }
    
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

设置类继承UICollectionViewDelegateFlowLayout，由此可使用方法

func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {

具体使用见下，设置代理、数据源、cell数量、cell中label展示文字

import UIKit

class TagCollection: UICollectionView,UICollectionViewDelegate,UICollectionViewDataSource,UICollectionViewDelegateFlowLayout {
    
    var itemString: [String] = [] {
        didSet {
            self.reloadData()
        }
    }
    override init(frame: CGRect, collectionViewLayout layout: UICollectionViewLayout) {
        super.init(frame: frame, collectionViewLayout: layout)
        self.register(TagCell.self, forCellWithReuseIdentifier: "cell")
        self.dataSource = self
        self.delegate = self
        self.backgroundColor = UIColor.white
    }
    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return itemString.count
    }
    
    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath) as! TagCell
        cell.tagLabel.text = self.itemString[indexPath.row]
        return cell
    }
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        return CGSize(width: 0.01, height: 50)
    }
}

viewcontroller中添加collectionview，这里要注意的是collectionview的初始化中collectionViewLayout参数要设置为UICollectionViewFlowLayout()，设置最小间隔和最小行距，和预估cell的大小，iOS 10.0版本之前的需要指定预估大小，10.0之后的版本使用UICollectionViewFlowLayout.automaticSize获取，初始化完成后设置数据。

import UIKit
import SnapKit
class ViewController: UIViewController {
    let arr:[String] = ["电饼铛",
                        "洗碗机",
                        "兔笼子",
                        "豆浆机",
                        "破壁机",
                        "快餐保温",
                        "煎饼"]
    var tagCollectionView: TagCollection? = nil
    override func viewDidLoad() {
        super.viewDidLoad()
        let frame = CGRect(x: 20, y: 100, width: self.view.bounds.width-40, height: self.view.bounds.height-300)
        let layout = UICollectionViewFlowLayout()
        layout.minimumLineSpacing = 5
        layout.minimumInteritemSpacing = 5
        layout.sectionInset = UIEdgeInsets(top: 5, left: 5, bottom: 5, right: 5)
        if #available(iOS 10.0, *) {
            layout.estimatedItemSize = UICollectionViewFlowLayout.automaticSize
        }else {
            layout.estimatedItemSize = CGSize(width: 50, height: 50)
        }
        self.tagCollectionView = TagCollection(frame: frame, collectionViewLayout: layout)
        self.view.addSubview(self.tagCollectionView ?? UICollectionView())
        self.tagCollectionView!.itemString = self.arr
    }
}

这次比较受益的是学习到了SnapKit自动布局的使用和UICollectionViewFlowLayout()的设置，相比于以往使用定值距离设置，SnapKit设置更灵活。
demo地址