如何在 iOS ScrollView 中获取圆形图像？

Question

我正在尝试在 ScrollView 中生成圆形图像。虽然，无论我将约束更改为什么，我的图像总是显得加宽（不是圆圈）。

这是我的滚动视图及其当前状态下的图像：

我正在尝试将图像显示为圆形而不是扁平的。我的最终目标是让我的滚动视图的图像以这种方式显示：

这是我生成滚动视图的代码

func setUpScrollView(){
        view.addSubview(profileImageView)

        scrollView.topAnchor.constraint(equalTo: view.topAnchor).isActive = true
        scrollView.bottomAnchor.constraint(equalTo: view.bottomAnchor).isActive = true
        scrollView.leftAnchor.constraint(equalTo: view.leftAnchor).isActive = true
        scrollView.rightAnchor.constraint(equalTo: view.rightAnchor).isActive = true

        createDatePicker()
        createToolBar()

        //Image Picker
        scrollView.addSubview(profileImageView)
        profileImageView.anchor(top: scrollView.topAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 60, paddingLeft: 32, paddingBottom: 0, paddingRight: 32, width: 0, height: 32)

        scrollView.addSubview(imagePickerLabel)
        imagePickerLabel.anchor(top: profileImageView.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 16, paddingLeft: 32, paddingBottom: 0, paddingRight: 32, width: 0, height: 50)

        //      Birthday Picker
        scrollView.addSubview(dateOfBirthContainer)
        dateOfBirthContainer.anchor(top: imagePickerLabel.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 16, paddingLeft: 32, paddingBottom: 0, paddingRight: 32, width: 0, height: 50)
        dateOfBirthTextField.inputAccessoryView = toolBar

        //Gender Picker
        scrollView.addSubview(genderContainer)
        genderContainer.anchor(top: dateOfBirthContainer.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 16, paddingLeft: 32, paddingBottom: 0, paddingRight: 32, width: 0, height: 50)
        genderTextField.inputAccessoryView = toolBar

        //University Picker
        scrollView.addSubview(universityContainer)
        universityContainer.anchor(top: genderContainer.bottomAnchor, left: view.leftAnchor, bottom: nil, right: view.rightAnchor, paddingTop: 16, paddingLeft: 32, paddingBottom: 0, paddingRight: 32, width: 0, height: 50)
        universityTextField.inputAccessoryView = toolBar
    }
}

下面是试图使 ImageView 变成圆形的代码

var profileImageView: UIImageView = {
        let imageTap = UITapGestureRecognizer(target: self, action: #selector(openImagePicker))
        let iv = UIImageView()
        iv.isUserInteractionEnabled = true
        iv.addGestureRecognizer(imageTap)
        iv.image =  UIImage(named: "small-avatar")
        iv.layer.borderWidth = 1
        iv.layer.masksToBounds = false
        iv.layer.borderColor = UIColor.white.cgColor as! CGColor
        iv.layer.cornerRadius = 125//This will change with corners of image and height/2 will make this circle shape
        iv.clipsToBounds = true
        return iv
    }()

Answer 1

你要么需要

iv.layer.cornerRadius = 16 /// 32/2

或

override func viewDidLayoutSubviews() {
   super.viewDidLayoutSubviews()
     profileImageView.layer.cornerRadius = profileImageView.frame.height / 2.0
 }

请注意，对于圆形图像，您需要确保 imageView 的 width = height ，目前您设置的是 left 、 top 、 right 和 height ，而您应该设置 top 、 centerX 、 width 和 height

Answer 2

如 Sh_khan 所述，您的 imageView 未锚定以反映 imageView 的宽度和高度，这就是为什么您的 imageView 折叠是因为您没有t 定义它在屏幕上的显示方式。根据经验，你总是需要定义 4 个东西，宽度和高度，x 位置和 y 位置，你可以用约束来做到这一点。这是我如何定义它的示例。

NSLayoutConstraint.activate([
imageView.widthAnchor.constraint(equalToConstant: 50),
imageView.heightAnchor.constraint(equalTo: imageView.widthAnchor),
imageView.centerXAnchor.constraint(equalTo: view.CenterXAnchor), 
])

Answer 3

我认为您可能在图像视图中缺少 translatesAutoresizingMaskIntoConstraints，因为您使用的是程序自动布局。尝试在图像视图中将其设置为 false。

如何在 iOS ScrollView 中获取圆形图像？

How to get a circular image in iOS ScrollView?

swift

user-interface

swift4