如何为不同大小的集合视图单元格设置角半径

Question

我想要宽度基于 label/text 长度的椭圆形收集单元格，但我无法让所有单元格看起来都呈椭圆形。我不知道如何根据标签的文本长度调整大小。

我基本上是想得到类似下面我在另一个 post 上看到的 blank/pink 图片的东西，但解决方案没有用。我还添加了我的视图控制器当前的样子。

1) 如何调整大小以正确获得椭圆形以及 2) 为什么某些单元格之间的空间较长，我该如何解决？

Ideal Pic

Current Controller

Storyboard cell （标签宽度设置为150）

class HobbiesViewController: UIViewController, UICollectionViewDataSource, UICollectionViewDelegate{

    @IBOutlet weak var collectionView: UICollectionView!

    var items = ["karateeeeeeeeeee", "signup", "last", "madur", "open", "somelongword", "nice", "looooooooong", "karate", "karate","karate", "signup", "last", "madur"]

    override func viewDidLoad() {
        super.viewDidLoad()
    }

    override func didReceiveMemoryWarning() {
        super.didReceiveMemoryWarning()
    }

    func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
        return self.items.count
    }

    func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {

        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "hobbyCell", for: indexPath) as! HobbiesViewCell

        cell.label.text = self.items[indexPath.item]
        cell.backgroundColor=UIColor.blue //try with different values untill u get the rounded corners
        cell.layer.cornerRadius = cell.bounds.size.height / 2
        cell.layer.masksToBounds=true

        return cell
    }
}

extension HobbiesViewController: UICollectionViewDelegateFlowLayout {
    func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize {
        let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "hobbyCell", for: indexPath) as! HobbiesViewCell
        cell.label.text = items[indexPath.row]
        cell.label.sizeToFit()
        return CGSize(width: cell.label.frame.width + 10 , height: 70)
    }
}

Answer 1

Ans 1. 在设置集合视图单元格的宽度时，您需要为单元格设置一些最小宽度，以便单元格不会变得太小以至于看起来像一个圆圈。您当前的高度是 70，因此您应该保持一个条件，即如果 cell.label.frame.width + 10 小于 160，则将单元格的大小保持为 160。

Ans 2. 集合视图本身根据提供给集合视图的框架和单元格的大小来管理单元格之间的间距。下面的link可能对设置间距有帮助。

Cell spacing in UICollectionView

从屏幕截图中我可以看到您的字体大小也与预期的输出不同，所以您也可以检查一下。

希望这对您有所帮助。

如何为不同大小的集合视图单元格设置角半径

How to Set Corner Radius for Collection View Cells of Different Size

swift

uicollectionview

cell

uicollectionviewcell

cornerradius