如何調整圓圈的大小以動態調整到任何 iPhone 的寬度和高度？

Question

我正在使用 snap kit 來設置約束。 第一張圖片是我試圖用下面的代碼實現的。 如何在任何 iPhone 屏幕上設置圓的寬度和高度的約束以使其成為動態？

 profileImage = UIImageView()
        profileImage.layer.borderWidth = 2
        profileImage.layer.borderColor = UIColor.lightBlue.cgColor
        profileImage.layer.cornerRadius = 130
        profileImage.clipsToBounds = true
        profileImage.layer.masksToBounds = true
        let tapGesture = UITapGestureRecognizer(target: self, action:#selector((tappedImage)))
        profileImage.addGestureRecognizer(tapGesture)
        profileImage.isUserInteractionEnabled = true
        profileImage.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(profileImage)
        profileImage.snp.makeConstraints { (make) in
            make.centerX.equalToSuperview()
            make.top.equalTo(titleLabel.snp.bottom).offset(topMargin*2)
            make.width.height.equalTo(view.snp.width).multipliedBy(0.71)
       }   

在此處輸入圖像描述

在此處輸入圖像描述

Answer 1

幾個點...

首先， 71%的視圖寬度可能太大了。 從50%左右開始，然后根據自己的喜好進行調整。

您正在使用.cornerRadius = 130但您的 imageView 可能不是那個大小（當然不是在不同的設備上），所以您想將角半徑設置為圖像視圖寬度的一半（或高度，沒關系，因為這將是一個 1:1 的平方比例）。

您可以等到viewDidLayoutSubviews()來找出圖像視圖的運行時大小，但如果您的圖像視圖最終成為另一個視圖的子視圖，那么它也不會在那時設置。

創建一個非常簡單的UIImageView子類要容易得多：

class ProfileImageView: UIImageView {
    
    override func layoutSubviews() {
        super.layoutSubviews()
        layer.borderWidth = 2
        layer.borderColor = UIColor.systemBlue.cgColor
        layer.cornerRadius = bounds.width * 0.5
        clipsToBounds = true
        layer.masksToBounds = true
    }

}

那么你的視圖 controller 看起來像這樣：

class ViewController: UIViewController {
    
    var profileImage: ProfileImageView!
    
    // your top margin value
    let topMargin: CGFloat = 20
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        profileImage = ProfileImageView()

        if let img = UIImage(named: "sampleProfilePic") {
            profileImage.image = img
        }

        profileImage.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(profileImage)
        
        // respect safe-area
        let g = view.safeAreaLayoutGuide

        // this should give the same layout as your "snap" constraints
        NSLayoutConstraint.activate([
            // center horizontally
            profileImage.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            // your topMargin value * 2 from safe-area top
            profileImage.topAnchor.constraint(equalTo: g.topAnchor, constant: topMargin * 2.0),
            // width
            //  71% of width of safe-area is probably too wide
            //  try starting at 50%
            profileImage.widthAnchor.constraint(equalTo: g.widthAnchor, multiplier: 0.50),
            // 1:1 ratio (square)
            profileImage.heightAnchor.constraint(equalTo: profileImage.widthAnchor),
        ])

        //      profileImage.snp.makeConstraints { (make) in
        //          make.centerX.equalToSuperview()
        //          make.top.equalTo(titleLabel.snp.bottom).offset(topMargin*2)
        //          make.width.height.equalTo(view.snp.width).multipliedBy(0.71)
        //      }

        let tapGesture = UITapGestureRecognizer(target: self, action:#selector((tappedImage)))
        profileImage.addGestureRecognizer(tapGesture)
        profileImage.isUserInteractionEnabled = true

    }

}

每當您的profileImage視圖的大小發生變化時， ProfileImageView類的layoutSubviews()將自動適當地設置角半徑。