Thursday, August 23, 2012

Different TextStyles in a single UILabel

In  general, i will say most of you guyz, will use two UILabels back to back to adjust the text/string of different styles like in colorwise,bold/nonbold etc. But here , i will show you another way to achieve this by simply using one UILabel to show text having different style.
For this section we will customize two different text in a single label,and keep in mind that in the similar way you can even customize more text in a single label.
Lets create a custom UILabel :
   UILabel *customLbl = [[UILabel alloc] initWithFrame:CGRectMake(50, 100, 200, 25)];
   customLbl.backgroundColor = [UIColor yellowColor];
    [self createTwoTextStyleInSingleUILabel:customLbl];// custom method calling
   [self.view addSubview:customLbl];
Now, lets create a custom method for customizing textstyles:
- (void)createTwoTextStyleInSingleUILabel: (UILabel *) myLabel;
Before applying this method,  add QuartzCore framework (needed for CALayers), and CoreText framework(needed for the attributed string.) 
#import <QuartzCore/QuartzCore.h>
#import <CoreText/CoreText.h>  
- (void)createTwoTextStyleInSingleUILabel: (UILabel *) myLabel{
    NSString *firstText = NSLocalizedString(@"First text:", nil);
    NSString *secondText = [NSString stringWithFormat:@"%@ %@",firstText,@"Second text"];
    CATextLayer *myLabelTextLayer;
    /* Create the text layer on demand */
    if (!myLabelTextLayer) {
        myLabelTextLayer = [[CATextLayer alloc] init];
        myLabelTextLayer.backgroundColor = [UIColor clearColor].CGColor;
        myLabelTextLayer.wrapped = NO;
        CALayer *layer = myLabel.layer; //assign layer to your UILabel
        myLabelTextLayer.frame = CGRectMake((layer.bounds.size.width-180)/2 + 10, (layer.bounds.size.height-30)/2 + 10, 180, 30);
        myLabelTextLayer.contentsScale = [[UIScreen mainScreen] scale];
        myLabelTextLayer.alignmentMode = kCAAlignmentCenter;
        [layer addSublayer:myLabelTextLayer];
    }
    /* Create the attributes (for the attributed string) */
    // customizing first string
    CGFloat fontSize = 16;
    UIFont *boldFont = [UIFont boldSystemFontOfSize:fontSize];
    CTFontRef ctBoldFont = CTFontCreateWithName((__bridge CFStringRef)boldFont.fontName, boldFont.pointSize, NULL);
    CGColorRef cgColor = [UIColor redColor].CGColor;
    NSDictionary *attributes = [NSDictionary dictionaryWithObjectsAndKeys:
                                (__bridge id)ctBoldFont, (id)kCTFontAttributeName,
                                cgColor, (id)kCTForegroundColorAttributeName, nil];
    CFRelease(ctBoldFont);
     // customizing second string
    UIFont *font = [UIFont systemFontOfSize:16];
    CTFontRef ctFont = CTFontCreateWithName((__bridge CFStringRef)font.fontName, font.pointSize, NULL);
    CGColorRef cgSubColor = [UIColor blackColor].CGColor;
    NSDictionary *subAttributes = [NSDictionary dictionaryWithObjectsAndKeys:(__bridge id)ctFont, (id)kCTFontAttributeName,cgSubColor, (id)kCTForegroundColorAttributeName, nil];
    CFRelease(ctFont);
    /* Create the attributed string (text + attributes) */
    NSMutableAttributedString *attrStr = [[NSMutableAttributedString alloc] initWithString:secondText attributes:attributes];
    float lengthOfSecondString = 12.0; // length of second string including blank space inbetween text, space in front , space after text.. Be careful, your  app may crash here if length is beyond the second text length (lengthOfSecondString = text length + blank spaces)
    [attrStr addAttributes:subAttributes range:NSMakeRange(firstText.length, lengthOfSecondString)];
    // you can add another subattribute in the similar way as above , if you want change the third textstring style
    /* Set the attributes string in the text layer :) */
    myLabelTextLayer.string = attrStr;
    myLabelTextLayer.opacity = 1.0; //to remove blurr effect
}


No comments:

Post a Comment