2

I have a collectionviewCell with a rounded imageview which shows an icon. Unfortunately the icons are too big. How can I fit them to fit into the rounded ImageView:

Code

func makeItCircle() {

    self.imageView.layer.cornerRadius  = self.imageView.frame.height/2
    self.imageView.layer.masksToBounds = false
    self.imageView.clipsToBounds = true
    self.imageView.contentMode = .scaleAspectFit
}

Picture enter image description here

Mike
  • 53
  • 10
  • Have you tried `.scaleAspectFill`? Still might not give you what you want, but probably worth a try. – DonMag Oct 25 '17 at 15:47
  • No change when I do that – Mike Oct 25 '17 at 15:51
  • Is the blue background part of the images? – dr_barto Oct 25 '17 at 16:22
  • 1
    I'll guess you need to do some math (sorry, I may be able to visualize what I'm saying but cannot give you the equations. Basically, you want "something that fits" into a circle, right? That circle is based on what I'll call an *outside* square. **With curves that fit around four outside points.** (Emphasis mine.) The mathematical problem is to figure out the *square* or *CGRect* that fits **inside** the circle. Or, in other words, a *CGRect* that fits inside the circle. Sure, you may need to deal with `backgroundColor` and such, but hopefully I started you down the *mathematical* trail. –  Oct 25 '17 at 16:26
  • @dr_barto the blue background is not part of the image. It's a the cellview with a gradient sublayer, with the same size and form like the image on top – Mike Oct 25 '17 at 16:58

2 Answers2

1

You can wrap the image views inside container views (the cell views you already have should work) to add some padding: center the image view inside its container and constraint its width and height to about 0.75 of the container. Also you'll have to set the background and corner rounding on the container, not on the image view.

dr_barto
  • 5,723
  • 3
  • 26
  • 47
0

(100x100)

class CenterTab:UIView{

let container:UIView = {
   
    let v = UIView()
    v.backgroundColor = .white
    v.layer.cornerRadius = 100/2
    
    v.layer.shadowColor = UIColor.systemPurple.cgColor
    v.layer.shadowOpacity = 0.4
    v.layer.shadowOffset = CGSize(width: 0.0, height: 0.0)
    v.layer.shadowRadius = 7
    
    v.translatesAutoresizingMaskIntoConstraints = false
    return v
}()

let tabImg:UIImageView = {
   
    let img = UIImageView()
    img.contentMode = .scaleAspectFit
    img.clipsToBounds = true
    img.tintColor = .systemPurple
    img.translatesAutoresizingMaskIntoConstraints = false
    return img
}()


override init(frame: CGRect) {
    super.init(frame: frame)
    self.translatesAutoresizingMaskIntoConstraints = false
    
    container.addSubview(tabImg)
    self.addSubview(container)
}


override func layoutSubviews() {
    super.layoutSubviews()
    
    NSLayoutConstraint.activate([
        container.topAnchor.constraint(equalTo: self.topAnchor),
        container.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        container.trailingAnchor.constraint(equalTo: self.trailingAnchor),
        container.bottomAnchor.constraint(equalTo: self.bottomAnchor),
        
        tabImg.centerXAnchor.constraint(equalTo: container.centerXAnchor),
        tabImg.centerYAnchor.constraint(equalTo: container.centerYAnchor),
        tabImg.widthAnchor.constraint(equalTo: container.widthAnchor, multiplier: 0.60),
        tabImg.heightAnchor.constraint(equalTo: container.widthAnchor)
    ])
}


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