Three20软件引擎之构建开发环境与HelloWorld

雨松MOMO原创文章如转载,请注明:转载至我的独立域名博客雨松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路径下在去执行这段脚本,因为这样的话有时候会提示无效的命令,所以大家还是老老实实去输入自己的完整路径吧。 

[python]  view plain copy
  1. > python three20/src/scripts/ttmodule.py -p path/to/your/project/project.xcodeproj Three20 --xcode-version=4  


python脚本执行完毕后,就应该环境就搭建完毕了 ,快快打开工程检查一下,如下图所示,安装成功后打开工程后在Frameworks中会出现很多Three20的相关的东西。 如果到这一步还是没有出现这些Frameworks文件,那么请仔细阅读上面的博文检查一下自己的步骤。






到这一步就彻底安装成功了,下面开始构建我们第一个项目HelloWorld。


[csharp]  view plain copy
  1. #import <UIKit/UIKit.h>  
  2.   
  3. int main(int argc, char *argv[])  
  4. {  
  5.     NSAutoreleasePool *pool = [[NSAutoreleasePool alloc] init];  
  6.     int retVal = UIApplicationMain(argc, argv, nil, @"Three20AppDelegate");  
  7.     [pool release];  
  8.     return retVal;  
  9. }  


学过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 都帮我们做了。


[cpp]  view plain copy
  1. #import "Three20AppDelegate.h"  
  2. #import "MyViewController.h"  
  3. @implementation Three20AppDelegate  
  4.   
  5.   
  6. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
  7. {  
  8.     
  9.     //创建导航条  
  10.     TTNavigator* navigator = [TTNavigator navigator];  
  11.     navigator.persistenceMode = TTNavigatorPersistenceModeAll;  
  12.     navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease];  
  13.        
  14.       
  15.     //TTURLMap 非常重要的一个属性  
  16.     //界面的点击切换完全取决与它的设定  
  17.     TTURLMap* map = navigator.URLMap;  
  18.       
  19.     //如果须要访问wab页面的话 就必需添加  
  20.     [map from:@"*" toViewController:[TTWebController class]];  
  21.      
  22.     //拼一个url 意思是如果访问 "tt://MyView" 会进入 MyViewController class  
  23.     [map from:@"tt://MyView" toSharedViewController:[MyViewController class]];  
  24.       
  25.       
  26.     if (![navigator restoreViewControllers]) {  
  27.         //打开上面设置的url  
  28.         [navigator openURLAction:[TTURLAction actionWithURLPath:@"tt://MyView"]];  
  29.     }  
  30.       
  31.     return YES;  
  32. }  
  33.   
  34.   
  35.   
  36. - (void)dealloc  
  37. {  
  38.      
  39.     [super dealloc];  
  40. }  
  41.   
  42. @end  


由于在程序入口中就将URL 指向这里 ,所以在这里添加显示view等等。

[csharp]  view plain copy
  1. #import "MyViewController.h"  
  2. #import <Three20Style/UIColorAdditions.h>  
  3. @implementation MyViewController  
  4.   
  5. - (void)loadView {  
  6.       [super loadView];  
  7.     //创建一个可滑动的view  
  8.     UIScrollView* scrollView = [[[UIScrollView alloc] initWithFrame:TTNavigationFrame()] autorelease];  
  9.     scrollView.autoresizesSubviews = YES;  
  10.     scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;  
  11.     //背景颜色  
  12.     scrollView.backgroundColor = [UIColor whiteColor];  
  13.     self.view = scrollView;  
  14.   
  15.     //标题内容  
  16.     self.title = @"雨松MOMO程序开发" ;  
  17.     
  18.     //设置雨松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];  
  24.       
  25.     //view风格 边框 颜色  
  26.     UIColor* black = RGBCOLOR(158, 163, 172);  
  27.     //view风格  
  28.     TTStyle*  style = [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:  
  29.                        [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  30.                         [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]];  
  31.       
  32.     frame = CGRectMake(5, 150, 310, 150);  
  33.     //新建一个TTView 将设置的风格赋值给它  
  34.     TTView *view = [[[TTView alloc] initWithFrame:frame] autorelease];  
  35.     //背景颜色  
  36.     view.backgroundColor = [UIColor whiteColor];  
  37.     //赋值风格  
  38.     view.style = style;  
  39.       
  40.     //显示字符串 支持html语言  
  41.     NSString * text = @"爱加班,爱代码,爱HelloWorld , 爱学习,爱钻研,爱学无止境 爱玩游戏更爱做游戏,我是雨松MOMO,哇咔咔~ 我在参加2011年博客大赛 <a href=\"http://blog.51cto.com/contest2011/3361352\">点击为MOMO投上宝贵的一票</a>";  
  42.       
  43.     frame = CGRectMake(10, 10, 290, 150);  
  44.       
  45.     //TTStyledTextLabel 很给力啊这个 哈哈!  
  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);  
  51.     [label sizeToFit];  
  52.      
  53.     //将label添加入自定义view  
  54.     [view addSubview:label];  
  55.     //将自动一定view 显示在主view中!  
  56.     [scrollView addSubview:view];     
  57.   
  58.       
  59.       
  60.   
  61. }  
  62.   
  63.   
  64.   
  65. @end  


