[Xamarin.iOS] How to get a multilines label ?

June 26th, 2015 | Posted by Tom in .NET | Xamarin | Read: 8,223

It’s always surprising to see how simples things doable in XAML can be a real pain when we try to do them using another language/technology.

This week, one of my customers using Xamarin asked me how to get a multilines label on iOS. After spending some time over Internet to search for a possible solution, I’ve ended with this one.

First, you need to calculate what will be the height of the label, according to the text you’ll have on it:

var labelSize = new NSString ("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in sapien at tellus sollicitudin rutrum eu ut mi. Nunc vel cursus augue. Integer tempus sem orci, ac auctor quam bibendum non. Curabitur porttitor bibendum augue at auctor. In et cursus justo, eget finibus tortor. Donec fringilla magna dui, sed condimentum risus rhoncus in. In quis congue sem, quis elementum tellus. Cras quis orci ante.").
                    GetBoundingRect (
                        new CGSize (this.View.Frame.Width, float.MaxValue),
                        NSStringDrawingOptions.UsesLineFragmentOrigin,
                        new UIStringAttributes () { Font = UIFont.SystemFontOfSize (8) },
                        null);

As you can see, you have to specify the different properties that will be applied to the text (font size, etc.) but, most important, you have to specified the available space. Here, I indicate that the label will expand on all the width of the current view and will be able to have any height.

Once this is done, the variable labelSize will contains the desired size of the label so you’ll be able to set the height correctly:

var label = new UILabel (new CGRect(0, 0, this.View.Frame.Width, labelSize.Height))
{
    Text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque in sapien at tellus sollicitudin rutrum eu ut mi. Nunc vel cursus augue. Integer tempus sem orci, ac auctor quam bibendum non. Curabitur porttitor bibendum augue at auctor. In et cursus justo, eget finibus tortor. Donec fringilla magna dui, sed condimentum risus rhoncus in. In quis congue sem, quis elementum tellus. Cras quis orci ante.",
    Font = UIFont.SystemFontOfSize (8),
    Lines = 0,
    LineBreakMode = UILineBreakMode.WordWrap
};

this.Add(label);

Here, I simply add a label to the location 0, 0 and I specified the frame width for the width and I use the labelSize.Height property to set the height.

Don’t forget to set the properties Lines to 0 and LineBreakMode to WordWrap! Indeed, set 0 to the Lines property allows the label to have an unlimited number of lines and the LineBreakMode property tells it how to break the lines (it can wrap words, characters, etc.)

Also, each text properties (font size, typeface, etc.) need to be the same as the one you used to calculate the size of the label.

 

Happy coding!

You can follow any responses to this entry through the RSS 2.0 You can leave a response, or trackback.

Add Comment Register



Leave a Reply