Make rounded image with storyboards

Question

I want to make rounded photo from Facebook, but image always scales.

So i have Storyboard with next parameters: http://prntscr.com/5bpuqy

align center X, align center Y, width equals 72, height equals 72. I understand, that problem may be in 72/72, but image mode in storyboard is "Aspect Fit"

I call my methods for downloading image by URL and then make it cornered with radius.

// call 
[UIImage setRoundImageView:self.p_photo WithURL:[p_user fullURL] withCornerSize:37];

+ (void)setRoundImageView:(UIImageView *)imageView WithURL:(NSURL *)url withCornerSize:(CGFloat)corner
    {
    dispatch_async(dispatch_get_global_queue( DISPATCH_QUEUE_PRIORITY_DEFAULT, 0), ^(void){

        [[SDWebImageManager sharedManager] downloadImageWithURL:url
                                                        options:0
                                                       progress:^(NSInteger receivedSize, NSInteger expectedSize) {

                                                       } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {

                                                           if (image && finished)
                                                           {
                                                               [self setRoundImage:image forImageView:imageView withCornerSize:corner];
                                                           }
                                                       }];
    });
 }

+ (void)setRoundImage:(UIImage *)image forImageView:(UIImageView *)imageView withCornerSize:(CGFloat)corner
{
    dispatch_async(dispatch_get_main_queue(), ^{

        UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, NO, [UIScreen mainScreen].scale);
        [[UIBezierPath bezierPathWithRoundedRect:imageView.bounds
                                    cornerRadius:corner] addClip];
        [image drawInRect:imageView.bounds];
        imageView.image = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
    });
}

To round the corners of your image view, use the answer from this SO question: http://stackoverflow.com/questions/1509547/uiview-with-rounded-corners — Daniel T., Nov 30 '14 at 14:36
Use the answer in that SO question to round the view, see if that fixes the scaling issue. — Daniel T., Nov 30 '14 at 15:40
No, it's rounded good as a before, but the main trouble in scale, as i think, because of storyboard that i set image as width = 72, height = 72, so it's anyways scales to 72*72 — Vitaliy Zarubin, Nov 30 '14 at 15:44

score 1 · Accepted Answer · answered Nov 30 '14 at 16:36

Your code is way more complex than it needs to be. You are manually drawing the image into the image view and that is causing the problem. Try this instead:

+ (void)setRoundImageView:(UIImageView *)imageView WithURL:(NSURL *)url
{
    // you don't need to wrap this in a dispatch queue, SDWebImageManager takes care of that for you.
    [[SDWebImageManager sharedManager] downloadImageWithURL:url options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {
    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
        if (image && finished) {
            [self setRoundImage:image forImageView:imageView];
        }
    }];
}

+ (void)setRoundImage:(UIImage *)image forImageView:(UIImageView *)imageView
{
    // you don't need to wrap this in a dispatch queue, it will be called on the main thread.
    // you don't need to manually draw the image into the image view. Just add the image to the image view and let it do its thing.
    imageView.layer.cornerRadius = CGRectGetHeight(imageView.bounds) / 2;
    imageView.layer.masksToBounds = YES;
    [imageView setImage:image];
}

And make sure the image view is set to "Aspect Fill" mode in the storyboard.

It's helped me, but one more problem is exists. When i call this method twice, so at first time corner radius is 35 and on second time it's 70. I think it's because of SDWebImageCache ? How to decide this problem, that i can reuse it's from cache ? — Vitaliy Zarubin, Nov 30 '14 at 19:03
The only way cornerRadius will different is if the size of the imageView is different. Either you are changing the size of your image view, or you are passing in a different image view. The value of cornerRadius has nothing to do with SDWebImageCache. — Daniel T., Nov 30 '14 at 19:07
okay, thanks, problem way because of viewWilLAppear method, there are incorrect values in viewWillAppear: and correct at viewDidAppear: — Vitaliy Zarubin, Nov 30 '14 at 19:34

Make rounded image with storyboards

1 Answers1