UISegmentedControl with Image and Title

Question

I am using a UISegmentedControl inside a UIToolBar as button. I can't use a normal UIButtonBarItem , because I need to set the tintColor and support iOS 4.3. So I'm using following code:

UISegmentedControl* searchButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"", nil]];
[searchButton setImage:[UIImage imageNamed:@"search_picto"] forSegmentAtIndex:0];
searchButton.momentary = YES;
searchButton.segmentedControlStyle = UISegmentedControlStyleBar;
searchButton.tintColor = [UIColor colorWithRed:0.27 green:0.60 blue:0.20 alpha:1.00];
[searchButton addTarget:self action:@selector(actionSearch:) forControlEvents:UIControlEventValueChanged];

This works great, but is there a way I can have a Text / Title next to my image? The method setTitle: removes the image. There must be a other way...

Thanks for your help.

--

Edit: I decided to add the text directly onto the UIImageView like this:

NSString* label = @"My Label";
UIImage* image = [self addText:label toImage:[UIImage imageNamed:@"icon"]];
[_segmentedControl insertSegmentWithImage:image atIndex:0 animated:NO];
[_segmentedControl setWidth:image.size.width + 10]; // add some margin on the right



- (UIImage *)addText:(NSString *)text toImage:(UIImage *)image {
    UIFont* font = [UIFont boldSystemFontOfSize: 12];
    CGSize expectedSize = [text sizeWithFont:font];

    [self retinaAwareUIGraphicsBeginImageContext:CGSizeMake(image.size.width + expectedSize.width + 10, image.size.height)];
    [image drawAtPoint: CGPointZero];
    [[UIColor whiteColor] set];
    [text drawAtPoint: CGPointMake(30, 2) withFont:font];
    image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

- (void)retinaAwareUIGraphicsBeginImageContext:(CGSize) size {
    CGFloat scale = -1.0;
    if (scale<0.0) {
        UIScreen *screen = [UIScreen mainScreen];
        if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 4.0) {
            scale = [screen scale];
        }
        else {
            scale = 0.0;
        }
    }
    if (scale>0.0) {
        UIGraphicsBeginImageContextWithOptions(size, NO, scale);
    }
    else {
        UIGraphicsBeginImageContext(size);
    }
}

Answer 1

You can do it:

add category for UIImage:

in UIImage+UISegmentIconAndText.h

@interface UIImage (UISegmentIconAndText)

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

@end

in UIImage+UISegmentIconAndText.m

#import "UIImage+UISegmentIconAndText.h"

@implementation UIImage (UISegmentIconAndText)
+ (id) imageFromImage:(UIImage*)image string:(NSString*)string color:(UIColor*)color
{
    UIFont *font = [UIFont systemFontOfSize:16.0];
    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 + 5, 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){ {0, (height - image.size.height) / 2}, {image.size.width, image.size.height} }, [image CGImage]);
    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();
    return newImage;
}
@end

in your code implement Segment:

UIImage *imageWithText = [UIImage imageFromImage:[UIImage imageNamed:@"images/jobaids_tab_icon"] string:@"Hello", nil) color:[UIColor whiteColor]];

[_segmentedController setImage:imageWithText forSegmentAtIndex:0];

Answer 2

Swift 5.x

extension UIImage {
    
    class func textEmbededImage(image: UIImage, string: String, color:UIColor, imageAlignment: Int = 0, segFont: UIFont? = nil) -> UIImage {
        let font = segFont ?? UIFont.systemFont(ofSize: 16.0)
        let expectedTextSize: CGSize = (string as NSString).size(withAttributes: [NSAttributedString.Key.font: font])
        let width: CGFloat = expectedTextSize.width + image.size.width + 5.0
        let height: CGFloat = max(expectedTextSize.height, image.size.width)
        let size: CGSize = CGSize(width: width, height: height)
        UIGraphicsBeginImageContextWithOptions(size, false, 0)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        context.setFillColor(color.cgColor)
        let fontTopPosition: CGFloat = (height - expectedTextSize.height) / 2.0
        let textOrigin: CGFloat = (imageAlignment == 0) ? image.size.width + 5 : 0
        let textPoint: CGPoint = CGPoint.init(x: textOrigin, y: fontTopPosition)
        string.draw(at: textPoint, withAttributes: [NSAttributedString.Key.font: font])
        let flipVertical: CGAffineTransform = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: size.height)
        context.concatenate(flipVertical)
        let alignment: CGFloat =  (imageAlignment == 0) ? 0.0 : expectedTextSize.width + 5.0
        context.draw(image.cgImage!, in: CGRect.init(x: alignment, y: ((height - image.size.height) / 2.0), width: image.size.width, height: image.size.height))
        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
        return newImage!
    }
    
}

