声明:本博客里关于three20方面的知识,匀出自 雨松MOMO程序研究院,http://www.xuanyusong.com/archives/616 博客地址。
亲爱的朋友们,如果你现在在做IOS 软件开发,不妨来看看Three20这套框架。如果你对它还比较陌生?MOMO在这里告诉你它绝对是一个IOS 软件开发的利器,有了它绝对让你的软件事半功倍。three20框架的前身是facebook iPhone 客户端。 后来facebook将其开源了,就有了three20这个框架。据说开发这套引擎的这个程序大牛 facebook为了挖他直接把他所在的公司买下来了,我心里就琢磨这人也太牛了吧。做了一个客户端 开源后直接就变成流行引擎了。真的是让我辈望尘莫及啊~~ 哈哈 废话不多说了我们进入正题。
在Xcode4上构建three20框架
首先进入Three20官网去下载最新版本
进入官网后,如下图所示点击Download下载最新版本,目前最新版本为1.0.6.2。
下载完毕后解压缩,由于Three20目前别说国内的资料少了,国外的资料都不多。不过开发包中附带了几个Demo,MOMO 先在这里赞一下!这两天我就是靠这几个Demo来学习的。Demo的路径在下载包samples 文件夹中,一共9个Demo,建议想用Three20框架开发的盆友们 一定要好好读一读这几个Demo,比去网上找资料强多了!
大家看看官网的说明, 如何在Xcode4上添加Three20框架。我懒得翻译了~~
Xcode 4 Transition Guide
Apple is aiming for Xcode 4 to be the primary iOS development environment and, as a result, many will need to transition from Xcode 3.2 to Xcode 4. This guide has been put together in order to help you migrate your apps to Xcode 4 successfully.
What you need to do
For existing projects
If you want to start using Xcode 4 with an existing project made using Xcode 3.2.#, all you need to do to update your project is run ttmodule again like so:
重点在这里,先创建好一个普通的IOS 工程,打开mac电脑的终端去执行下面这段python 脚本
three20/sre/scripts/ttmodule.py : 须要执行的脚本文件
path/to/your/project.xcodeproj : IOS 工程路径
这里强调一下,不要使用cd 到scripts路径下在去执行这段脚本,因为这样的话有时候会提示无效的命令,所以大家还是老老实实去输入自己的完整路径吧。
1
> python three20
/
src
/
scripts
/
ttmodule.py
-
p path
/
to
/
your
/
project
/
project.xcodeproj Three20
-
-
xcode
-
version
=
4
python脚本执行完毕后,就应该环境就搭建完毕了 ,快快打开工程检查一下,如下图所示,安装成功后打开工程后在Frameworks中会出现很多Three20的相关的东西。 如果到这一步还是没有出现这些Frameworks文件,那么请仔细阅读上面的博文检查一下自己的步骤。
到这一步就彻底安装成功了,下面开始构建我们第一个项目HelloWorld。
1
#import <UIKit/UIKit.h>
3
int
main(
int
argc,
char
*argv[])
5
NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];
6
int
retVal = UIApplicationMain(argc, argv, nil, @
"Three20AppDelegate"
);
学过IOS开发的朋友绝对不会陌生,在项目中须要使用Three20库的时候须要import一下~
#import <Three20/Three20.h>
URL 简直就是three20 亮点中的亮点,实在是太好用了。有可能是因为facebook是互联网公司的原因吧,他们的引擎的原理都很像www.xx.com 这种网址的结构,因为手机不像PC 不可能同时显示多个页面,那么用URL这种方式去切换界面实在是太给力了~会省下很多逻辑判断切换界面的代码,直接去维护这个URL 就可以,由于本章主要是构建Three20框架,所以MOMO在这里只带大家学习入门的知识, 后期我肯定会详细的介绍TTURLMap 这个类,因为它实在是太好用了,哇咔咔.
举个例子
tt://Myview/1
tt://Myview/2
上面是两个软件界面,实现界面的切换的方法就好比我们在浏览器中输入网址一样,输入网址1 就进1 输入网址2 就进 2,一切事件的处理three20 都帮我们做了。
01
#import "Three20AppDelegate.h"
02
#import "MyViewController.h"
03
@implementation Three20AppDelegate
05
- (
BOOL
)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
09
TTNavigator* navigator = [TTNavigator navigator];
10
navigator.persistenceMode = TTNavigatorPersistenceModeAll;
11
navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease];
15
TTURLMap* map = navigator.URLMap;
18
[map from:@
"*"
toViewController:[TTWebController
class
]];
21
[map from:@
"tt://MyView "
toSharedViewController:[MyViewController
class
]];
23
if
(![navigator restoreViewControllers]) {
25
[navigator openURLAction:[TTURLAction actionWithURLPath:@
"tt://MyView "
]];
由于在程序入口中就将URL 指向这里 ,所以在这里添加显示view等等。
01
#import "MyViewController.h"
02
#import <Three20Style/UIColorAdditions.h>
03
@implementation MyViewController
08
UIScrollView* scrollView = [[[UIScrollView alloc] initWithFrame:TTNavigationFrame()] autorelease];
09
scrollView.autoresizesSubviews = YES;
10
scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth ¦ UIViewAutoresizingFlexibleHeight;
12
scrollView.backgroundColor = [UIColor whiteColor];
13
self.view = scrollView;
16
self.title = @
"雨松MOMO程序开发"
;
19
CGRect frame = CGRectMake(100, 10, 120, 120);
20
TTImageView *imageView = [[TTImageView alloc] initWithFrame:frame];
21
UIImage *image = [UIImage imageNamed:@
"1.jpg"
];
22
imageView.defaultImage = image;
23
[scrollView addSubview:imageView];
26
UIColor* black = RGBCOLOR(158, 163, 172);
28
TTStyle* style = [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:
29
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
30
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]];
32
frame = CGRectMake(5, 150, 310, 150);
34
TTView *view = [[[TTView alloc] initWithFrame:frame] autorelease];
36
view.backgroundColor = [UIColor whiteColor];
41
NSString * text = @
"爱加班,爱代码,爱HelloWorld , 爱学习,爱钻研,爱学无止境 爱玩游戏更爱做游戏,我是雨松MOMO,哇咔咔~ 我在参加2011年博客大赛 <a href=\"http://www.xuanyusong.com \">点击为MOMO投上宝贵的一票</a>"
;
43
frame = CGRectMake(10, 10, 290, 150);
46
TTStyledTextLabel* label = [[[TTStyledTextLabel alloc] initWithFrame:frame] autorelease];
47
label.font = [UIFont systemFontOfSize:17];
48
label.textColor = [UIColor redColor];
49
label.text = [TTStyledText textFromXHTML:text lineBreaks:YES URLs:YES];
50
label.contentInset = UIEdgeInsetsMake(5, 5, 5, 5);
54
[view addSubview:label];
56
[scrollView addSubview:view];
到这一步,这个简单的HelloWorld程序就写完了,我们发现以前我们用到的高级界面的类基本上Three20都写了新的方法去继承,实现更佳好的效果,将麻烦的地方由引擎自身帮我们完成。看一下效果图。我添加特殊的风格View 显示text 支持html语言 可以在程序中随意添加网页链接、
下面MOMO在贴一段官方提供的Demo中的一段代码,主要是用来设置View风格. 官方一共提供了19种view风格,代码中使用循环将这19中view 依次显示在界面中,绝对够我们开发IOS应用程序啦 哈哈~~所以说官方提供的DEMO 大家一定要好好阅读喔 哇咔咔~~
002
UIScrollView* scrollView = [[[UIScrollView alloc] initWithFrame:TTNavigationFrame()] autorelease];
003
scrollView.autoresizesSubviews = YES;
004
scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth ¦ UIViewAutoresizingFlexibleHeight;
005
scrollView.backgroundColor = RGBCOLOR(216, 221, 231);
006
self.view = scrollView;
008
UIColor* black = RGBCOLOR(158, 163, 172);
009
UIColor* blue = RGBCOLOR(191, 197, 208);
010
UIColor* darkBlue = RGBCOLOR(109, 132, 162);
012
NSArray* styles = [NSArray arrayWithObjects:
014
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
015
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]],
018
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:
019
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
020
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
023
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:
024
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
025
[TTLinearGradientBorderStyle styleWithColor1:RGBCOLOR(0, 0, 0)
026
color2:RGBCOLOR(216, 221, 231) width:2 next:nil]]],
029
[TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:5] next:
030
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
031
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
034
[TTShapeStyle styleWithShape:
035
[TTRoundedRectangleShape shapeWithTopLeft:0 topRight:0 bottomRight:10 bottomLeft:10] next:
036
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
037
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
041
[TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5
044
pointSize:CGSizeMake(20,10)] next:
045
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
046
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
050
[TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5
053
pointSize:CGSizeMake(20,10)] next:
054
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
055
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
059
[TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5
062
pointSize:CGSizeMake(10,20)] next:
063
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
064
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
068
[TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5 pointLocation:0
070
pointSize:CGSizeMake(20,10)] next:
071
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
072
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
076
[TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5 pointLocation:224
078
pointSize:CGSizeMake(15,15)] next:
079
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
080
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],
083
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:
084
[TTShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.5) blur:5 offset:CGSizeMake(2, 2) next:
085
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(0.25, 0.25, 0.25, 0.25) next:
086
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
087
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(-0.25, -0.25, -0.25, -0.25) next:
088
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]]]]],
091
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:
092
[TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:
093
[TTInnerShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.5) blur:6 offset:CGSizeMake(1, 1) next:
094
[TTSolidBorderStyle styleWithColor:black width:1 next:nil]]]],
097
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:
098
[TTShadowStyle styleWithColor:RGBACOLOR(255,255,255,0.9) blur:1 offset:CGSizeMake(0, 1) next:
099
[TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(255, 255, 255)
100
color2:RGBCOLOR(216, 221, 231) next:
101
[TTSolidBorderStyle styleWithColor:blue width:1 next:nil]]]],
104
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:
105
[TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(255, 255, 255)
106
color2:RGBCOLOR(216, 221, 231) next:
107
[TTFourBorderStyle styleWithTop:blue right:black bottom:black left:blue width:1 next:nil]]],
110
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:4.5] next:
111
[TTShadowStyle styleWithColor:RGBCOLOR(255,255,255) blur:1 offset:CGSizeMake(0, 1) next:
112
[TTReflectiveFillStyle styleWithColor:darkBlue next:
113
[TTBevelBorderStyle styleWithHighlight:[darkBlue shadow]
114
shadow:[darkBlue multiplyHue:1 saturation:0.5 value:0.5]
115
width:1 lightSource:270 next:
116
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -1, 0, -1) next:
117
[TTBevelBorderStyle styleWithHighlight:nil shadow:RGBACOLOR(0,0,0,0.15)
118
width:1 lightSource:270 next:nil]]]]]],
121
[TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:4.5] next:
122
[TTShadowStyle styleWithColor:RGBCOLOR(255,255,255) blur:1 offset:CGSizeMake(0, 1) next:
123
[TTReflectiveFillStyle styleWithColor:darkBlue next:
124
[TTBevelBorderStyle styleWithHighlight:[darkBlue shadow]
125
shadow:[darkBlue multiplyHue:1 saturation:0.5 value:0.5]
126
width:1 lightSource:270 next:
127
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, -1, 0, -1) next:
128
[TTBevelBorderStyle styleWithHighlight:nil shadow:RGBACOLOR(0,0,0,0.15)
129
width:1 lightSource:270 next:nil]]]]]],
132
[TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:TT_ROUNDED] next:
133
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(1.5, 1.5, 1.5, 1.5) next:
134
[TTShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.8) blur:3 offset:CGSizeMake(0, 5) next:
135
[TTReflectiveFillStyle styleWithColor:[UIColor redColor] next:
136
[TTInsetStyle styleWithInset:UIEdgeInsetsMake(-1.5, -1.5, -1.5, -1.5) next:
137
[TTSolidBorderStyle styleWithColor:[UIColor whiteColor] width:3 next:nil]]]]]],
141
[TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(0, 180, 231)
142
color2:RGBCOLOR(0, 0, 255) next:nil]],
145
[TTShapeStyle styleWithShape:[TTRectangleShape shape] next:
146
[TTSolidFillStyle styleWithColor:RGBCOLOR(255, 255, 255) next:
147
[TTFourBorderStyle styleWithTop:nil right:nil bottom:black left:nil width:5 next:nil]]],
151
CGFloat padding = 10.0f;
152
CGFloat viewWidth = scrollView.width/2 - padding*2;
153
CGFloat viewHeight = TT_ROW_HEIGHT;
157
for
(TTStyle* style in styles) {
158
if
(x + viewWidth >= scrollView.width) {
160
y += viewHeight + padding;
163
CGRect frame = CGRectMake(x, y, viewWidth, viewHeight);
164
TTView* view = [[[TTView alloc] initWithFrame:frame] autorelease];
165
view.backgroundColor = scrollView.backgroundColor;
167
[scrollView addSubview:view];
169
x += frame.size.width + padding;
172
scrollView.contentSize = CGSizeMake(scrollView.width, y + viewHeight + padding);
最后欢迎各位盆友可以和MOMO一起讨论Three20软件开发,这两天学Three20学的实在是太爽了~~如果你觉得看得不清楚,MOMO附带上本章的源码下载,希望大家可以一起学习 哈哈~。哇咔咔~ MOMO愿和 大家好好学习,大家一起进步哈~!!!
(下载后必需搭建three20环境成功后才能运行~ 因为three20为引用加载,所以程序路径都是我本机的请见谅!)