iDev iDev - 15 days ago 5
Objective-C Question

UIImageView stretch/repeat image on borders and maintain its quality

I have a squared

UIImage


enter image description here

I'm trying to create a
UIImageView
using this
UIImage
for any given rect which I'll be using as a border to another view on top of it.

I don't want to set the border of the
layer
manually but I would like to use this image.

Example of desired output:

enter image description here

I tried using
UIView
's
UIViewContentModeScaleToFill


UIImageView *imageView1 = [[UIImageView alloc] initWithFrame:CGRectMake(5, 5, 300, 150)];
[imageView setImage:[UIImage imageNamed:@"background"]];
[imageView setContentMode:UIViewContentModeScaleToFill];


But the image is stretching and not returning the desired output

Example output:

enter image description here

Answer

Programmatically you can create border with shadow effect:

[view.layer setCornerRadius:5];
[view.layer setShadowColor:[UIColor lightGrayColor].CGColor];
[view.layer setShadowOpacity:0.4];
[view.layer setShadowRadius:1.0];
[view.layer setShadowOffset:CGSizeMake(1.0, 1.0)];

Although if you want to do it using Xcode interface, you can do it as

  1. Drag & drop your square image into Assets
  2. Select image & click on "Show the Attribute Inspector"
  3. In Slicing section select "Horizontal and Vertical" for Slices

Now Use it as you want you will have stretch image without any distortion

enter image description here

You can view image slice view on clicking "Show Slicing" at the bottom

enter image description here

Comments