Example of usage:

segmentedControl.setImage(
    UIImage.textEmbededImage(
        image: UIImage(systemName: "photo")!, 
        string: "Standard", 
        color: .black
    ), 
    forSegmentAt: 0
)

Answer 3

Swift 5

For those of us who like to use modern API wherever it is possible:

extension UIImage {
    static func textEmbeded(image: UIImage,
                           string: String,
                isImageBeforeText: Bool,
                          segFont: UIFont? = nil) -> UIImage {
        let font = segFont ?? UIFont.systemFont(ofSize: 16)
        let expectedTextSize = (string as NSString).size(withAttributes: [.font: font])
        let width = expectedTextSize.width + image.size.width + 5
        let height = max(expectedTextSize.height, image.size.width)
        let size = CGSize(width: width, height: height)

        let renderer = UIGraphicsImageRenderer(size: size)
        return renderer.image { context in
            let fontTopPosition: CGFloat = (height - expectedTextSize.height) / 2
            let textOrigin: CGFloat = isImageBeforeText
                ? image.size.width + 5
                : 0
            let textPoint: CGPoint = CGPoint.init(x: textOrigin, y: fontTopPosition)
            string.draw(at: textPoint, withAttributes: [.font: font])
            let alignment: CGFloat = isImageBeforeText
                ? 0
                : expectedTextSize.width + 5
            let rect = CGRect(x: alignment,
                              y: (height - image.size.height) / 2,
                          width: image.size.width,
                         height: image.size.height)
            image.draw(in: rect)
        }
    }
}

Answer 4

For Swift.

segFont is the font for the embedded text.

imageAlignment is the alignment of the image appearing left or right of the text.

set imageAlignment to 0 for left alignment (image will appear to the left of the text) and 1 for right alignment (image will appear to the right of the text)

class func textEmbededImage(image: UIImage, string: String, color:UIColor, imageAlignment: Int = 0, segFont: UIFont? = nil) -> UIImage {

let font = segFont ?? UIFont.systemFontOfSize(16.0)

let expectedTextSize: CGSize = (string as NSString).sizeWithAttributes([NSFontAttributeName: font])

let width: CGFloat = expectedTextSize.width + image.size.width + 5.0

let height: CGFloat = max(expectedTextSize.height, image.size.width)

let size: CGSize = CGSizeMake(width, height)

UIGraphicsBeginImageContextWithOptions(size, false, 0)

let context: CGContextRef = UIGraphicsGetCurrentContext()!

CGContextSetFillColorWithColor(context, color.CGColor)

let fontTopPosition: CGFloat = (height - expectedTextSize.height) / 2.0

let textOrigin: CGFloat = (imageAlignment == 0) ? image.size.width + 5 : 0
let textPoint: CGPoint = CGPointMake(textOrigin, fontTopPosition)


string.drawAtPoint(textPoint, withAttributes: [NSFontAttributeName: font])
let flipVertical: CGAffineTransform = CGAffineTransformMake(1, 0, 0, -1, 0, size.height)
CGContextConcatCTM(context, flipVertical)

let alignment: CGFloat =  (imageAlignment == 0) ? 0.0 : expectedTextSize.width + 5.0
CGContextDrawImage(context, CGRectMake(alignment, ((height - image.size.height) / 2.0), image.size.width, image.size.height), image.CGImage)
let newImage = UIGraphicsGetImageFromCurrentImageContext()
UIGraphicsEndImageContext()

return newImage
}

