How to set the corner radius to 50%-CodePudding

I have an image view inside a collection view cell. I would like to set the corner radius of the image to 50% of its width (so it's a circle). How can I do this?

Here's my code so far

//
//  CategoryCell.swift
//  UICollectionViewDemo
//

import UIKit


final class Category3Cell: UICollectionViewCell {
    private enum Constants {
        // MARK: contentView layout constants
        static let contentViewCornerRadius: CGFloat = 0.0

        // MARK: imageView layout constants
        static let imageWidth: CGFloat = 90.0
        static let imageHeight: CGFloat = 90.0

        // MARK: Generic layout constants
        static let verticalSpacing: CGFloat = 10.0
        static let horizontalPadding: CGFloat = 16.0
        static let nameImagePadding: CGFloat = 20.0
    }
    
    public var categoryKey : String = "";

    private let imageView: UIImageView = {
        let imageView = UIImageView(frame: .zero)
        imageView.contentMode = .scaleAspectFit
        imageView.layer.cornerRadius = 45
        imageView.layer.masksToBounds = true
        return imageView
    }()

    private let name: UILabel = {
        let label = UILabel(frame: .zero)
        label.textAlignment = .center
        label.numberOfLines = 0
        label.font = UIFont(name: "CeraPro-Regular", size: 17);
        return label
    }()


    override init(frame: CGRect) {
        super.init(frame: .zero)
        
        setupViews()
        setupLayouts()
    }

    private func setupViews() {
        contentView.clipsToBounds = true
        contentView.layer.cornerRadius = Constants.contentViewCornerRadius
        contentView.backgroundColor = .clear
        contentView.isUserInteractionEnabled = true

        contentView.addSubview(imageView)
        contentView.addSubview(name)
    }

    private func setupLayouts() {
        imageView.translatesAutoresizingMaskIntoConstraints = false
        name.translatesAutoresizingMaskIntoConstraints = false

        // Layout constraints for `imageView`
        NSLayoutConstraint.activate([
            imageView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor),
            imageView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor),
            imageView.topAnchor.constraint(equalTo: contentView.topAnchor),
            imageView.heightAnchor.constraint(equalToConstant: Constants.imageWidth),
            imageView.heightAnchor.constraint(equalToConstant: Constants.imageHeight)
        ])

        // Layout constraints for `usernameLabel`
        NSLayoutConstraint.activate([
            name.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: Constants.horizontalPadding),
            name.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -Constants.horizontalPadding),
            name.topAnchor.constraint(equalTo: imageView.bottomAnchor, constant: Constants.nameImagePadding)
        ])
    }

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

    func setup(image: String, nameOf: String, key: String) {
        imageView.image = UIImage.init(named: image)
        name.text = nameOf
        categoryKey = key
    }
}


extension Category3Cell: ReusableView {
    static var identifier: String {
        return String(describing: self)
    }
}

CodePudding user response：

you need first the clipsToBounds set to true and then if you know the image size, you can set its layer.cornerRadius to half of that size.

Alternatively you can use the layoutSubviews method, and in its override access the imageView bounds.height and use half of this for the corner radius.

Try this code:

imageView.layer.cornerRadius = imageView.frame.height / 2

CodePudding user response：

Set width and height at first, then set imageView.layer.cornerRadius = imageView.frame.height / 2.