how to use TTAreaStyle to create label style with icon
TTAreaStyle is a utility style class depend on three20.(please follow this link ttareastyleforthree20 ) It enhances the style of three20 for it could create an independent rect for other styles drawn on it. You can create some more complex style for TTView .Such as , a label with a icon in the front of it or a view with separated segments with different style. for example ,look at the imgs showed below.
![]()
usually , we may be adopt the method creating a view with a UIImageView and a Label added to it . when there is a single exception , for saving time ,we feel free to use it . Honestly and personally , I have to say , it is a ugly method .I was thinking , is there any cheap way to implement it . The style of Three20 make it achievable. All you want to do just is appending a style to a view inherited from TTView. Here , I used TTLable.
- (TTLabel*)authorLabel { if (!_authorLabel) { _authorLabel = [[TTLabel alloc] initWithFrame:CGRectMake(0, 0, self.width - 2 * BookSummaryViewMargin, 0)]; _authorLabel.style = TTSTYLE(bookSummaryAuthorStyle); _authorLabel.backgroundColor = [UIColor clearColor]; [self addSubview:_authorLabel]; } return _authorLabel; }
In the Global stylesheet , adding this,
-(TTStyle*) bookSummaryAuthorStyle{ CGFloat timeIconWidth = 10; CGFloat timeIconHeight = 12; return [TTAreaStyle styleWithBlock:^(CGRect rect ,id data){ return CGRectMake(0, (CGRectGetHeight(rect) - [[data objectAtIndex:0] floatValue]) / 2 , 10, 12); } data:[NSArray arrayWithObjects:[NSNumber numberWithFloat:timeIconWidth], [NSNumber numberWithFloat:timeIconHeight],nil] style: [TTImageStyle styleWithImageURL:@"bundle://time.png" next:nil] next: [TTBoxStyle styleWithPadding:UIEdgeInsetsMake(0, 20, 0, 0) next: [TTTextStyle styleWithFont: [UIFont systemFontOfSize:14] color: RGBCOLOR(128,128,128) minimumFontSize: 0 shadowColor: RGBCOLOR(171,171,171) shadowOffset: TTSTYLEVAR(photoCaptionTextShadowOffset) textAlignment: UITextAlignmentLeft verticalAlignment: UIControlContentVerticalAlignmentCenter lineBreakMode: UILineBreakModeCharacterWrap numberOfLines: 6 next: nil]]]; }
With TTAreaStyle , I creat a independent area which you could draw anything you like . Here , i added
[TTImageStyle styleWithImageURL:@"bundle://time.png" next:nil]
And then , shrinked the origin draw area by using
[TTBoxStyle styleWithPadding:UIEdgeInsetsMake(0, 20, 0, 0) next:
It's worth nothing that the param rect in the block wil let you know the size of TTLabel which other style don't offer. It 's a amazing characteristic that help you calculate the position of elements in the independent area . Off course . do nesting if necessary.
^(CGRect rect ,id data){ }