表格视图单元格中的圆形图像 swift

Posted 2023-02-24

【中文标题】表格视图单元格中的圆形图像 swift

【英文标题】：circular image in table view cell swift

【发布时间】：2015-06-06 16:29:03

【问题描述】：

我正在尝试在表格视图的每一行中创建一些圆形图像。我按照教程进行操作，但我的图像变成了菱形而不是圆形。我做错了什么：

 var cellImage = UIImage(named: pic)
 cell.imageView!.image = cellImage
 cell.imageView!.layer.frame = CGRectMake(0, 0, 190, 190)
 cell.imageView!.layer.borderWidth = 0.5
 cell.imageView!.layer.masksToBounds = false
 cell.imageView!.layer.borderColor = UIColor.blueColor().CGColor

 cell.imageView!.layer.cornerRadius = cell.imageView!.layer.frame.height/2
 cell.imageView!.clipsToBounds = true

【问题讨论】：

检查imageView的大小。您正在使用单元格的 imageView 属性。这是由表视图调整大小的。如果您向单元格添加了图像视图，请为其选择另一个名称。能否请您显示单元格的代码？

@dasdom 感谢您的回复。我对swift很陌生，所以请原谅我的无知。我想我正在使用基于提供的代码的单元格的 imageView 属性是吗？我的代码中是否也没有说明尺寸，即 190 x 190？

不，table view cell的imageView的大小是由cell的大小给定的。

@dasdom 还要注意我的表格视图行的高度是 200（在情节提要源代码中设置）

@dasdom 好的，我已经打印出图像的大小（来自网络服务响应）。现在它们是硬编码的，位于我的 imageassts 文件夹中。第一个是可选的 500.0，第二个是 200.0 两者都显示为钻石？？

【参考方案1】：

如果你正在创建自己的 imageView，最好在自定义 TableViewCell 中设置cornerRadius。

class CircularTableViewCell: UITableViewCell 
@IBOutlet weak var circularImageView: UIImageView!
override func layoutSubviews() 
    circularImageView.layer.cornerRadius = circularImageView.bounds.height / 2
    circularImageView.clipsToBounds = true

请注意，cornerRadius 属性不能保证视图绝对是圆形的，除非您将 imageView 的宽高比设置为 1:1。另一种创建圆形视图的方法是使用 Mask。

public extension UIView 
public func round() 
    let width = bounds.width < bounds.height ? bounds.width : bounds.height
    let mask = CAShapeLayer()
    mask.path = UIBezierPath(ovalInRect: CGRectMake(bounds.midX - width / 2, bounds.midY - width / 2, width, width)).CGPath
    self.layer.mask = mask

这将允许您使用任何 UIView 调用 round() 并确保视图始终是圆形的。例如

class CircularTableViewCell: UITableViewCell 
@IBOutlet weak var circularImageView: UIImageView!
override func layoutSubviews() 
   circularImageView.round()

【讨论】：

如何在故事板中创建自定义表格视图单元格？关于这个或示例代码的任何教程？请注意，我正在使用 Web 服务响应填充我的表格，但并非所有表格都有与之关联的图像

我上传了一个简单的项目，您可以下载和探索：github.com/vidaaudrey/CustomTableViewCell。基本上你需要： 1. 在故事板中设置原型单元格，设置标识符并将单元格与相应的类关联 2. 创建自定义 UITableviewCell 类 3. 在 UITableViewController 中配置单元格以使用自定义 UITabelViewCell 类。如果某些单元格不同，您可以使用两种 UITableViewCell 类或只是进一步配置自定义 UITableViewCell 类（添加或删除视图，设置不同的标题等...）

感谢示例项目。将进行调查并报告

构建时出现错误，无法将“UITableViewCell”类型的值转换为“projectname.CircularTableViewCell”。在您的 CircularTableViewCell.swift 文件中，您定义了两个出口。到目前为止，要定义出口，我打开故事板，单击选择的组件并打开助手编辑器，拖放并选择出口或动作。在我的故事板中单击表格视图并打开助手编辑器时，我会看到带有表格视图而不是 CircularTableViewCell.swift 的页面的控制器。如何解决这个问题或者这会是问题吗？

我创建了一张可以显示更多细节的图片：link 另外，要链接插座，您可以从故事板、结构视图或“连接检查器”（最右边标签）。

【参考方案2】：

尝试将静态值（宽度或高度的一半）作为角半径。这可能会解决您的问题。