4

I want to display an image next to a 'UILabel', however 'UILabel' has variable text length, so I don't know where to place the image.

Image should move according to the size of the label.

How can I accomplish this?

Janmenjaya
  • 4,149
  • 1
  • 23
  • 43
iOSNoob
  • 1,420
  • 2
  • 16
  • 30
  • `Autolayout` would be a solution, it will allow you to define that the image should X number of point after the label. Start by reading the [Auto Layout Guide](https://developer.apple.com/library/IOs/documentation/UserExperience/Conceptual/AutolayoutPG/Introduction/Introduction.html) – rckoenes Oct 14 '14 at 10:13
  • 1
    Or you can use "sizeToFit" method. – Marco Pace Oct 14 '14 at 10:13
  • Yes `sizeToFit` will also work, but then you have to layout the image again, with autolayout this is done for you. – rckoenes Oct 14 '14 at 10:14
  • how exactly i can change size & reposition the image next to label ? – iOSNoob Oct 14 '14 at 10:31

4 Answers4

5

Although Keshav answer will work, it's deprecated

try:

NSDictionary *attributes = @{NSFontAttributeName: [UIFont fontWithName:@"HelveticaNeue" size:14]};

CGRect rect = [textToMeasure boundingRectWithSize:CGSizeMake(width, CGFLOAT_MAX)
                                          options:NSStringDrawingUsesLineFragmentOrigin
                                       attributes:attributes
                                          context:nil];

Then use the Size of rect to determine your positioning and label size.

CGRect currentLabelFrame = self.label.frame;

currentLabelFrame.size.width = rect.size.width;

self.label.frame = currentLabelFrame;
theiOSDude
  • 1,480
  • 2
  • 21
  • 36
3

Using auto layout, you can do the following:

  1. Set the numberOfLines property to 0
  2. Set width constraint of the UILabel (click on the label, bottom right there's an icon with a box in between two lines (Pin))
  3. Select the constraint and edit the value in the Size Inspector (top right, second last icon) of the width constraint and change the constant '=' to '>='
Anil
  • 2,430
  • 3
  • 37
  • 55
  • how exactly i can change size of label according to its string length & reposition the image next to label ? – iOSNoob Oct 14 '14 at 10:35
  • You'll need to add constraints between the UIImageView and UILabel. Check out Apple's documentation. https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/AutolayoutPG/AutoLayoutbyExample/AutoLayoutbyExample.html – Anil Oct 14 '14 at 10:45
  • I am not able to figure out how to achieve that ! :'( – iOSNoob Oct 14 '14 at 10:56
1

I had the same question and I wanted to do this in the storyboard with autolayout and not in code. So I made the following app to test out the concept.

enter image description here

I added Auto Layout constraints for the "Variable Text Label" and the image. I pinned the label to the left edge of the container (but I didn't set any constraints for the width). Then I pinned the image to the right edge of the label. (I also added constraints to "Vertical Center in Container" for both the label and the image.)

When I changed the label text programmatically, the image automatically changed its position and stayed next to the label.

Here is the simple code I used. (Sorry, its in Swift, not objective-C.)

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var textField: UITextField!
    @IBOutlet weak var myLabel: UILabel!

    @IBAction func button(sender: AnyObject) {
        myLabel.text = textField.text
    }
}

For other people who view this question and don't know how to even add constraints (like me not long ago), here is another one of my answers.

Community
  • 1
  • 1
Suragch
  • 484,302
  • 314
  • 1,365
  • 1,393
0

you can use the below code:

label.numberOfLines = 0;
CGRect frame = label.frame;
labelSize = [@"message" sizeWithFont:font constrainedToSize:CGSizeMake(frame.size.width, MAXFLOAT) lineBreakMode:UILineBreakModeWordWrap];
frame.size = labelSize;
label.frame = frame;
Keshav
  • 2,965
  • 3
  • 25
  • 30