Answer 5

Swift 3

extension UIImage{


class func textEmbededImage(image: UIImage, string: String, color:UIColor, imageAlignment: Int = 0, segFont: UIFont? = nil) -> UIImage {
    let font = segFont ?? UIFont.systemFont(ofSize: 16.0)
    let expectedTextSize: CGSize = (string as NSString).size(attributes: [NSFontAttributeName: font])
    let width: CGFloat = expectedTextSize.width + image.size.width + 5.0
    let height: CGFloat = max(expectedTextSize.height, image.size.width)
    let size: CGSize = CGSize(width: width, height: height)
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    let context: CGContext = UIGraphicsGetCurrentContext()!
    context.setFillColor(color.cgColor)
    let fontTopPosition: CGFloat = (height - expectedTextSize.height) / 2.0
    let textOrigin: CGFloat = (imageAlignment == 0) ? image.size.width + 5 : 0
    let textPoint: CGPoint = CGPoint.init(x: textOrigin, y: fontTopPosition)        
    string.draw(at: textPoint, withAttributes: [NSFontAttributeName: font])
    let flipVertical: CGAffineTransform = CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: size.height)
    context.concatenate(flipVertical)
    let alignment: CGFloat =  (imageAlignment == 0) ? 0.0 : expectedTextSize.width + 5.0
    context.draw(image.cgImage!, in: CGRect.init(x: alignment, y: ((height - image.size.height) / 2.0), width: image.size.width, height: image.size.height))
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return newImage!
}

}

Answer 6

Swift 5

I needed to add an image on up-right corner, so I added imageOffset.

extension UIImage {
  static func textEmbeded(image: UIImage, string: String, titleColor: UIColor, imageBeforeText: Bool, imageOffset: CGPoint, segFont: UIFont? = nil) -> UIImage {
    let font = segFont ?? UIFont.systemFont(ofSize: 16)
    let expectedTextSize = (string as NSString).size(withAttributes: [.font: font])
    let width = expectedTextSize.width + image.size.width +
                max(0, imageBeforeText ? imageOffset.x * -1 : imageOffset.x)
    let height = max(expectedTextSize.height, (image.size.height / 2 + abs(imageOffset.y)) * 2)
    let size = CGSize(width: width, height: height)

    let renderer = UIGraphicsImageRenderer(size: size)
    return renderer.image { context in
      let textTopPosition: CGFloat = (height - expectedTextSize.height) / 2
      let textLeftPosition: CGFloat = imageBeforeText ? image.size.width - imageOffset.x : 0
      let textPoint: CGPoint = CGPoint.init(x: textLeftPosition, y: textTopPosition)
      string.draw(at: textPoint, withAttributes: [.font: font, .foregroundColor: titleColor])
    
      let imageLeftPosition: CGFloat = imageBeforeText ? 0 : expectedTextSize.width + imageOffset.x
      let imageTopPosition: CGFloat = (height - image.size.height) / 2 + imageOffset.y
      let imageRect = CGRect(x: imageLeftPosition,
                             y: imageTopPosition,
                         width: image.size.width,
                        height: image.size.height)
      image.draw(in: imageRect)
    }.withRenderingMode(.alwaysOriginal)
  }
}

• Image-overlapping-text is not implemented
• When imageBeforeText is true, minus x offset means more space between image and text.
• Used withRenderingMode(.alwaysOriginal) to get different colors for text and image

Answer 7

try this:

UISegmentedControl* searchButton = [[UISegmentedControl alloc] initWithItems:[NSArray arrayWithObjects:@"", nil]];
[searchButton insertSegmentWithImage:[UIImage imageNamed:@"up_button.png"] atIndex:0 animated:YES];
[searchButton insertSegmentWithImage:[UIImage imageNamed:@"down_button.png"] atIndex:1 animated:YES];
searchButton.segmentedControlStyle = UISegmentedControlStyleBar;
searchButton.tintColor = [UIColor colorWithRed:0.27 green:0.60 blue:0.20 alpha:1.00];
[searchButton setMomentary:YES];