集合视图椭圆形自定义单元格

12

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

enter image description here

我不知道如何实现这个,浏览了几个链接但没有得到答案。请指导。 谢谢

更新:我尝试过的是

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] )
}

对于这个设计,但它没有按要求工作,变成了enter image description here


1
那么你的问题到底是什么,只是物品的大小吗? - Wain
4个回答

16

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


总之,这个视图会遇到三个问题:

  1. 自适应大小的 UICollectionView 单元格需要以文本长度为单元格长度
  2. 将 collectionView 单元格居中对齐而不是左右对齐
  3. 子视图有圆角

因此,让我们开始吧:

1)

这有点棘手,并且不那么直截了当。您首先应该让自动布局为您解决问题。因此,在storyboard和xib文件中设计单元格和collectionView,然后在您的控制器类中执行以下操作:

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

正确的做法是例如 viewDidLoad 函数。当然,如果您稍后要覆盖布局,请记得使用 if

然后对于您想要自动调整大小的标签,您需要设置:

cell.titleLabel.preferredMaxLayoutWidth = 50

两个示例中使用的值并不太重要。如果您将estimatedItemSize设置得很低,那么您基本上是在要求自我调整大小。

2)

要做到这一点,您需要覆盖布局类。我强烈建议使用@Alex Koshy答案中的此解决方案:https://dev59.com/8mYr5IYBdhLWcg3wi6zd#38254368

3)

那部分很容易。只需在自定义单元格底部添加子视图,并将单元格视图背景色设置为透明。并像这样在单元格中添加圆角:

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

}

这里是一个输出效果: 在此输入图片描述

这里是包含示例的存储库链接:

https://github.com/JakubMazur/SO39160339

享受吧!


它帮了我很多,谢谢。但还有一些问题不完全符合要求,我正在努力解决。 - iPhone 7
只需在单元格中覆盖 setSelected: 方法即可。 - Jakub
没听懂你说的,另一个问题是单元格之间的间距设置为10,但不想在一行中显示三个单元格。在6和6+上,显示了三行,但间距比10大得多,在5上只有两个单元格。 - iPhone 7
好的,你需要弄清楚你想要实现什么。它们不能自动适应文本,并且每行始终有3个单元格。如果你在同一行中放置3个非常长的单词,会发生什么?它们应该用中间点缩小吗?还是将第三个单词留在下一行?请注意,单词长度将不同。 - Jakub
是的,这是flowLayout的问题。实现上面列表中的第二点,就可以解决问题了。Flow layout将物品对齐到左侧和右侧。您需要居中对齐,然后storyboards中的插图将应用于中心。 - Jakub
显示剩余4条评论

1
将图片视图/按钮(您选择)添加到集合视图单元格中,其框架大小与整个单元格一样大,使单元格背景透明,将所需的颜色添加到按钮上,并将按钮的layer.cornerradius设置为您想要的椭圆形大小(例如,按钮高度的1/2是完美的圆形)。

1
如果您想在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个连续的单元格。 - iPhone 7
  • (CGSize)collectionView:(UICollectionView *)collectionView layout:(UICollectionViewLayout *)collectionViewLayout sizeForItemAtIndexPath:(NSIndexPath *)indexPath; 在这个方法中,返回collectionview.width/3...它将在一行中给你3个单元格。 只有当标签文本大小固定时才这样做,如果文本大小增加得更多会怎么样呢?
- Arpit Dhamane
如果您想在一行中放置三个单元格,请前往我们的main.storyboard,在viewController中选择collectionView,然后进入属性窗格中的大小检查器。在大小检查器中设置单元格和行之间的最小间距。根据您的要求调整该值,希望这可以解决您的问题。 - Padamavthi

-1
获取单元格对象
在内容视图上添加子视图(容器视图)
设置容器的边框半径(例如2)
在容器内添加其他UI元素。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接