TTStyledTextLabel Three20下的神来之笔

8 三月, 2011 - Blog, iPhone, 技术笔记

先简单的介绍一下Three20.
Three20是由facebook发展的一套iphone框架.最初是为了建构facebook的iphone版应用程式.后来索性将此framework源代码提供给广大的开发者使用.
Three20里面有很多很实在很实用的效果以及功能.开发者透过Three20提供的framework去构建自己的应用程式无疑是可以让你节省大量的开发时间.这确实是一个杀人越货,居家必备的超级framework.
因为Three20涉及到的知识面太广,也不能一一介绍,大家如果有兴趣可以参考http://three20.info/ 进行阅读和下载.下面主要来介绍一下TTStyledTextLabel, Three20下面的神来之笔.

应该怎么介绍TTStyledTextLabel呢?简单的来说,他等于是一个加强的文本显示框.但此框可以支持类似html的标签.
下面我们先看看Three20提供给我们的例子截图:

以上的截图包含了字体加粗,超链,图文并排,颜色等等的变化.如果以前让我们去考虑如何去写这玩意.我们可能会选择UIWebView或者CoreText.但是我们现在使用TTStyledTextLabel就很容易做到以上截图的效果.下面附上h和m文件的源代码.大家看看就应该明白这一切是多么的简单了.

///————-*.h——————–

#import <Three20/Three20.h
@interface StyledTextTestController : TTViewController
@end

///————-*.m——————–

#import "StyledTextTestController.h"
@interface TextTestStyleSheet : TTDefaultStyleSheet
@end
@implementation TextTestStyleSheet
- (TTStyle*)blueText {
return [TTTextStyle styleWithColor:[UIColor blueColor] next:nil];
}
- (TTStyle*)largeText {
return [TTTextStyle styleWithFont:[UIFont systemFontOfSize:32] next:nil];
}
- (TTStyle*)smallText {
return [TTTextStyle styleWithFont:[UIFont systemFontOfSize:12] next:nil];
}
- (TTStyle*)floated {
return [TTBoxStyle styleWithMargin:UIEdgeInsetsMake(0, 0, 5, 5)
padding:UIEdgeInsetsMake(0, 0, 0, 0)
minSize:CGSizeZero position:TTPositionFloatLeft next:nil];
}
- (TTStyle*)blueBox {
return
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:6] next:
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -5, -4, -6) next:
[TTShadowStyle styleWithColor:[UIColor grayColor] blur:2 offset:CGSizeMake(1,1) next:
[TTSolidFillStyle styleWithColor:[UIColor cyanColor] next:
[TTSolidBorderStyle styleWithColor:[UIColor grayColor] width:1 next:nil]]]]];
}
- (TTStyle*)inlineBox {
return
[TTSolidFillStyle styleWithColor:[UIColor blueColor] next:
[TTBoxStyle styleWithPadding:UIEdgeInsetsMake(5,13,5,13) next:
[TTSolidBorderStyle styleWithColor:[UIColor blackColor] width:1 next:nil]]];
}
- (TTStyle*)inlineBox2 {
return
[TTSolidFillStyle styleWithColor:[UIColor cyanColor] next:
[TTBoxStyle styleWithMargin:UIEdgeInsetsMake(5,50,0,50)
padding:UIEdgeInsetsMake(0,13,0,13) next:nil]];
}
@end
@implementation StyledTextTestController
///////////////////////////////////////////////////////////////////////////////////////////////////
// UIViewController
- (id) initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {
self = [super initWithNibName:nil bundle:nil];
if (self) {
[TTStyleSheet setGlobalStyleSheet:[[[TextTestStyleSheet alloc] init] autorelease]];
}
return self;
}
- (void)dealloc {
[TTStyleSheet setGlobalStyleSheet:nil];
[super dealloc];
}
///////////////////////////////////////////////////////////////////////////////////////////////////
// UIViewController
- (void)loadView {
[super loadView];
// NSString* kText = @"\
//Thisisareallylongwordthatshouldwrapisareallylongwordthatshouldwrapisareallylongwordthatshould\
//wrapisareallylongwordthatshouldwrapisareallylongwordthatshouldwrap";
NSString* kText = @"\
This is a test of styled labels. Styled labels support \
bold text, italic text, colored text, \
font sizes, \
spans with backgrounds, inline images \
, and hyperlinks you can \
actually touch. URLs are automatically converted into links, like this: http://www.foo.com\
You can enclose blocks within an HTML div.

\
Both line break characters\n\nand HTML line breaks
are respected.";
TTStyledTextLabel* label1 = [[[TTStyledTextLabel alloc] initWithFrame:self.view.bounds] autorelease];
label1.font = [UIFont systemFontOfSize:17];
label1.text = [TTStyledText textFromXHTML:kText lineBreaks:YES URLs:YES];
label1.contentInset = UIEdgeInsetsMake(10, 10, 10, 10);
//label1.backgroundColor = [UIColor grayColor];
[label1 sizeToFit];
NSLog(@"label1:%f",label1.frame.size.height);
[self.view addSubview:label1];
}
@end

///分隔线———————————-

从以上代码我们可以看出,需要插入图片只需要<img src=\"bundle://Icon@2x.png\"/> 一句.而文字所需要用到的css style,你也只需要在定义其对应的相关Method,然后好像html那么简单的<span class=\"blueText2\">colored text</span> 哦,DONE…..

- (TTStyle*)blueText {
return [TTTextStyle styleWithColor:[UIColor blueColor] next:nil];
}

小弟在这也只是抛砖引玉写一些简单的功能出来供大家参考.其他进一步的东西则需要大家去深入了解了~~

No comments yet.