How can I take an UIImage and give it a black border?

Question

How can I set the border of a UIImage?

Solution 1

With OS > 3.0 you can do this:

//you need this import
#import <QuartzCore/QuartzCore.h>

[imageView.layer setBorderColor: [[UIColor blackColor] CGColor]];
[imageView.layer setBorderWidth: 2.0];

Solution 2

You can do this by creating a new image (also answered in your other posting of this question):

- (UIImage*)imageWithBorderFromImage:(UIImage*)source;
{
  CGSize size = [source size];
  UIGraphicsBeginImageContext(size);
  CGRect rect = CGRectMake(0, 0, size.width, size.height);
  [source drawInRect:rect blendMode:kCGBlendModeNormal alpha:1.0];

  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSetRGBStrokeColor(context, 1.0, 0.5, 1.0, 1.0); 
  CGContextStrokeRect(context, rect);
  UIImage *testImg =  UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return testImg;
}  

This code will produce a pink border around the image. However if you are going to just display the border then use the layer of the UIImageView and set its border.

Solution 3

#import <QuartzCore/CALayer.h>


UIImageView *imageView = [UIImageView alloc]init];
imageView.layer.masksToBounds = YES;
imageView.layer.borderColor = [UIColor blackColor].CGColor;
imageView.layer.borderWidth = 1;    

This code can be used for adding UIImageView view border.

Solution 4

imageView_ProfileImage.layer.cornerRadius =10.0f;
imageView_ProfileImage.layer.borderColor = [[UIColor blackColor] CGColor];
imageView_ProfileImage.layer.borderWidth =.4f;
imageView_ProfileImage.layer.masksToBounds = YES;

Solution 5

If you know the dimensions of your image, then adding a border to the UIImageView's layer is the best solution AFAIK. Infact, you can simply setFrame your imageView to x,y,image.size.width,image.size.height

In case you have an ImageView of a fixed size with dynamically loaded images which are getting resized (or scaled to AspectFit), then your aim is to resize the imageview to the new resized image.

The shortest way to do this:

// containerView is my UIImageView
containerView.layer.borderWidth = 7;
containerView.layer.borderColor = [UIColor colorWithRed:0.22 green:0.22 blue:0.22 alpha:1.0].CGColor;

// this is the key command
[containerView setFrame:AVMakeRectWithAspectRatioInsideRect(image.size, containerView.frame)];

But to use the AVMakeRectWithAspectRatioInsideRect, you need to add this

#import <AVFoundation/AVFoundation.h>

import statement to your file and also include the AVFoundation framework in your project (comes bundled with the SDK).

View more solutions

Comments

[cc604]

Is it going to work with a different size of images that change on the fly? The UIImageView will change all the time, and the UIView? p.s. Manipulate the image itself will be great.

[SinisterMJ]

You'd have to adjust the frame of the containing view along with the image - you could save off the center properties for both views, adjust the image size, adjust the container size, and then re-set center properties for both.

[Corey Floyd]

This is exactly the way I did it as opposed to stroking the path with CG. just seemed easier.

[Meet]

When i aspectFit the images in the above imageView, the image is viewed perfectly but the sides of image is left blank, and the same happens to the upper and lower portion of the image when image is landscape. The blank space looks ugly with border set to it.. Did you faced this issue? If yes, please suggest a method to solve this

[Patrick]

How do you specify the width of the border you want?

[Ben Kreeger]

This is what I ended up doing; nesting my UIImageView in the center of a slightly-larger UIView of my frame color.

[Kyle Clegg]

@Hamutsi imageView.image = myImage;

[SachinVsSachin]

If you found any gliches please let me know... i will improve it

[Luke]

@MarcusS.Zarra I realise they didn't exist when this question was answered, but this solution doesn't take the Retina display into consideration. If you could revise it I'd be really grateful :)

[vond]

@lukech The sample doesn't need to be revised. Just increase the line width if you are on a retina device.

[Luke]

The size is 320x480 regardless of whether or not you're on a Retina device, so when you save the image, it saves at that 320x480px resolution, not 640x960.

[coder1010]

is there any way to set the width of the red border here.

[Mark Adams]

Yes you can. Instances of UIImage can be drawn into a graphics context with CoreGraphics.

[ScorpionKing2k5]

Thanks @rafinskipg ! Much appreciated.

[SirRupertIII]

Working on it right now, but how can I round the corners of this border?

[vond]

@KKendall I would suggest creating your own stack overflow question and reference this one.

[Bjorn Roche]

As @rockstar points out, you may need to add imageView.layer.masksToBounds = YES;

[GrandSteph]

This link was the solution I was looking for.

[codesnooker]

This is not going to work as you need CGColor and through XIB it provides only UIColor

[soprof]

Color won't work, but if you just need a black one - this is the most "lines of code" efficient answer =D

[Septronic]

perfect! No need to go through the hassle of CGImage. (I didn't need to save the image with the border). Thanks a bunch!

[judepereira]

Brilliant hack, especially when it comes to memory usage - the other answers will take 2x memory just to add that border momentarily. Pro tip - If you're looking to just add a border on one side, then you can change the bounds too. Great answer!

[androidguy]

I think it's important to note that the CALayer border is drawn over the layer contents without affecting the layer's content area, so when applied to a UIImageView for example, the border is drawn over the 4 edges of the image (if the contentMode is such that the image fills the view). If you need the image to be completely visible, and not mess with contentModes and making resized UIImage, then I think nested views/layers is the only option.