UICollectionView椭圆形自定义单元格

Question

如何使用自定义单元格在UICollectionView中生成椭圆形单元格。以下是我想要实现的图像。

不知道如何实现这一点，经历了几个链接但没有得到。 请指导。 感谢

更新：我尝试的是

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize {


    return CGSize(width: collectionView.frame.size.width/3.0 - 8, height: collectionView.frame.size.width/2.5[![enter image description here][2]][2] )
}

对于这种设计，但它不能按要求工作，它就变成了

Answer 1

TL; DR :(示例可在此处找到：https://github.com/JakubMazur/SO39160339）

Phew，你会遇到这个观点的3个问题：

1. 自我调整UICollectionView单元格，将文本作为单元格长度
2. 将collectionView单元格对齐到中心而不是左右
3. 子视图中的圆角

让我们开始吧：

<强> 1）

这有点棘手而且不那么简单。你应该做的第一件事就是让自动布局为你做好准备。因此，在storyboard和xib文件中设计单元格和collectionView，然后在控制器类中设计：

if let flowLayout = self.collectionView.collectionViewLayout as? UICollectionViewFlowLayout {
    flowLayout.estimatedItemSize = CGSizeMake(1, 1)
}

正确的方法是例如viewDidLoad func。当然，如果您稍后重写布局，请记住此if。

然后，对于您想要自我调整大小的标签，您需要设置：

cell.titleLabel.preferredMaxLayoutWidth = 50

您在这两个示例中使用的值并不重要。如果将estimateItemSize设置为低，则基本上要求自我调整大小。

<强> 2）

为此，您需要覆盖布局类。我强烈建议您使用@Alex Koshy回答的解决方案https://stackoverflow.com/a/38254368/1317394。

第3）

这部分很简单。只需在自定义单元格的底部添加子视图，并将单元格视图背景颜色设置为透明。并在单元格中添加角半径，如下所示：

override func prepareForReuse() {
    self.roundedView.layer.cornerRadius = self.frame.size.height/2

}

这是输出效果：

以下是使用此示例的存储库链接：

https://github.com/JakubMazur/SO39160339

享受！

Answer 2

将imageview / button（您的选择）添加到您的集合视图单元格中，框架与整个单元格一样大，使单元格背景清晰，将您想要的颜色添加到按钮，并将按钮的layer.cornerradius设置为精确的椭圆形你想要的（按钮高度的1/2是精确的圆圈）。

Answer 3

如果您正在尝试在UIcollectionview中创建一个单元格，则会转到

然后你可以尝试这个

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let cell:CellCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("MyCell", forIndexPath: indexPath)as! CellCollectionViewCell
    cell.backgroundColor=UIColor.blueColor()
    cell.layer.cornerRadius=26 //try with different values untill u get the rounded corners
    cell.layer.masksToBounds=true
    cell.cellLabel.text=label[indexPath.row]



    return cell
}

Answer 4

获取单元格对象

在contentView上添加子视图（容器视图）

设置容器的边框半径（例如2）

在容器中添加其他UI元素。