Создание изображения пользовательского интерфейса для идеального круга в Swift

Я пытаюсь сделать UIImage View в ячейке табличного представления идеальным кругом по коду в Swift. Сначала я поставил 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
}

xcode swift programmatically
person zzzzou    schedule 13.10.2020    source источник
comment
CornerRadius устанавливается, когда ваше представление изображения не было обработано (вы используете ленивое объявление), в то время его кадр все еще равен нулю. Итак, давайте добавим кадр изображения в инициализации или установим angleRadius в awakeFromNib()/layoutSubviews().   -  person jacob    schedule 13.10.2020
comment
В любом случае, угловой радиус — плохой способ сделать круглое изображение. Вместо этого замаскируйте круг.   -  person matt    schedule 13.10.2020

Ответы (2)


arrow_upward
2
arrow_downward

Потому что let img = UIImageView() -> frame == zero

Вы можете сделать так:

class RepositoryCell: UITableViewCell {
...

    override func layoutSubviews() {
        super.layoutSubviews()
        userImageView.layer.cornerRadius = img.frame.height / 2
    }
...
}
person kagen    schedule 13.10.2020

arrow_upward
0
arrow_downward

если вы используете 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)
    }
    
    
}
person dengST30    schedule 13.10.2020