Swift：如何将自定义 UICollectionViewCell 设置为圆形？

Posted 2023-03-11

【中文标题】Swift：如何将自定义 UICollectionViewCell 设置为圆形？

【英文标题】：Swift : How to set Custom UICollectionViewCell as circle?

【发布时间】：2016-09-01 13:53:42

【问题描述】：

我自定义了包含UILabel 和UIImage 的UICollectionViewCell。 我想将单元格设置为循环格式。

注意：- sizeForItemAtIndexPath 由于自动布局，无法更改。

下面是我用过的代码：

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

          return CGSize(width: (self.objKeypadCollectionView.frame.size.width/3)-10, height: (self.objKeypadCollectionView.frame.size.height/4)-10)
    

func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 

        let objKeypadCollectionViewCell = collectionView.dequeueReusableCellWithReuseIdentifier("idKeypadCollectionViewCell", forIndexPath: indexPath) as! KeypadCollectionViewCell

        if (self.numberArray[indexPath.item])=="asda" 
            objKeypadCollectionViewCell.lblNumber.text = ""
            objKeypadCollectionViewCell.imgPrint.hidden = false
        
        else if (self.numberArray[indexPath.item])=="Derterel" 
            objKeypadCollectionViewCell.lblNumber.text = self.numberArray[indexPath.item]
            objKeypadCollectionViewCell.imgPrint.hidden = true
        
        else 
            objKeypadCollectionViewCell.imgPrint.hidden = true
            objKeypadCollectionViewCell.lblNumber.text = self.numberArray[indexPath.item]
            objKeypadCollectionViewCell.layer.borderColor = UIColor.lightGrayColor().CGColor
            objKeypadCollectionViewCell.layer.borderWidth = 1
            objKeypadCollectionViewCell.layer.cornerRadius = objKeypadCollectionViewCell.frame.size.width/2
        
        return objKeypadCollectionViewCell
    

【问题讨论】：

它的图像或按钮或collectionview单元格

好吧，如果你真的不能改变你的 sizeForItemAtIndexPath 实现，那么实现你想要的最简单的方法是向你的单元格添加一个虚拟矩形视图并在其上设置你的边框和角半径.

你为什么不简单地改变键盘类型来做到这一点？

@Anbu.Karthik : 这是一个标签，其cornerRadius被设置为圆形

@Desdenova : 没找到你

【参考方案1】：

这是我的 UICollectionView 示例，您可以检查您的解决方案。我正在使用情节提要设置带有 AutoLayout 的主要 collectionView。另外，附上一些截图以澄清结果。

有一个方法叫做drawRect()。您可以在您的 collectionView Cell 类中使用它来完成 UI 工作。

现在这是我的代码。

1. ViewController.swift //就像你的普通的UIViewController，没有别的... :)

//
//  ViewController.swift
//  CollectionCheckCircle
//
//  Created by Tuhin Samui on 02/09/16.
//  Copyright © 2016 Tuhin Samui. All rights reserved.
//

import UIKit

