如何在 iOS TableViewCell 上实现圆角图像？

Posted 2023-03-04

【中文标题】如何在 iOS TableViewCell 上实现圆角图像？

【英文标题】：How to achieve rounded image on iOS TableViewCell?

【发布时间】：2018-04-06 18:34:45

【问题描述】：

我正在尝试以这种方式将圆形图像附加到我的自定义表格单元格中：

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell 
    let content : Content = contentsCollection.contents[indexPath.row]
    let channel : Channel = contentsCollection.channel(withId: content.channel!.id)

    let cell = tableView.dequeueReusableCell(withIdentifier: "ContentCell") as! ContentCell
    cell.layoutSubviews()

    let channelPicture = URL(string: channel.picture)

    cell.channelImageView.kf.setImage(with: channelPicture)

    //Rounded image
    cell.channelImageView.layer.cornerRadius = cell.channelImageView.frame.height/2    

    return cell

问题是，第一次显示视图控制器时，图像视图仍然是方形。只有“隐藏”的单元格具有圆形图像视图。

似乎是这篇文章中记录的问题：https://medium.com/@adinugroho/circular-uiimageview-in-uitableview-cell-e1a7e1b6fe63

但我无法为我的实现找到解决方法。

【问题讨论】：

尝试在willDisplay:forRowAt:委托方法中设置cornerRadius。

试试这个 cell.channelImageView.clipsToBounds = true

【参考方案1】：

我认为缺少clipsToBounds。

见https://www.appcoda.com/ios-programming-circular-image-calayer/

我创建了一个RoundImageView 类。

class RoundImageView: UIImageView 
    required init?(coder aDecoder: NSCoder) 
        super.init(coder: aDecoder)
        self.layer.cornerRadius = self.frame.height/2
        self.clipsToBounds = true
    

在您的故事板上实现这一点。

为我工作。

Alternativ：cell.channelImageView.clipsToBound = true 应该可以工作。

【讨论】：

不适用于我 clipsToBound 选项，对不起！我找到了解决方案，所以我将发布答案。感谢您的帮助！

【参考方案2】：

您可以将UIImageView 用四舍五入

imageView.layer.cornerRadius = 10
imageView.layer.masksToBounds = true

另一种方法是将CAShapeLayer 添加到UIView。

let mask = CAShapeLayer()
mask.path = UIBezierPath(ovalIn: view.bounds).cgPath
let imageLayer = CAShapeLayer()
imageLayer.mask = mask
imageLayer.frame = view.bounds
imageLayer.contents = image.cgImage
view.layer.addSublayer(imageLayer)

【讨论】：

问题是根据图像的大小动态创建cornerRadius。无论如何感谢您的回答！ :)

【参考方案3】：

对于我的特殊情况，只有这样才能正常工作：

cell.layoutIfNeeded()

此行将在cornerRadius 选项之前。

希望这可以帮助其他有同样问题的人。