在 Swift 中将 ui Image 制作成完美的圆圈

Posted 2023-03-21

【中文标题】在 Swift 中将 ui Image 制作成完美的圆圈

【英文标题】：Making ui Image to perfect circle in Swift

【发布时间】：2020-10-13 03:00:54

【问题描述】：

我正在尝试通过 Swift 中的代码将表格视图单元格中的 UIImage 视图制作成一个完美的圆圈。 起初，我将img.layer.cornerRadius = 35 放入我的代码中，它使我的图像几乎像一个圆圈。然后，我没有将数字传递给圆角半径，而是尝试通过代码编写该部分，例如img.layer.cornerRadius = img.frame.height / 2。但是，此代码使 UIImage 正方形（不应用角半径）。我不确定为什么会这样。谁能解释一下为什么会发生这种情况以及如何解决它？

class RepositoryCell: UITableViewCell 

    let userImageView: UIImageView = 
        let img = UIImageView()
        img.contentMode = .scaleAspectFit
        img.layer.cornerRadius = img.frame.height / 2
        // img.layer.cornerRadius = 35 <= this code works
        img.clipsToBounds = true
        img.backgroundColor = .black
    
        return img
    ()

    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) 
        super.init(style: style, reuseIdentifier: reuseIdentifier)
    
        addSubview(userImageView)
        containerView.addSubview(userNameLabel)
        containerView.addSubview(repositoryNameLabel)
        addSubview(containerView)
        addSubview(starNumLabel)

        configureViewComponents()


required init?(coder: NSCoder) 
    fatalError("init(coder:) has not been implemented")


func configureViewComponents() 
    
    setUserImageConstraints()
    



func setUserImageConstraints() 
    userImageView.translatesAutoresizingMaskIntoConstraints = false
    userImageView.centerYAnchor.constraint(equalTo: centerYAnchor).isActive = true
    userImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10).isActive = true
    userImageView.heightAnchor.constraint(equalToConstant: 80).isActive = true
    userImageView.widthAnchor.constraint(equalTo: userImageView.heightAnchor, multiplier: 1).isActive = true

【问题讨论】：

cornerRadius 在您的图像视图尚未渲染时设置（您使用惰性声明），当时它的帧仍然为零。所以让我们在 init 中给图像视图一个框架，或者在 awakeFromNib()/layoutSubviews() 中设置cornerRadius。

无论如何，圆角半径是制作圆形图像的糟糕方法。相反，掩码成一个圆圈。

【参考方案1】：

因为let img = UIImageView() -> frame == zero

你可以这样做：

class RepositoryCell: UITableViewCell 
...

    override func layoutSubviews() 
        super.layoutSubviews()
        userImageView.layer.cornerRadius = img.frame.height / 2
    
...

【参考方案2】：

如果你使用 RxSwift，你可以简单地调用img.cornerHalf()，

它使用 Key Path Observe

let userImageView: UIImageView = 
    let img = UIImageView()
    // ...
    img.cornerHalf()
    // ...
    return img
()

使用下面的辅助代码

import RxSwift
import RxCocoa


extension UIView
    
    func cornerHalf()
        clipsToBounds = true
        rx.observe(CGRect.self, #keyPath(UIView.bounds))
            .subscribe(onNext:  _ in
                // _ : CGRect? in
                self.layer.cornerRadius = self.bounds.height * 0.5
            ).disposed(by: rx.disposeBag)