rounded imageView 's border is not smooth after setting image property

Question

class PPAvatarCollectionCell: UICollectionViewCell {
    var imageView:UIImageView!

override init(frame: CGRect) {
    super.init(frame: frame)

    imageView = UIImageView(frame: CGRect(origin: CGPointMake(0, 0), size: CGSizeMake(frame.size.width, frame.size.height)))

    self.addSubview(imageView)

    imageView.contentMode = .ScaleAspectFill
    imageView.backgroundColor = UIColor.whiteColor()

    imageView.layer.borderColor = UIColor.greenColor().CGColor
    imageView.layer.borderWidth = 10
    imageView.image = UIImage(named: "demo")
    imageView.layer.cornerRadius = frame.size.width*0.5
    imageView.clipsToBounds = true

}

the border is smooth and great with above code but after add imageView.image = UIImage(named: "demo")

the imageView's border is no longer smooth. Why did this happen ?

UPDATE:

Seems something wrong with layer.radius ,the border is smooth even with image property set on imageView after remove imageView.layer.cornerRadius = frame.size.width*0.5

UPDATE 2: turn out to be something wrong with UICollectionViewCell , imageView is a part of UICollectionViewCell

are you capture this from device?? can you check in real Device ?? that might be happen because of your monitor screen resolution. — Nitin Gohel, Mar 18 '16 at 06:51
@Kiran I set radius to be constant 17 , the result turns out to be same — PeiweiChen, Mar 18 '16 at 06:58
You can benefit from these answers: http://stackoverflow.com/questions/29046571/cut-a-uiimage-into-a-circle-swiftios — fatihyildizhan, Mar 18 '16 at 08:34
@fatihyildizhan cut a image to round ,for my case , is unnecessary and would cause performance issue. — PeiweiChen, Mar 18 '16 at 08:38
Maybe you should look over Haneke and AlamofireImage or https://github.com/gavinbunney/Toucan , they could solve your problem. — fatihyildizhan, Mar 18 '16 at 08:41
@fatihyildizhan the repo is awesome though , i'm not gonna clip my image. — PeiweiChen, Mar 18 '16 at 08:53

score 0 · Answer 1 · edited Mar 18 '16 at 07:16

0

u can use 2 imageview 1 to show image and second to hide and show circular image.

1st imageview show image as it is.

2nd imageview which will have white background and green circle above 1st image and middle of image will be transparent

edited Mar 18 '16 at 07:16

Anbu.Karthik

82,064
23
174
143

answered Mar 18 '16 at 06:56

vaibby

1,255
1
9
23

I know,but very curious about the issue – PeiweiChen Mar 18 '16 at 06:59

score 0 · Answer 2 · edited May 23 '17 at 12:07

0

Basically, your image should be a square. Than do these:

imageView.layer.cornerRadius = self.frame.height / 2
imageView.layer.masksToBounds = false
imageView.clipsToBounds = true
imageView.image = "yourSquareImage"

Check the full solution with easy using extension: https://stackoverflow.com/a/36102901/2125010

edited May 23 '17 at 12:07

Community

1
1

answered Mar 19 '16 at 14:26

fatihyildizhan

8,614
7
64
88

your solution is not working . your code is same as mine . you can please try a collection view cell demo – PeiweiChen Mar 21 '16 at 03:02

rounded imageView 's border is not smooth after setting image property

2 Answers2