为表格视图单元格图像创建圆形图片
creating circular pics for tableview cell images
我正在尝试在 tableview 单元格中制作圆形图像,我有各种我在 Whosebug 上看到的方法,但这是我得到的最接近的方法:
如您所见,它们看起来更像椭圆而不是圆形。在情节提要中,我将约束设置为保持纵横比 1:1 和视图模式 "aspect fill"。我正在为圆形使用此 UIImage 扩展名:
extension UIImage {
var circleMask: UIImage {
let square = CGSize(width: min(size.width, size.height), height: min(size.width, size.height))
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
imageView.contentMode = UIViewContentMode.scaleAspectFill
imageView.image = self
imageView.layer.cornerRadius = square.width/2
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.borderWidth = 5
imageView.layer.masksToBounds = true
UIGraphicsBeginImageContext(imageView.bounds.size)
imageView.layer.render(in: UIGraphicsGetCurrentContext()!)
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result!
}
}
这是我的 cellForRowAt IndexPath 的样子:
let cell = detailTableView.dequeueReusableCell(withIdentifier: castResuseIdentifier)
as! CastCell
let cast = castArray[indexPath.row]
cell.actorName.text = cast.name
cell.characterName.text = cast.character
cell.actorProfileImage.image = castImageArray[indexPath.row].circleMask
self.detailTableView.rowHeight = 100
detailTableView.allowsSelection = true
return cell
不确定为什么它们不是完美的圆圈,知道吗?
这是实现该效果的一种非常低效的方法,因为您每次都在创建 UIImageView
并将其渲染到单独的图像上下文。
为了快速简便地完成此操作,只需在 CastCell
.[=14] 中为 actorProfileImage
视图的图层设置 cornerRadius
属性 =]
通过不使用扩展而是将其添加到 cellForRowAtIndexPath 中,图像呈圆形
cell.actorProfileImage.layer.cornerRadius = cell.actorProfileImage.frame.size.height/2
cell.actorProfileImage.clipsToBounds = true
cell.actorProfileImage.layer.masksToBounds = true
我正在尝试在 tableview 单元格中制作圆形图像,我有各种我在 Whosebug 上看到的方法,但这是我得到的最接近的方法:
如您所见,它们看起来更像椭圆而不是圆形。在情节提要中,我将约束设置为保持纵横比 1:1 和视图模式 "aspect fill"。我正在为圆形使用此 UIImage 扩展名:
extension UIImage {
var circleMask: UIImage {
let square = CGSize(width: min(size.width, size.height), height: min(size.width, size.height))
let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
imageView.contentMode = UIViewContentMode.scaleAspectFill
imageView.image = self
imageView.layer.cornerRadius = square.width/2
imageView.layer.borderColor = UIColor.white.cgColor
imageView.layer.borderWidth = 5
imageView.layer.masksToBounds = true
UIGraphicsBeginImageContext(imageView.bounds.size)
imageView.layer.render(in: UIGraphicsGetCurrentContext()!)
let result = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()
return result!
}
}
这是我的 cellForRowAt IndexPath 的样子:
let cell = detailTableView.dequeueReusableCell(withIdentifier: castResuseIdentifier)
as! CastCell
let cast = castArray[indexPath.row]
cell.actorName.text = cast.name
cell.characterName.text = cast.character
cell.actorProfileImage.image = castImageArray[indexPath.row].circleMask
self.detailTableView.rowHeight = 100
detailTableView.allowsSelection = true
return cell
不确定为什么它们不是完美的圆圈,知道吗?
这是实现该效果的一种非常低效的方法,因为您每次都在创建 UIImageView
并将其渲染到单独的图像上下文。
为了快速简便地完成此操作,只需在 CastCell
.[=14] 中为 actorProfileImage
视图的图层设置 cornerRadius
属性 =]
通过不使用扩展而是将其添加到 cellForRowAtIndexPath 中,图像呈圆形
cell.actorProfileImage.layer.cornerRadius = cell.actorProfileImage.frame.size.height/2
cell.actorProfileImage.clipsToBounds = true
cell.actorProfileImage.layer.masksToBounds = true