Set Text in one UITextField

Question

I'm making a chat application. When a message arrives then it has to say who sent it. For example, if I were the sender then it should say

Takeshi: message

Andres: message

I want "Takeshi" and "Andres" to be of a different color but on the same line with the message, with line wrapping, like this:

Takeshi: some message text, text, text , text
         text, text, text end.

I am trying the following:

• Calculate the size of the message.
• Calculate the size of the sender's name.
• Create string of " " with the length of the sender's name.

but " " not is not sufficient.

I make this:

NSString *from;

if(usr){
    from = [NSString stringWithFormat:@"%@: ", @"Yo"];
}else{
    from = [NSString stringWithFormat:@"%@:  ", [_lbSupportName text]];
}
//This give me one string of n characters of  ' ' character.


NSString *spaces = [ChatView stringWithRepeatCharacter:' ' times:from.length * 2];

NSString *mensaje = [NSString stringWithFormat:@"%@ %@", spaces, msg];



//Calculating the height
CGSize messageSize = [mensaje sizeWithFont:[UIFont fontWithName:DEFAULT_TEXTFONT size:20]
                           constrainedToSize:CGSizeMake(_scvConversation.frame.size.width - 10, FLT_MAX)
                               lineBreakMode:UILineBreakModeWordWrap];

CGSize fromSize = [from sizeWithFont:[UIFont fontWithName:DEFAULT_TEXTFONT size:22]
                   constrainedToSize:CGSizeMake(FLT_MAX, FLT_MAX)
                       lineBreakMode:UILineBreakModeWordWrap];


//Image Background
UIImageView *image = [[UIImageView alloc] initWithFrame:CGRectMake(5, yConversationPosition + 5, _scvConversation.frame.size.width - 10, messageSize.height + 30)];

yConversationPosition += image.frame.size.height + 5;



//Create the Label From
UILabel *lb_From = [[UILabel alloc] initWithFrame:CGRectMake(0, 9, fromSize.width, 30)];
[lb_From setFont:[UIFont fontWithName:DEFAULT_TEXTFONT size:20]];
[lb_From setBackgroundColor:[UIColor clearColor]];
[lb_From setText:from];



//Create the Label Message
UILabel *lb_WriteMessage = [[UILabel alloc] initWithFrame:CGRectMake(5, 5, image.frame.size.width-10, image.frame.size.height - 10)];
[lb_WriteMessage setNumberOfLines:messageSize.height / DEFAULT_TEXTSIZE];
[lb_WriteMessage setFont:[UIFont fontWithName:DEFAULT_TEXTFONT size:20]];
[lb_WriteMessage setText:mensaje];
[lb_WriteMessage setBackgroundColor:[UIColor clearColor]];
[lb_WriteMessage setTextColor:[UIColor colorWithRed:(92/255.0f) green:(98/255.0f) blue:(101/255.0f) alpha:1]];



if(usr){
    [image setImage:[UIImage imageNamed:@"chat-mensajes-yo.png"]];
    [lb_From setTextColor:[UIColor colorWithRed:(230/255.0f) green:(85/255.0f) blue:(84/255.0f) alpha:1]];
}else{
    [image setImage:[UIImage imageNamed:@"chat-mensajes-asesor.png"]];
    [lb_From setTextColor:[UIColor colorWithRed:(28/255.0f) green:(168/255.0f) blue:(175/255.0f) alpha:1]];
}


[lb_WriteMessage addSubview:lb_From];
[image addSubview:lb_WriteMessage];
[_scvConversation addSubview:image];

//Set the contentSize of the scv_Message and scroll to the new Message
[_scvConversation setContentSize:CGSizeMake(0, yConversationPosition)];


if(_scvConversation.contentSize.height > _scvConversation.frame.size.height){
    //Scroll to last Message
    float diference = yConversationPosition - _scvConversation.frame.size.height +5;
    [_scvConversation setContentOffset:CGPointMake(0, diference)];
}

[image release];
[lb_WriteMessage release];

Please help, I could not do that. :/

Answer 1

You should use two labels. Create the first label for "Name:" with the color you want (1 line label) and calcuate its width based on the text, then create a new label and calculate its height and number of lines and position it using:

[lb_WriteMessage setFrame:CGRectMake(lb_From.frame.origin.x + lb_From.frame.size.width + spacer, lb_from.origin.y, messageSize.width, messageSize.height)];

(where spacer is the number of pixels space you want between the labels).

Answer 2

Take a look on Core Text API. It's not a simple tool, but it gives you incredible flexibility when you understand how it works. Here is a good start point: http://www.cocoanetics.com/2011/01/befriending-core-text/

Probably later you will want to use more complicated logic in your chat like names highlighting in messages, or some other rich text formating. You can do all this with core text.