Question 72280 in IOS Swift Question posted in
The official documentation can be found here.

How to set the corner radius to 50% – Ios swift

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)
    }
}
Tags:

2

Answers


  1. 0

    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
    Login or Signup to reply.
  2. 0

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

    class ViewController: UIViewController {
    
    private let imageView: UIImageView = {
        let imageView = UIImageView(frame: .zero)
        imageView.contentMode = .scaleAspectFit
        return imageView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        
        imageView.frame = CGRect(x: 100, y: 100, width: 100, height: 100);
        imageView.layer.cornerRadius = 45
        imageView.layer.masksToBounds = true
        self.view.addSubview(imageView)
        imageView.image = UIImage.init(named: "+")
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search