如何调整圆的大小以动态调整任何 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)
       }

enter image description here

Answer 1

情侣点...

首先，71% 的视图宽度可能会太大。从 50% 左右开始，然后根据自己的喜好进行调整。

您正在使用 .cornerRadius = 130 但您的 imageView 可能不是那个大小（当然不是在不同的设备上），因此您希望将圆角半径设置为图像视图宽度（或高度）的一半, 没关系，因为它将是正方形 1:1 比率）。

您可以等到 viewDidLayoutSubviews() 找出图像视图的运行时间大小，但如果您的图像视图最终成为另一个视图的子视图，则不会设置在那个点。

创建一个非常简单的 UIImageView subclass:

更容易

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
    }

}

然后你的视图控制器看起来像这样：

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 class' layoutSubviews() 将自动适当地设置圆角半径。

如何调整圆的大小以动态调整任何 iPhone 的宽度和高度？

How can I adjust the the size of the circle to dynamically adjust to the width and height of any iPhone?

ios

snapkit