class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource 

    @IBOutlet weak var collectionView: UICollectionView!

    override func viewDidLoad() 
        super.viewDidLoad()
        collectionView.delegate = self
        collectionView.dataSource = self
    

    override func didReceiveMemoryWarning() 
        super.didReceiveMemoryWarning()
        // Dispose of any resources that can be recreated.
    


    func numberOfSectionsInCollectionView(collectionView: UICollectionView) -> Int 
        return 1
    

    func collectionView(collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int 
        return 200
    


    func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell 
        let cellOfCollection = collectionView.dequeueReusableCellWithReuseIdentifier("cellCollectionView", forIndexPath: indexPath) as! CollectionViewCell

        return cellOfCollection
    

2。 CollectionViewCell.swift //只是一个UICollectionViewCell 类用于出列单元格。

//
//  CollectionViewCell.swift
//  CollectionCheckCircle
//
//  Created by Tuhin Samui on 02/09/16.
//  Copyright © 2016 Tuhin Samui. All rights reserved.
//

import UIKit

class CollectionViewCell: UICollectionViewCell 
    @IBOutlet weak var imageView: UIImageView!

    override func drawRect(rect: CGRect)  //Your code should go here.
        super.drawRect(rect)
        self.layer.cornerRadius = self.frame.size.width / 2
    

注意：对于此 collectionView，我没有使用任何 flowlayout 或 UICollectionViewFlowLayout 或 sizeForItemAtIndexPath 内的单元格大小。你也可以添加这些东西。请根据您的需要做一些实验。顺便说一句，我正在使用 Xcode 7.3.1 和 Swift 2.2。

以下是模拟器上 collectionView 设置和结果的故事板屏幕截图。

希望这会有所帮助。如有错误请见谅。

【参考方案2】：

尝试将角半径设为 height/2，确保单元格应具有相同的高度和宽度。

cell.layer.cornerRadius = min(cell.frame.size.height, cell.frame.size.width) / 2.0

cell.layer.masksToBounds = true

请告诉我这是否适合您。

【讨论】：

高度和宽度以编程方式生成。它因设备大小而异

那么 min fun 会小心的。请检查并告诉我。

这不起作用。它显示椭圆形而不是圆形。

那么您的视图必须是正方形的。现在您可以在单元格上添加另一个视图，并使用相同的解决方案将其设为圆形。

drawRect 方法是这里的关键。

【参考方案3】：

问题是单元格的width 和height 在运行时会根据您的屏幕宽度进行更改，因此要解决此问题，请在您的单元格内添加一个正方形UIView 并在cellForItemAtIndexPath 方法中使用该UIView让它像这样的圆形视图。

objKeypadCollectionViewCell.circleView.layer.borderColor = UIColor.lightGrayColor().CGColor
objKeypadCollectionViewCell.circleView.layer.borderWidth = 1
objKeypadCollectionViewCell.circleView.layer.cornerRadius = objKeypadCollectionViewCell.frame.size.width/2
objKeypadCollectionViewCell.circleView.layer.masksToBounds = true

【参考方案4】：

通过给出这条线来计算单元格的高度

return CGSize(width: (self.objKeypadCollectionView.frame.size.width/3)-10, height: (self.objKeypadCollectionView.frame.size.height/4)-10)

你无法实现你想要的。使用纵横比技术。对于单元格的高度和宽度，请使用您的屏幕宽度，然后根据该纵横比更新您的单元格高度和宽度，然后此行才有效....

如果您需要澄清，请联系我 iammubin38

【参考方案5】：

使用这个更新的单元格。

class KeypadCollectionViewCell: UICollectionViewCell 

    var circularBGLayer: CALayer!

    override func awakeFromNib() 
        super.awakeFromNib()
        backgroundColor = UIColor.clearColor()
        circularBGLayer = CALayer()
        circularBGLayer.backgroundColor = UIColor.lightGrayColor().CGColor
        layer.addSublayer(circularBGLayer)
    

    override func layoutSubviews() 
        super.layoutSubviews()

        var frame = self.bounds
        frame.size.width = min(frame.width, frame.height)
        frame.size.height = frame.width
        circularBGLayer.bounds = frame
        circularBGLayer.cornerRadius = frame.width*0.5
        circularBGLayer.position = CGPoint(x: frame.midX, y: frame.midY)
    

【参考方案6】：

你可以试试 UICollectionViewDelegateFlowLayout ....

先添加委托。

 class ViewController: UIViewController, UICollectionViewDelegate, UICollectionViewDataSource, UICollectionViewDelegateFlowLayout 

        func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAtIndexPath indexPath: NSIndexPath) -> CGSize 
            let collectionWidth = CGRectGetWidth(collectionView.bounds);
                var itemWidth = collectionWidth / 3 - 1;
                return CGSizeMake(itemWidth, itemWidth);
            
        

        func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumInteritemSpacingForSectionAtIndex section: Int) -> CGFloat 
            return 1
        

        func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, minimumLineSpacingForSectionAtIndex section: Int) -> CGFloat 
            return 1
        
    

【参考方案7】：

嘿，检查这段代码。

func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout,sizeForItemAtIndexPath indexPath:NSIndexPath ) -> CGSize 
CGSize size = CGSize(width: (self.objKeypadCollectionView.frame.size.width/3)-10, height: (self.objKeypadCollectionView.frame.size.height/4)-10);
CGFloat width = size.width;
CGFloat height = size.height;
  if (width < height) 
     height = width;
    else 
     width = height;
   
   return size;

【参考方案8】：

在 Swift 5 中

import UIKit
import Kingfisher

class StoryCollectionViewCell: UICollectionViewCell 
    
    override func awakeFromNib() 
        super.awakeFromNib()
        // Initialization code
    
    
// this override can make the circle

    override func draw(_ rect: CGRect) 
        super.draw(rect)
        self.layer.cornerRadius = self.frame.size.width / 2