Centering image and vertically in UISegmentControl ios?

Question

So I am trying to insert both image and text into a UISegmentControl .Now in this segmentControl I am looking to place image on top and text at its bottom.So I am using a category on UIImage to put title on it like below.However my image and text are still misplaced after a lot of efforts .Has anybody done this before correctly?Any help is appreciated.

 + (id)imageFromImage:(UIImage*)image string:(NSString*)string color:(UIColor*)color
{

  UIFont *font = [UIFont fontWithName:@"Helvetica" size:16];
  CGSize expectedTextSize = [string sizeWithAttributes:@{NSFontAttributeName: font}];
  int width = expectedTextSize.width + image.size.width + 5;
  int height = MAX(expectedTextSize.height, image.size.width);
  CGSize size = CGSizeMake((float)width, (float)height);
  UIGraphicsBeginImageContextWithOptions(size, NO, 0);

  CGContextRef context = UIGraphicsGetCurrentContext();

  CGContextSetFillColorWithColor(context, color.CGColor);

  int fontTopPosition = (height + expectedTextSize.height) / 2;

  CGPoint textPoint = CGPointMake(image.size.width/2, fontTopPosition);

  [string drawAtPoint:textPoint withAttributes:@{NSFontAttributeName: font}];
  // Images upside down so flip them
  CGAffineTransform flipVertical = CGAffineTransformMake(1, 0, 0, -1, 0, size.height);
  CGContextConcatCTM(context, flipVertical);

  CGContextDrawImage(context, (CGRect){ {50,0},{image.size.width-10,image.size.height-10}}, [image CGImage]);

  UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  return newImage;
}

Misplaced how? Could you describe what goes wrong? I'm happy to run your code and see what it does, but what problem should I be looking for? After all, the image and string are probably being placed exactly where your code puts them, so how do I know what you intend if your code doesn't express it? — matt, Dec 17 '14 at 14:13
Actually my title goes far below in the segment , so nearly making it invisible...and for image I am giving x = 50 value.So it is not ideal isn't it? .I mean giving hardcoded value.But I don't know another approach as of now. — iSD, Dec 17 '14 at 14:19
Okay, so the problem is not that image-and-string is drawn "misplaced", but that the whole thing doesn't fit nicely in a segment? — matt, Dec 17 '14 at 14:23
May I also ask: why are you using CGContextDrawImage? You can avoid this whole "flipping" issue if you just tell a UIImage to draw itself. Wouldn't that be a lot simpler? And then it would also be easier to _place_ the image. — matt, Dec 17 '14 at 14:25
Is this really what you mean: `int height = MAX(expectedTextSize.height, image.size.width);` You want to base your image's _height_ on the original image's _width_? Really? — matt, Dec 17 '14 at 14:31

matt · Answer 1 · 2014-12-17T14:33:47.293

I'm not going to rewrite your code for you, but I definitely want to show you the way out of the woods. Step one is to stop using CGContextDrawImage, as this is involving you in the complexities of "flipping" and transforms. You should get rid of all that. To draw an image into your image, just draw it! Use the UIImage method drawAtPoint: or (if you need to resize as you go) drawInRect:. Then you can easily place the image exactly where you want it.

I'm also concerned about the whole question of how big your ultimate image should be. You are creating your image's ultimate size:

CGSize size = CGSizeMake((float)width, (float)height);
UIGraphicsBeginImageContextWithOptions(size, NO, 0);

So if the image is coming out the wrong size, you need to change how you are calculating that width and height. What I would suggest you do is just the opposite of what you are doing now. Instead of letting the image and the text tell you what to do, start with the size you really want for an image that will fit nicely into your segment, and then fit the image and text into it as you draw.

See this section of my book: http://www.apeth.com/iOSBook/ch15.html#_uiimage_drawing - look particularly at the second example where I place a resized drawing _exactly_ where I want it by calculating its size and position based on its original size. — matt, Dec 17 '14 at 14:29

Centering image and vertically in UISegmentControl ios?

1 Answers1