尝试使用集合视图制作标签答案

【问题标题】：Trying to make tags using collection view尝试使用集合视图制作标签
【发布时间】：2022-01-22 05:30:22
【问题描述】：

我试图以编程方式制作这个 collectionView：

https://github.com/shamiul110107/TagView-in-swift

这是我的自定义单元格和视图控制器：

  import UIKit

 class TagCollectionViewCell: UICollectionViewCell {


override init(frame: CGRect) {
    super.init(frame: frame)
    
    self.backgroundColor = .black
// self.layer.cornerCurve = 8.0 NOT WORKING
    sportLabel.clipsToBounds = true
    sportLabel.textAlignment = .center
    
    contentView.addSubview(sportLabel)
    contentView.addSubview(deleteButton)
    
    
    NSLayoutConstraint.activate([
        sportLabel.topAnchor.constraint(equalTo: contentView.topAnchor),
        sportLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        sportLabel.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
        
        deleteButton.topAnchor.constraint(equalTo: contentView.topAnchor),
        deleteButton.bottomAnchor.constraint(equalTo: contentView.bottomAnchor),
        deleteButton.leadingAnchor.constraint(equalTo: sportLabel.trailingAnchor),
        deleteButton.widthAnchor.constraint(equalToConstant: 30)
        
    ])
}


lazy var sportLabel: UILabel = {
    let label = UILabel()
    label.backgroundColor = .lightGray
    label.textColor = .white
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

lazy var deleteButton : UIButton = {
    let button = UIButton()
    button.setImage(UIImage(systemName: "trash.circle.fill")?.withTintColor(UIColor.red), for: .normal)
    button.translatesAutoresizingMaskIntoConstraints = false
    button.backgroundColor = .red
    return button
}()

required init?(coder: NSCoder) {
    fatalError()
}

 }

视图控制器：

 import UIKit

class ViewController: UIViewController {

let arr = ["Ada","Belgrade","San Francisco"]

lazy var collectionView :UICollectionView = {
     let layout = UICollectionViewFlowLayout()
    layout.sectionInset = UIEdgeInsets(top: 40, left: 0, bottom: 10, right: 10)
    layout.minimumLineSpacing = 1
    layout.minimumInteritemSpacing = 1
    let cv = UICollectionView(frame: .zero,collectionViewLayout: layout)
    
    cv.collectionViewLayout = layout
     cv.delegate = self
    cv.dataSource = self
    cv.register(TagCollectionViewCell.self, forCellWithReuseIdentifier: "trainingCell")
    cv.backgroundColor = .blue
    cv.translatesAutoresizingMaskIntoConstraints = false
     return cv
   
}()
override func viewDidLoad() {
    super.viewDidLoad()
    

    view.addSubview(collectionView)
    
    NSLayoutConstraint.activate([

        collectionView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor,constant: 0),
        collectionView.leadingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.leadingAnchor,constant: 10),
        collectionView.trailingAnchor.constraint(equalTo: view.safeAreaLayoutGuide.trailingAnchor,constant: -10),
        collectionView.heightAnchor.constraint(equalTo: view.safeAreaLayoutGuide.heightAnchor,multiplier: 1/3)
    
    ])
    
}


 }
  extension ViewController:  UICollectionViewDataSource, UICollectionViewDelegate,UICollectionViewDelegateFlowLayout {

    func collectionView(_ collectionView: UICollectionView, numberOfSections section: Int) -> Int {
        return 1
    }

func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
    return arr.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "trainingCell", for: indexPath) as! TagCollectionViewCell
    cell.sportLabel.text = arr[indexPath.row]
    
    return cell
}


}

我能做的就是这样：

MyTagView

我不知道为什么单元格重叠以及为什么我无法添加圆角半径。

编辑：当 minimumInteritemSpacing = 50 时

minimumInteritemSpacing Changed to 50

我不知道我的解决方案是不是最好的解决方案，但它以某种方式起作用：

要获得圆形单元格，请添加到 TagCollectionViewCell 覆盖初始化：

   contentView.layer.cornerRadius = 4.0
    contentView.layer.masksToBounds = true
    sportLabel.clipsToBounds = true
    
    
    deleteButton.clipsToBounds = true

我的单元格大小解决方案是这样的。我不得不提到 UIFont.systemFont(ofSize: 23) 在我的情况下是最好的：

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

    return  CGSize(width: arr[indexPath.row].size(withAttributes: [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 23)]).width + 40, height: 40)
    }

我必须将 + 40 添加到宽度，因为我在单元格内也有固定宽度 = 30 的按钮，所以 + 40 最适合。

With all modifications above it looks like this

【问题讨论】：

如果您尝试将minimumInteritemSpacing 增加到 5 或 10，这应该会增加单元格之间的间距。将self.layer.cornerCurve 更改为self.layer.cornerRadius = 8.0，这应该会给你圆角。试着告诉我。
minimumInteritemSpacing 在 50 时起作用，因为只有这样我才有所有单元格之间的间距。如果我尝试使用 20 个带有最准确标签的单元格，则只有一些间距（在我的情况下为“Ada”），并且更长的标签单元格仍然重叠，直到 minimumInteritemSpacing = 50。我不知道为什么。不幸的是 self.layer.cornerRadius = 8.0 也不起作用@ShawnFrank
如果您仍然没有找到解决方案，我会在明天早上更深入地研究。
我自己找到了一些解决方案，我应该发布它吗？或者首先使用我的解决方案编辑帖子，以便您可以查看它@ShawnFrank
如果您的解决方案完全适合您，那么您可以将其发布为答案，以便其他人可以从您的研究和经验中受益。如果您的问题没有完全解决，只需在您的问题中添加您所做的更改以及到目前为止的结果以及尚未解决的问题，我们中的一个人会看看我们是否可以提供帮助。

标签： swift

【解决方案1】：

我不知道我的解决方案是不是最好的解决方案，但它以某种方式起作用：

要获得圆形单元格，请添加到 TagCollectionViewCell 覆盖初始化：

contentView.layer.cornerRadius = 4.0
contentView.layer.masksToBounds = true
sportLabel.clipsToBounds = true
deleteButton.clipsToBounds = true

我的单元格大小解决方案是这样的。我不得不提到 UIFont.systemFont(ofSize: 23) 在我的情况下是最好的：

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

return  CGSize(width: arr[indexPath.row].size(withAttributes: [NSAttributedString.Key.font : UIFont.systemFont(ofSize: 23)]).width + 40, height: 40)
}

我必须将 + 40 添加到宽度，因为我在单元格内也有固定宽度 = 30 的按钮，所以 + 40 最适合。

【讨论】：