ios - 圆角半径问题
问题描述
我有以下代码
class CourseItemCollectionViewCell: UICollectionViewCell {
var imageView: UIImageView!
var label: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.isUserInteractionEnabled = false
contentView.addSubview(imageView)
}
override func layoutSubviews() {
super.layoutSubviews()
var frame = imageView.frame
frame.size.height = 120
frame.size.width = 212
frame.origin.x = 0
frame.origin.y = 0
imageView.frame = frame
imageView.layoutIfNeeded()
imageView.layer.masksToBounds = true
imageView.layer.cornerRadius = 8
不幸的是,圆角半径不适用于图像视图。发生的情况是图像的顶部上边缘看起来是矩形的,而底部看起来是圆形的。它适用于底部,但不适用于顶部。我做错了什么?
更新我试过:
let imageView: UIImageView = {
let imageView = UIImageView(frame: .zero)
imageView.contentMode = .scaleAspectFill
return imageView
}()
override init(frame: CGRect) {
super.init(frame: .zero)
setupViews()
setupLayouts()
}
private func setupViews() {
contentView.clipsToBounds = true
contentView.backgroundColor = .clear
contentView.isUserInteractionEnabled = true
imageView.layer.masksToBounds = true
imageView.setRoundedEdge(corners: [.topLeft, .topRight, .bottomLeft, .bottomRight], radius: 8)
contentView.addSubview(imageView)
contentView.addSubview(label)
}
extension UIImageView {
func setRoundedEdge(corners:UIRectCorner, radius: CGFloat){
let path = UIBezierPath(roundedRect: bounds, byRoundingCorners: corners, cornerRadii: CGSize(width: radius, height: radius))
let mask = CAShapeLayer()
mask.path = path.cgPath
layer.mask = mask
}
}
在我看到之前
现在我明白了
注意图像是通过 URL 加载的。
解决方案
尝试在您的 collectionViewCell 中添加一个 containerView,在其中添加 imageView(我设置了我的图像,您设置了您的 url 图像)并使用自动布局设置约束,如下所示:
let containerView: UIView = {
let v = UIView()
v.backgroundColor = .red
v.layer.cornerRadius = 12
v.layer.masksToBounds = true
v.translatesAutoresizingMaskIntoConstraints = false
return v
}()
现在设置 imageView 和标签:
let dummyImageView: UIImageView = {
let imageView = UIImageView()
imageView.image = UIImage(named: "yourImage")
imageView.contentMode = .scaleAspectFill
imageView.layer.cornerRadius = 8
imageView.clipsToBounds = true
imageView.translatesAutoresizingMaskIntoConstraints = false
return imageView
}()
let dummyLabel: UILabel = {
let label = UILabel()
label.backgroundColor = .clear
label.isUserInteractionEnabled = false
label.text = "Lean Methodology"
label.font = UIFont.systemFont(ofSize: 30, weight: .regular)
label.textColor = .black
label.translatesAutoresizingMaskIntoConstraints = false
return label
}()
之后使用自动布局设置约束
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
backgroundColor = .white
contentView.addSubview(containerView)
containerView.topAnchor.constraint(equalTo: topAnchor, constant: 10).isActive = true
containerView.heightAnchor.constraint(equalToConstant: 230).isActive = true
containerView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -10).isActive = true
containerView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
containerView.addSubview(dummyImageView)
dummyImageView.topAnchor.constraint(equalTo: topAnchor).isActive = true
dummyImageView.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
dummyImageView.trailingAnchor.constraint(equalTo: trailingAnchor).isActive = true
dummyImageView.leadingAnchor.constraint(equalTo: leadingAnchor).isActive = true
addSubview(dummyLabel)
dummyLabel.topAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
dummyLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
dummyLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
dummyLabel.bottomAnchor.constraint(equalTo: bottomAnchor).isActive = true
}
这是结果:
推荐阅读
- java - 内存中的 Java 原始数组布局
- reactjs - React - 更新状态数组
- batch-file - 批; 将输入保存为下次运行的选项(livestreamer)
- sql - Varchar 和日期不兼容的 SQL
- python - Python HTTP 调试器
- javascript - RTCPeerconnection.onicecandidate 函数?
- excel - 使用 Excel VBA 直接读取 Web 内容
- python - 如何创建构建、运行测试和运行 python 脚本的 Linux 可执行文件?
- ascii - Informatica v10.2 - ASCII 到 EBCDIC 的转换
- python - Python:子类结构中的所有类型提示错误似乎都被忽略了