How to display image and text in UI Segment View controller with Swift

Question

Could someone please help me on implementing a segmentedViewController by appending image and title(both)..Image on top and title is at the bottom of the image in swift language. I have gone through staackoverflow and could find solution in objective C.While converting it to Swift I have stuck at the following objective-c statement

CGContextDrawImage(context, (CGRect){ {0, (height - image.size.height) / 2}, {image.size.width, image.size.height} }, [image CGImage]);
Link I followed: UISegmentedControl with Image and Title

My Swift conversion code:

extension UIImage {

public func textEmbededImage(image: UIImage, string: String, color:UIColor) -> UIImage {    

    let font = 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 textPoint: CGPoint = CGPointMake(image.size.width + 5, fontTopPosition)  

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

    //I am stuck here.. please help me on it.
    //Images upside down so flip them


    return image
}

Answer 1

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
}

Hope this helps who ever else needs this in the future.

Answer 2

This works expect that now in iOS 12 and dark and light mode, the tint color recolorizes the image. I have a blue dot image that now is only rendered as black.