到这一步,这个简单的HelloWorld程序就写完了,我们发现以前我们用到的高级界面的类基本上Three20都写了新的方法去继承,实现更佳好的效果,将麻烦的地方由引擎自身帮我们完成。看一下效果图。我添加特殊的风格View 显示text 支持html语言 可以在程序中随意添加网页链接、 










下面MOMO在贴一段官方提供的Demo中的一段代码,主要是用来设置View风格. 官方一共提供了19种view风格,代码中使用循环将这19中view 依次显示在界面中,绝对够我们开发IOS应用程序啦 哈哈~~所以说官方提供的DEMO 大家一定要好好阅读喔 哇咔咔~~

[csharp]  view plain copy
  1. - (void)loadView {  
  2.   UIScrollView* scrollView = [[[UIScrollView alloc] initWithFrame:TTNavigationFrame()] autorelease];  
  3.     scrollView.autoresizesSubviews = YES;  
  4.     scrollView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;  
  5.   scrollView.backgroundColor = RGBCOLOR(216, 221, 231);  
  6.   self.view = scrollView;  
  7.   
  8.   UIColor* black = RGBCOLOR(158, 163, 172);  
  9.   UIColor* blue = RGBCOLOR(191, 197, 208);  
  10.   UIColor* darkBlue = RGBCOLOR(109, 132, 162);  
  11.   
  12.   NSArray* styles = [NSArray arrayWithObjects:  
  13.     // Rectangle  
  14.     [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  15.     [TTSolidBorderStyle styleWithColor:black width:1 next:nil]],  
  16.   
  17.     // Rounded rectangle  
  18.     [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:  
  19.     [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  20.     [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  21.   
  22.     // Gradient border  
  23.     [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:  
  24.     [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  25.     [TTLinearGradientBorderStyle styleWithColor1:RGBCOLOR(0, 0, 0)  
  26.                                  color2:RGBCOLOR(216, 221, 231) width:2 next:nil]]],  
  27.   
  28.     // Rounded left arrow  
  29.     [TTShapeStyle styleWithShape:[TTRoundedLeftArrowShape shapeWithRadius:5] next:  
  30.     [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  31.     [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  32.   
  33.     // Partially rounded rectangle  
  34.     [TTShapeStyle styleWithShape:  
  35.       [TTRoundedRectangleShape shapeWithTopLeft:0 topRight:0 bottomRight:10 bottomLeft:10] next:  
  36.     [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  37.     [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  38.   
  39.     // SpeechBubble with pointer left of the centre on the top edge  
  40.     // Locations for top edge are 45 on the left, 90 in the centre, 134.999 on the right  
  41.     [TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5   
  42.                                                         pointLocation:60  
  43.                                                            pointAngle:90  
  44.                                                             pointSize:CGSizeMake(20,10)] next:  
  45.      [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  46.       [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  47.   
  48.      // SpeechBubble with pointer on the extreme left on the bottom edge  
  49.      // Locations for bottom edge are 225 on the left, 270 in the centre, 314.999 on the left  
  50.     [TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5   
  51.                                                         pointLocation:314  
  52.                                                            pointAngle:270  
  53.                                                             pointSize:CGSizeMake(20,10)] next:  
  54.      [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  55.       [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  56.       
  57.     // SpeechBubble with pointer on the bottom of the left edge  
  58.     // Locations for left edge are 315 on the bottom, 0 in the centre, 44.999 on top  
  59.     [TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5   
  60.                                                         pointLocation:315  
  61.                                                            pointAngle:0  
  62.                                                             pointSize:CGSizeMake(10,20)] next:  
  63.      [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  64.       [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  65.       
  66.     // SpeechBubble with pointer on the centre of the left edge  
  67.     // Locations for left edge are 315 on the bottom, 0 in the centre, 44.999 on top  
  68.     [TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5 pointLocation:0  
  69.                                                            pointAngle:0  
  70.                                                             pointSize:CGSizeMake(20,10)] next:  
  71.      [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  72.       [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  73.       
  74.     // SpeechBubble with pointer on the bottom of the right hand edge  
  75.     // Locations for right edge are 135 on top, 180 in the middle, 314.999 on the bottom  
  76.     [TTShapeStyle styleWithShape:[TTSpeechBubbleShape shapeWithRadius:5 pointLocation:224  
  77.                                                            pointAngle:180  
  78.                                                             pointSize:CGSizeMake(15,15)] next:  
  79.      [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  80.       [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]],  
  81.       
  82.     // Drop shadow  
  83.     [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:  
  84.     [TTShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.5) blur:5 offset:CGSizeMake(2, 2) next:  
  85.     [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0.25, 0.25, 0.25, 0.25) next:  
  86.     [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  87.     [TTInsetStyle styleWithInset:UIEdgeInsetsMake(-0.25, -0.25, -0.25, -0.25) next:  
  88.     [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]]]]],  
  89.   
  90.     // Inner shadow  
  91.     [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:  
  92.     [TTSolidFillStyle styleWithColor:[UIColor whiteColor] next:  
  93.     [TTInnerShadowStyle styleWithColor:RGBACOLOR(0,0,0,0.5) blur:6 offset:CGSizeMake(1, 1) next:  
  94.     [TTSolidBorderStyle styleWithColor:black width:1 next:nil]]]],  
  95.   
  96.     // Chiseled button  
  97.     [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:10] next:  
  98.     [TTShadowStyle styleWithColor:RGBACOLOR(255,255,255,0.9) blur:1 offset:CGSizeMake(0, 1) next:  
  99.     [TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(255, 255, 255)  
  100.                                color2:RGBCOLOR(216, 221, 231) next:  
  101.     [TTSolidBorderStyle styleWithColor:blue width:1 next:nil]]]],  
  102.   
  103.     // Embossed button  
  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]]],  
  108.   
  109.     // Toolbar button  
  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]]]]]],  
  119.   
  120.     // Back button  
  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]]]]]],  
  130.   
  131.     // Badge  
  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]]]]]],  
  138.   
  139.     // Mask  
  140.     [TTMaskStyle styleWithMask:TTIMAGE(@"bundle://mask.png") next:  
  141.     [TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(0, 180, 231)  
  142.                                color2:RGBCOLOR(0, 0, 255) next:nil]],  
  143.   
  144.     // simple bottom only border  
  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]]],  
  148.   
  149.     nil];  
  150.   
  151.   CGFloat padding = 10.0f;  
  152.   CGFloat viewWidth = scrollView.width/2 - padding*2;  
  153.   CGFloat viewHeight = TT_ROW_HEIGHT;  
  154.   
  155.   CGFloat x = padding;  
  156.   CGFloat y = padding;  
  157.   for (TTStyle* style in styles) {  
  158.     if (x + viewWidth >= scrollView.width) {  
  159.       x = padding;  
  160.       y += viewHeight + padding;  
  161.     }  
  162.   
  163.     CGRect frame = CGRectMake(x, y, viewWidth, viewHeight);  
  164.     TTView* view = [[[TTView alloc] initWithFrame:frame] autorelease];  
  165.     view.backgroundColor = scrollView.backgroundColor;  
  166.     view.style = style;  
  167.     [scrollView addSubview:view];  
  168.   
  169.     x += frame.size.width + padding;  
  170.   }  
  171.   
  172.   scrollView.contentSize = CGSizeMake(scrollView.width, y + viewHeight + padding);  
  173. }  

效果图








最后欢迎各位盆友可以和MOMO一起讨论Three20软件开发,这两天学Three20学的实在是太爽了~~如果你觉得看得不清楚,MOMO附带上本章的源码下载,希望大家可以一起学习 哈哈~。哇咔咔~ MOMO愿和 大家好好学习,大家一起进步哈~!!!


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值