Skip to main content

Add rounded corners to UIImageView


I would like to add some rounded corners to all of the UIImageViews in my project. I have already got the code working, but am having to apply it to every image; should I subclass UIImageView to add this? If so, can someone give me some pointers as to how to do this?



Here is the code




- (void)viewDidLoad {
[super viewDidLoad];
NSString *mainpath = [[NSBundle mainBundle] bundlePath];
welcomeImageView.image = [UIImage imageWithContentsOfFile:[mainpath stringByAppendingString:@"/test.png"]];
welcomeImageView.layer.cornerRadius = 9.0;
welcomeImageView.layer.masksToBounds = YES;
welcomeImageView.layer.borderColor = [UIColor blackColor].CGColor;
welcomeImageView.layer.borderWidth = 3.0;
CGRect frame = welcomeImageView.frame;
frame.size.width = 100;
frame.size.height = 100;
welcomeImageView.frame = frame;
}


Source: Tips4allCCNA FINAL EXAM

Comments

  1. You could use a category for UIImage which is an alternate way to subclass a Class and sometimes easier for just small changes.

    e.g add a method that returns a UIImage with the rounded corner attributes set.

    +(UIImage *)imageWithContentsOfFile:(NSString *)file cornerRadius:(NSInteger)...


    more info on Objective-c categories can be found http://macdevelopertips.com/objective-c/objective-c-categories.html

    ReplyDelete
  2. Check this -
    [Previous question on this][1]

    [1]: http://stackoverflow.com/questions/205431/rounded-corners-on-uiimage SO UIImage Qn on this

    The layer modification seems to be the best way.

    UIImageView * roundedView = [[UIImageView alloc] initWithImage: [UIImage imageNamed:@"wood.jpg"]];
    // Get the Layer of any view
    CALayer * l = [roundedView layer];
    [l setMasksToBounds:YES];
    [l setCornerRadius:10.0];

    ReplyDelete
  3. Yes, you should subclass UIImageView, and use your custom subclass throughout your project.

    ReplyDelete
  4. Rather than subclassing, you can achieve more powerful functionality through simple categories on UIImageView and CALayer.

    Create a category on UIImageView like this:

    - (void)maskRoundCorners:(UIRectCorner)corners radius:(CGFloat)radius {
    // To round all corners, we can just set the radius on the layer
    if ( corners == UIRectCornerAllCorners ) {
    self.layer.cornerRadius = radius;
    self.layer.masksToBounds = YES;
    } else {
    // If we want to choose which corners we want to mask then
    // it is necessary to create a mask layer.
    self.layer.mask = [CALayer maskLayerWithCorners:corners radii:CGSizeMake(radius, radius) frame:self.bounds];
    }
    }


    This calls a category method on CALayer:

    + (id)maskLayerWithCorners:(UIRectCorner)corners radii:(CGSize)radii frame:(CGRect)frame {

    // Create a CAShapeLayer
    CAShapeLayer *mask = [CAShapeLayer layer];

    // Set the frame
    mask.frame = frame;

    // Set the CGPath from a UIBezierPath
    mask.path = [UIBezierPath bezierPathWithRoundedRect:mask.bounds byRoundingCorners:corners cornerRadii:radii].CGPath;

    // Set the fill color
    mask.fillColor = [UIColor whiteColor].CGColor;

    return mask;
    }


    So, this allows you to round any combination (see UIRectCorner) of corners, which is especially handy if you want to put an image in a group style UITableView. There is one caveat when doing this however. Because we've not subclassed UIImageView, we cannot inject any code into layoutSubviews, which means that the mask layer may not be correct. In fact, when configuring cells, the bounds of the image view won't even be set when you call the category method. Hence, you need to ensure the bounds of the image view is set before adding rounded corners (except if using UIRectCornersAllCorners).

    Here is some code which does this:

    // Perform corner rounding
    UIRectCorner corners = !UIRectCornerAllCorners;
    if (indexPath.row == 0)
    corners = UIRectCornerTopLeft;
    if (indexPath.row == numberOfRowsInTheTable)
    corners |= UIRectCornerBottomLeft;

    if (corners > 0) {
    cell.imageView.bounds = CGRectMake(0.f, 0.f, [self.tableView rowHeight], [self.tableView rowHeight]);
    [cell.imageView maskRoundCorners:corners radius:10.f];
    } else {
    [cell.imageView removeRoundCornersMask];
    }


    I have another category which removes rounded corners - all that does is remove any masks and set the cornerRadius to 0.

    ReplyDelete

Post a Comment

Popular posts from this blog

[韓日関係] 首相含む大幅な内閣改造の可能性…早ければ来月10日ごろ=韓国

div not scrolling properly with slimScroll plugin

I am using the slimScroll plugin for jQuery by Piotr Rochala Which is a great plugin for nice scrollbars on most browsers but I am stuck because I am using it for a chat box and whenever the user appends new text to the boxit does scroll using the .scrollTop() method however the plugin's scrollbar doesnt scroll with it and when the user wants to look though the chat history it will start scrolling from near the top. I have made a quick demo of my situation http://jsfiddle.net/DY9CT/2/ Does anyone know how to solve this problem?

Why does this javascript based printing cause Safari to refresh the page?

The page I am working on has a javascript function executed to print parts of the page. For some reason, printing in Safari, causes the window to somehow update. I say somehow, because it does not really refresh as in reload the page, but rather it starts the "rendering" of the page from start, i.e. scroll to top, flash animations start from 0, and so forth. The effect is reproduced by this fiddle: http://jsfiddle.net/fYmnB/ Clicking the print button and finishing or cancelling a print in Safari causes the screen to "go white" for a sec, which in my real website manifests itself as something "like" a reload. While running print button with, let's say, Firefox, just opens and closes the print dialogue without affecting the fiddle page in any way. Is there something with my way of calling the browsers print method that causes this, or how can it be explained - and preferably, avoided? P.S.: On my real site the same occurs with Chrome. In the ex