Add image to the left of a UILabel

Question

I have this relatively simple question, I think. Imagine I have a UILabel with some text in it. Then, I want on the left, or right side of the text also an image to be displayed (added).

Something like this:

http://www.zazzle.com/blue_arrow_button_left_business_card_templates-240863912615266256

Is there a way to do it, using, say UILabel methods? I didn't find such.

I know, but in my functionality (please look also at the image I linked), I basically want the uiimageview (or just the image) sort of embedded inside the Label. was I clear? Thanks. I want them both to be inside a single control. For instance, I'd expect UILabel to have such method: myLabel.addImageToTheLeft()... etc. — user1903992, Dec 18 '12 at 11:40
possible duplicate of [How to embed small icon in UILabel](http://stackoverflow.com/questions/19318421/how-to-embed-small-icon-in-uilabel) — bummi, Jun 29 '15 at 10:05
I've posted an answer to similar question here: https://stackoverflow.com/a/31112219/553939 It's written in swift but code is very easy convertible to Obj-C — anatoliy_v, Jun 29 '15 at 09:31

score 7 · Answer 1 · answered Mar 28 '14 at 23:49

Just in case someone else look this up in the future. I would subclass the UIlabel class and add an image property.

Then you can override the setter of the text and image property.

- (void)setImage:(UIImage *)image {
    _image = image;

    [self repositionTextAndImage];
}

- (void)setText:(NSString *)text {
    [super setText:text];

    [self repositionTextAndImage];
}

In repositionTextAndImage, you can do your positioning calculation. The code I pasted, just insert an image on the left.

- (void)repositionTextAndImage {
    if (!self.imageView) {
        self.imageView = [[UIImageView alloc] init];
        [self addSubview:self.imageView];
    }

    self.imageView.image = self.image;
    CGFloat y = (self.frame.size.height - self.image.size.height) / 2;
    self.imageView.frame = CGRectMake(0, y, self.image.size.width, self.image.size.height);
}

Lastly, override drawTextInRect: and make sure you leave space on the left of your label so that it does not overlap with the image.

- (void)drawTextInRect:(CGRect)rect {
    // Leave some space to draw the image.
    UIEdgeInsets insets = {0, self.image.size.width + kImageTextSpacer, 0, 0};
    [super drawTextInRect:UIEdgeInsetsInsetRect(rect, insets)];
}

I just recently used this method and wanted to add some notes: In order to have the intrinsic content size in IB work correctly for this label subclass, you should also override the intrinsicContentSize method to account for the additional width. Also, using NSAttributedString with attachments is possibly a more desirable method. — BreadicalMD, Mar 11 '15 at 16:42

score 2 · Answer 2 · answered Feb 04 '16 at 07:24

I just implemented similar thing in my Live Project, hope it will be helpful.

-(void)setImageIcon:(UIImage*)image WithText:(NSString*)strText{

    NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
    attachment.image = image;
    float offsetY = -4.5; //This can be dynamic with respect to size of image and UILabel
    attachment.bounds = CGRectIntegral( CGRectMake(0, offsetY, attachment.image.size.width, attachment.image.size.height));

    NSMutableAttributedString *attachmentString = [[NSMutableAttributedString alloc] initWithAttributedString:[NSAttributedString attributedStringWithAttachment:attachment]];
    NSMutableAttributedString *myString= [[NSMutableAttributedString alloc] initWithString:strText];

    [attachmentString appendAttributedString:myString];

    _lblMail.attributedText = attachmentString;
}

score 1 · Accepted Answer · answered Dec 18 '12 at 11:50

1

Create a custom UIView that contains a UIImageView and UILabel subview. You'll have to do some geometry logic within to size the label to fit the image on the left or right, but it shouldn't be too much.

answered Dec 18 '12 at 11:50

Guy Kogus

7,251
1
27
32

1

Hi thanks. so there is no built in way to do this? actually now I am doing smth like you said. I have one view, and two subviews: one UILabel and one UIimageView (both positioned accordingly using the Interface builder). I think this should work this way? Thanks. – user1903992 Dec 18 '12 at 12:03

score 1 · Answer 4 · answered Dec 18 '12 at 11:50

1

Create a UIImageView with your image and add the UILabel on top like

[imageview addSubView:label];

Set the frame of the label accordingly to your required position.

answered Dec 18 '12 at 11:50

jimpic

5,360
2
28
37

Add image to the left of a UILabel

4 Answers4