How to Find Out Width of Truncated UILabel Text

Found out my tip "How to Float an Icon after UILabel" worked only in positive scenarios. If your text string is longer than UILabel width, icon could have been pushed out of sight. In worst case nobody would ever have seen the icon!

// Title
label = (UILabel *)[cell viewWithTag:1];
label.text = @"This is a very long title which is too long";

// Icon
image = (UIImageView *)[cell viewWithTag:10];
image.image = [UIImage imageNamed:@"logo.png"];

Some measurements of different methods, just to check what is available:

CGSize frame1 = label.frame;
// 205x21
CGSize frame2 = [label sizeThatFits:label.frame.size];
// 291x19
CGSize frame3 = [label.text sizeWithFont:label.font constrainedToSize:label.frame.size];
// 163x19
CGSize frame4 = [label.text sizeWithFont:label.font constrainedToSize:label.frame.size lineBreakMode:label.lineBreakMode];
// 203x19
CGSize frame5 = [label.text sizeWithFont:label.font forWidth:label.frame.size.width lineBreakMode:label.lineBreakMode];
// 203x19

Next icon positioning. Here you should have calculations to compensate for different icon sizes (in case all of your icons are not same size):

// Icon positioning
CGSize frame = image.frame;
frame.origin.x = label.frame.origin.x + frame5.width + 4;
image.frame = frame;

Ok, now that's perfect (until next defect report)!

How to Float an Icon after UILabel

Want to place a floating icon right after a variable lenght text string - using Interface Builder? Wonderful helper that IB tool or so I thought...

First create a UITableViewCell template with IB, put there a fixed lenght UILabel followed by a UIImageView. No problems, their values are easy to setup at cellForRowAtIndexPath with view tag id numbers:

UILabel *label = nil;
UIImageView *image = nil;
CGRect frame;

// Title
label = (UILabel *)[cell viewWithTag:1];
label.text = @"Title text";

But how to "float" that image right after text string? UILabel is fixed sized, so that won't help. Have to check the size of label.text instead:

// Icon
image = (UIImageView *)[cell viewWithTag:10];
image.image = [UIImage imageNamed:@"logo.png"];

// Icon positioning
frame = image.frame;
CGSize f = [label sizeThatFits:label.frame.size];
frame.origin.x = label.frame.origin.x + f.width + 4;
image.frame = frame;

That's it, very simple! Just beware that your tag numbers MUST be unique.

I had a problem that Interface Builder wanted to set UITableViewCell tag same as my image tag. No errors, no warnings, no indications of problem - except that I couldn't get my image frame no matter how much I banged head into brickwall! Removing tag didn't help, it just automagically came back. Ouch!

How to Get Rid of Keyboard with a Tap on Background

There is a screen with a couple of UITextFields and UIButtons. When user taps on UITextField, keyboard popups. Very nice of iPhone SDK to provide such a feature! Each UITextField and UIButton is a clickable object with easy callbacks.

But how do you get rid of keyboard?

Should you have a special "Please hide keyboard" button or tap into accelerometer to notice when user gets desperate enough to start shaking the device? There's an easier way...

Add a full-screen empty non-editable UITextView over the whole screen. Select each clickable object e.g. UITextField, UIButton or other UITextViews and use Interface Builder menu item Layout - Send to Front to place them on top of your full-screen UITextField.

When user clicks on anywhere except your clickable objects, keyboard disappears. What a relief!

Please note that, if you leave any non-clickable objects e.g. UILabel on top of your full-screen UITextView, clicking on those spots will not hide keyboard.

How to Do Totally Custom Titlebar

iPhone SDK does not support a "titlebar" with custom background image, fully visible title text and titlebar buttons.

You can create semi-transparent UINavigationBar or UIToolbar (style Black Translucent) to see custom background (UIView just below), but your image is still dimmed. You can tune Alpha value between 1 and 0, but at the same time your title text and buttons visibility change, too.

Another solution is to create a custom setup, which just looks like a titlebar:




Inherit your own MyToolbar class from UIToolbar. Place on it 3 UIBarButtonItems: one for left side button, one Flexible Space UIButton in middle and one for right side button. The middle flexible sized button should push your other button to correct locations. If not, change it to fixed size and reside as you wish. Your number of button can also differ, naturally. I used 5.

Here's the full source code for your class:

#import 
@interface MyToolbar : UIToolbar {
}
@end

#import "MyToolbar.h"
@implementation MyToolbar

- (void)drawRect:(CGRect)rect 
{
    // Warning: Hardcoded for portrait size
    UIImage *image = [[UIImage imageNamed:@"sample.png"] retain];
    [image drawInRect:rect];
    [image release];    
}
@end

Place a UILabel on top of your toolbar, resize to fit the available space between other buttons. Change font e.g. Helvetica Bold size 18, color red, , shadow black and background transparent (opacity 0%).

How to Put a Smiley Into Your UILabel

Sometimes iPhone SDK just makes you smile, things you expect to be difficult turn out to be really simple. Take for example a smiley face :)

NSRange range = {NSNotFound, 0};
NSString *s = @"This is a smiley :) face";

range.location = 0;
range.length = [s length];
s = [s stringByReplacingOccurrencesOfString:@":)"
                                    withString:@"\ue415"
                                       options:NSCaseInsensitiveSearch
                                         range:range];

iPhone contains by default a Japanese font, which supports unicode emoji characters. As a result you suddenly have built-in supports for about 460 graphical icons, all of which you can put anywhere as part of any text string!

Here's full list of emoji characters in iPhone. Have fun ;)