Geek Answers Handbook

Create a UIImage with Multiple Extensible Images

I have 3 images, left cover, right cover and center. Perhaps, using CGImageRefs (?), There is a way to build a CGRect based CGRect that will center the center part in some container, stretch the left cap until it reaches the center part, and do the same on the right a UIImage ?

+4
source share
3 answers

Ok, I looked like I promised. Here is the solution:

main idea

  • take the left cover and make UIImage with the right side extended
  • glue it with the UIImage arrow
  • and now glue it with the right cover with the left extended side

And here is a small chart, as I think, he could add up

  ______ ........ ________ .........___________ {______|........| | arrow | |.........|__________) left cap|lc flex -------- rc flex | right cap

Code

 // get the images from disk UIImage *leftCap = [UIImage imageNamed:@"leftCap.png"]; UIImage *arrow = [UIImage imageNamed:@"arrow.png"]; UIImage *rightCap = [UIImage imageNamed:@"rightCap"]; // stretch left and right cap // calculate the edge insets beforehand ! UIImage *leftCapStretched = [leftCap resizableImageWithCapInsets:UIEdgeInsetsMake(topInset, leftInset, bottomInset, rightInset)]; UIImage *rightCapStretched = [rightCap resizableImageWithCapInsets:UIEdgeInsetsMake(topInset, leftInset, bottomInset, rightInset)]; CGFloat widthOfAllImages = leftCapStretched.size.width + arrow.size.width + rightCapStretched.size.width; // build the actual glued image UIGraphicsBeginImageContextWithOptions(CGSizeMake(widthOfAllImages, arrow.size.height), NO, 0); [leftCapStretched drawAtPoint:CGPointMake(0, 0)]; [arrow drawAtPoint:CGPointMake(leftCap.size.width, 0)]; [rightCapStretched drawAtPoint:CGPointMake(leftCap.size.width + arrow.size.width, 0)]; UIImage* im = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); // now you should have a ready to use UIImage ;)

Alternative

Inspired by Jonathan Placketts, he responds in the same way as possible with UIImageViews and stretching UIImages as described above.

+6
source

I say, just do it programmatically, yes, it can waste several processor cycles, but it will be more interesting.

OK, here we go ...

Let there be 3 UIImageView defined in the title

 UIImageView *left; UIImageView *center; UIImageView *right;

In viewDidLoad we will create them

 left = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"left.jpg"]]; center = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"center.jpg"]]; right = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"right.jpg"]]; [self.view addSubview:left]; [self.view addSubview:center]; [self.view addSubview:right]; //set the position of the center piece wherever you like, whatever size is right for your arrow [self setCenterFrame:CGRectMake(100,100,100,100)]; //we'll make this function below

then make a method that you can use to set the position of the center image, and the rest of the images will expand in place, stretching to the edges left and right.

 -(void)setCenterFrame:(CGRect)rect { center.frame = rect; // this is your arrow //set size of left left.frame = CGRectMake(0,rect.origin.y, rect.origin.x, rect.size.height); //work out how much space there is to the right float sizeToTheRight = (self.view.bounds.size.width - rect.size.width) - rect.origin.x ; //set size of right right.frame = CGRectMake(rect.size.width + rect.origin.x,rect.origin.y, sizeToTheRight, rect.size.height); }
+1
source

Your strange approach :)

You have three different images that make up one stretchable image, but you want to create it programmatically every time you need to use it in a certain way. Waste treatment cycles. The iOS frame lets you stretch your image the way you do. Open your files in your graphics editor (Photoshop or something similar). Compose one image containing a central image surrounded by a left and right cover.

Now you can use this image like all other images, or you can stretch it as if you were using the UIImage method

 - (UIImage *)resizableImageWithCapInsets:(UIEdgeInsets)capInsets

UIEdgeInsets is a simple framework that identifies your limitations. Suppose you need to stretch 15 points to the left and 20 points right in your inserts: up: 0 bottom: 0 Left: 15 right: 20

What is it.

Here for the details. The article talks about an obsolete method from iOS 5.0 and above, but the theory behind is the same.

-1
source

More articles:


All Articles