UICollectionView 椭圆形自定义单元格

Posted 2023-03-13

【中文标题】UICollectionView 椭圆形自定义单元格

【英文标题】：UICollectionView oval shaped custom cell

【发布时间】：2016-08-26 07:09:28

【问题描述】：

如何使用自定义单元格在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] )

对于这个设计，但它没有按要求工作，它变成

【问题讨论】：

那么你的问题到底是什么，只是物品的大小？

【参考方案1】：

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

---

唷，这个视图会遇到 3 个问题：

自行调整 UICollectionView 单元格大小，将文本作为单元格长度 collectionView 单元格居中对齐，而不是左右对齐 子视图中的圆角

让我们开始吧：

1)

这有点棘手，也不是那么简单。您应该做的第一件事就是让自动布局为您解决问题。所以在你的故事板和xib文件中设计单元格和collectionView，然后在你的控制器类中：

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

正确的做法是例如viewDidLoad func。当然，如果您稍后要覆盖布局，请记住这个 if。

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

cell.titleLabel.preferredMaxLayoutWidth = 50

您在这两个示例中使用的值并不重要。如果您将estimatedItemSize 设置得较低，则基本上是在要求自己调整尺寸。

2)

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

3)

这部分很简单。只需在自定义单元格底部添加子视图并将单元格视图背景颜色设置为透明即可。并像这样在单元格中添加角半径：

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

这是一个输出效果：

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

https://github.com/JakubMazur/SO39160339

享受吧！

【讨论】：

这对我很有帮助，谢谢，但有些问题并不完全符合要求，正在解决。

你能告诉我如何在选择单元格时改变roundedView的颜色吗？我试过了，但在didselectmethod中对我不起作用

只需覆盖单元格中的setSelected: 方法

没有得到你，另一个问题是单元格之间的间距将其设置为 10，但不想连续显示三个单元格。在 6 和 6+三行显示，但间距比 10 大并且在 5 上连续只有两个单元格。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets let marginStaticValue : CGFloat = 10 return UIEdgeInsetsMake(0, marginStaticValue, 0, marginStaticValue)

【参考方案2】：

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

【参考方案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

【讨论】：

26 适合椭圆形，但不能连续获得 3 个单元格

- (CGSize)collectionView:(UICollectionView *)collectionView 布局:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath;在此方法中返回 collectionview.width/3...它将在一行中为您提供 3 个单元格。只有在标签文本大小固定时才这样做，如果文本大小增加得更多怎么办。

如果你想连续三个单元格转到我们的 main.storyboard 选择 collectionView 后，在 viewController 中选择 collectionView，在大小检查器的属性窗格中转到 size Inspector 为调用和行设置最小单元格间距.根据您的要求调整值希望这可以解决您的问题

【参考方案4】：

获取一个单元格对象

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

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

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