01 | #import "AppDelegate.h" |
02 | #import "UIStyleSheet.h" |
03 | #import "StartViewController.h" |
04 | #import "InfoViewController.h" |
05 | #import "ThiredViewController.h" |
06 | #import "TopViewController.h" |
07 |
08 | @implementation AppDelegate |
09 |
10 | @synthesize window = _window; |
11 |
12 | - ( void )dealloc |
13 | { |
14 | [_window release]; |
15 | [super dealloc]; |
16 | } |
17 |
18 | - ( BOOL )application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions |
19 | { |
20 |
21 | //创建导航条 |
22 | TTNavigator* navigator = [TTNavigator navigator]; |
23 | navigator.persistenceMode = TTNavigatorPersistenceModeAll; |
24 | navigator.window = [[[UIWindow alloc] initWithFrame:TTScreenBounds()] autorelease]; |
25 |
26 | //注释1 |
27 | [TTStyleSheet setGlobalStyleSheet:[[[UIStyleSheet alloc] init] autorelease]]; |
28 |
29 | //注释2 |
30 | TTURLMap* map = navigator.URLMap; |
31 | //注释3 |
32 | [map from:@ "*" toViewController:[TTWebController class ]]; |
33 | //注释4 |
34 | [map from:@ "tt://StartView" toSharedViewController:[StartViewController class ]]; |
35 | //注释5 |
36 | [map from:@ "tt://InfoView/(initInfo:)" toViewController:[InfoViewController class ]]; |
37 | //注释6 |
38 | [map from:@ "tt://ThiredView" toViewController:[ThiredViewController class ]]; |
39 | //注释7 |
40 | [map from:@ "tt://TopView" toModalViewController:[TopViewController class ]]; |
41 |
42 | if (![navigator restoreViewControllers]) |
43 | { |
44 | //注释8 |
45 | [navigator openURLAction:[TTURLAction actionWithURLPath:@ "tt://StartView" ]]; |
46 | } |
47 |
48 | return YES; |
49 | } |
50 |
51 | @end |
1 | #import <Three20/Three20.h> |
2 |
3 | @interface StartViewController : TTViewController |
4 |
5 | @end |
StartViewController.m文件
01 | #import "StartViewController.h" |
02 |
03 | @implementation StartViewController |
04 |
05 | - ( void )viewDidLoad |
06 | { |
07 | [super viewDidLoad]; |
08 | //标题栏名称 |
09 | self.title = @ "雨松MOMO" ; |
10 | //设置视图背景颜色 |
11 | self.view.backgroundColor = [UIColor blackColor]; |
12 | //创建图片视图 |
13 | TTImageView *imageview = [[[TTImageView alloc] initWithFrame: |
14 | CGRectMake(100, 10, 120, 120)] autorelease]; |
15 |
16 | //设置图片视图显示的图片资源 |
17 | imageview.defaultImage = TTIMAGE(@ "bundle://0.jpg" ); |
18 | //将图片视图加入整个视图当中 |
19 | [self.view addSubview:imageview]; |
20 |
21 | //注释1 |
22 | NSArray *buttons = [NSArray arrayWithObjects: |
23 | [TTButton buttonWithStyle:@ "embossedButton:" title:@ "开始游戏" ], |
24 | [TTButton buttonWithStyle:@ "embossedButton:" title:@ "继续游戏" ], |
25 | [TTButton buttonWithStyle:@ "embossedButton:" title:@ "关于游戏" ], |
26 | [TTButton buttonWithStyle:@ "embossedButton:" title:@ "退出游戏" ], |
27 | nil]; |
28 |
29 | for ( int i=0; i<buttons.count; i++) |
30 |
31 | { |
32 | //使用循环将按钮绘制在屏幕当中 |
33 | TTButton *button = [buttons objectAtIndex:i]; |
34 | //设置字体的大小 |
35 | button.font = [UIFont boldSystemFontOfSize:30]; |
36 | //设置字体的显示区域 |
37 | button.frame = CGRectMake(60, 200 + i*50, 200, 50); |
38 | //设置字体的标记,通过标记可判断那个按钮点击了 |
39 | button.tag = i; |
40 | //设置按钮点击相应事件,点击后进入ButtonPressed方法 |
41 | [button addTarget:self action:@selector(ButtonPressed:) forControlEvents:UIControlEventTouchUpInside]; |
42 | //将按钮加入整个视图当中 |
43 | [self.view addSubview: button]; |
44 |
45 | } |
46 |
47 | } |
48 |
49 | //按钮点击后将进入这个方法 |
50 | -( void )ButtonPressed:(id)buttonID |
51 | { |
52 | //得到导航对象 |
53 | TTNavigator* navigator = [TTNavigator navigator]; |
54 | //获取点击的按钮 |
55 | UIButton *button = (UIButton *)buttonID; |
56 | //注释2 |
57 | switch (button.tag) { |
58 | case 0: |
59 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/0" ] applyAnimated:YES]]; |
60 | break ; |
61 | case 1: |
62 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/1" ] applyAnimated:YES]]; |
63 | break ; |
64 | case 2: |
65 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/2" ] applyAnimated:YES] ]; |
66 | break ; |
67 | case 3: |
68 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/3" ] applyAnimated:YES]]; |
69 | break ; |
70 | default : |
71 | break ; |
72 | } |
73 | } |
74 | @end |
1 | #import <Three20/Three20.h> |
2 |
3 | @interface UIStyleSheet : TTDefaultStyleSheet |
4 |
5 | @end |
UIStyleSheet.m文件
01 | #import "UIStyleSheet.h" |
02 |
03 | @implementation UIStyleSheet |
04 |
05 | //设置标题栏的颜色 |
06 | - (UIColor*)navigationBarTintColor { |
07 | return [UIColor blueColor]; |
08 | } |
09 |
10 | //按钮的风格 |
11 | - (TTStyle*)embossedButton:(UIControlState)state { |
12 | if (state == UIControlStateNormal) { |
13 | return |
14 | [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:8] next: |
15 | [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, 0, 1, 0) next: |
16 | [TTShadowStyle styleWithColor:RGBACOLOR(255,255,255,0) blur:1 offset:CGSizeMake(0, 1) next: |
17 | [TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(255, 255, 255) |
18 | color2:RGBCOLOR(216, 221, 231) next: |
19 | [TTSolidBorderStyle styleWithColor:RGBCOLOR(161, 167, 178) width:1 next: |
20 | [TTBoxStyle styleWithPadding:UIEdgeInsetsMake(10, 12, 9, 12) next: |
21 | [TTTextStyle styleWithFont:nil color:TTSTYLEVAR(linkTextColor) |
22 | shadowColor:[UIColor colorWithWhite:255 alpha:0.4] |
23 | shadowOffset:CGSizeMake(0, -1) next:nil]]]]]]]; |
24 | } else if (state == UIControlStateHighlighted) { |
25 | return |
26 | [TTShapeStyle styleWithShape:[TTRoundedRectangleShape shapeWithRadius:8] next: |
27 | [TTInsetStyle styleWithInset:UIEdgeInsetsMake(0, 0, 1, 0) next: |
28 | [TTShadowStyle styleWithColor:RGBACOLOR(255,255,255,0.9) blur:1 offset:CGSizeMake(0, 1) next: |
29 | [TTLinearGradientFillStyle styleWithColor1:RGBCOLOR(225, 225, 225) |
30 | color2:RGBCOLOR(196, 201, 221) next: |
31 | [TTSolidBorderStyle styleWithColor:RGBCOLOR(161, 167, 178) width:1 next: |
32 | [TTBoxStyle styleWithPadding:UIEdgeInsetsMake(10, 12, 9, 12) next: |
33 | [TTTextStyle styleWithFont:nil color:[UIColor whiteColor] |
34 | shadowColor:[UIColor colorWithWhite:255 alpha:0.4] |
35 | shadowOffset:CGSizeMake(0, -1) next:nil]]]]]]]; |
36 | } else { |
37 | return nil; |
38 | } |
39 | } |
40 |
41 | @end |
http://api.three20.info/interface_t_t_default_style_sheet.php
拓展学习:如下图所示,Three20一共封装了9中按钮的样式,足够开发中使用,而本例中我们使用到的按钮样式就是”Embossed Button”。大家也可根据自己的喜好去设定不同的按钮样式,按钮的官方例子写在“Catalog”工程当中。详细按钮的代码写在ButtonTestController.m文件中。
高级控件风格的教学就先到此为止,本文讨论的重点并不是它,请大家再次回到StartViewController.m类当中。
注释2:由于界面中共设置了4个按钮,为了让这4个按钮共用一个初始事件的方法,可在创建按钮时为它添加一个标记。4个按钮中点击任意按钮后都会进入ButtonPressed方法,然后通过id的到当前点击按钮的对象,使用button.tag可判断那个按钮被点击。
请注意看下方的switch方法,通过用户点击不同的按钮将打开@”tt://InfoView/X”页面,applyAnimated:YES表示播放切换页面的动画,不写开始动画效果也可,只是切换页面时将不在有切换动画。
01 | switch (button.tag) { |
02 | case 0: |
03 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/0" ] applyAnimated:YES]]; |
04 | break ; |
05 | case 1: |
06 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/1" ] applyAnimated:YES]]; |
07 | break ; |
08 | case 2: |
09 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/2" ] applyAnimated:YES] ]; |
10 | break ; |
11 | case 3: |
12 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://InfoView/3" ] applyAnimated:YES]]; |
13 | break ; |
14 | default : |
15 | break ; |
16 | } |
如下图所示,在StartViewController类中点击按钮“开始游戏”、“机修游戏”、“关于游戏”、“退出游戏”将分别进入页面:@“tt://InfoView/0”
@“tt://InfoView/1”
@“tt://InfoView/2” @”tt://InfoView/3″,它们对应的视图控制器为”InfoViewController”。
根据它们的关系可得:InfoViewController为StartViewController的子页面。
InfoViewController.h文件:
1 | #import <Three20/Three20.h> |
2 |
3 | @interface InfoViewController : TTViewController |
4 | { |
5 | //页面的ID |
6 | int pageID; |
7 | } |
8 |
9 | @end |
InfoViewController.m文件:
01 | #import "InfoViewController.h" |
02 |
03 | @implementation InfoViewController |
04 |
05 | //注释1 |
06 | - (id)initInfo:( int )ID { |
07 | if (self = [super init]) { |
08 | pageID = ID; |
09 | } |
10 | return self; |
11 | } |
12 |
13 | - ( void )viewDidLoad |
14 | { |
15 | [super viewDidLoad]; |
16 | //根据上级页面点击的按钮而显示标题 |
17 | switch (pageID) { |
18 | case 0: |
19 | self.title = @ "开始游戏页面" ; |
20 | break ; |
21 | case 1: |
22 | self.title = @ "继续游戏页面" ; |
23 | break ; |
24 | case 2: |
25 | self.title = @ "关于游戏页面" ; |
26 | break ; |
27 | case 3: |
28 | self.title = @ "退出游戏页面" ; |
29 | break ; |
30 | default : |
31 | break ; |
32 | } |
33 |
34 | self.view.backgroundColor = [UIColor blackColor]; |
35 | //创建图片视图 |
36 | TTImageView *imageview = [[[TTImageView alloc] initWithFrame: |
37 | CGRectMake(100, 10, 120, 120)]autorelease]; |
38 | imageview.defaultImage = TTIMAGE(@ "bundle://1.jpg" ); |
39 | [self.view addSubview:imageview]; |
40 |
41 | //添加按钮 |
42 | TTButton *button = [TTButton buttonWithStyle:@ "embossedButton:" title:@ "测试按钮" ]; |
43 | button.font = [UIFont boldSystemFontOfSize:30]; |
44 | button.frame = CGRectMake(60, 200, 200, 50); |
45 | [button addTarget:self action:@selector(ButtonPressed) forControlEvents:UIControlEventTouchUpInside]; |
46 | [self.view addSubview: button]; |
47 |
48 | } |
49 |
50 | -( void )ButtonPressed |
51 | { |
52 | //按钮点击后开启ThiredView页面 |
53 | TTNavigator* navigator = [TTNavigator navigator]; |
54 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://ThiredView" ] applyAnimated:YES]]; |
55 |
56 | } |
57 |
58 | @end |
注释1:还记得在StartViewController类中点击按钮后,打开URL:@”tt://InfoView/0″类似的页面吗?大家在回想一下在AppDelegate类中声明所有页面的方法中。
[map from:@"tt://InfoView/(initInfo:)" toViewController:[InfoViewController class]];
如果通过@”tt://InfoView/0″进入InfoViewController类,在-(id)initInfo:(int)ID方法中,ID的值就是0,如果@“tt://InfoView/1”进入InfoViewController类,那么对应ID的值就是1。以此类推,通过这样的方法就能在不同页面之间传递数值。
本例在进入InfoViewController页面中记录上一级界面中点击按钮的ID,然后在ViewDidLoad方法中去编辑当前标题栏中显示的标题内容,实现通过参数来区分显示的页面信息。然后在当前页面中添加一个按钮,点击该按钮后在此将页面切换至第三级页面中。
点击“测试按钮后”程序将进入第三级页面,进入@”tt://ThiredView”对应的ThiredViewController中。
ThiredViewController.h文件
1 | #import <Three20/Three20.h> |
2 |
3 | @interface ThiredViewController : TTViewController |
4 |
5 | @end |
ThiredViewController.m文件。
01 | #import "ThiredViewController.h" |
02 |
03 | @implementation ThiredViewController |
04 |
05 | - ( void )viewDidLoad |
06 | { |
07 | [super viewDidLoad]; |
08 |
09 | self.view.backgroundColor = [UIColor blackColor]; |
10 | //创建图片视图 |
11 | TTImageView *imageview = [[[TTImageView alloc] initWithFrame: |
12 | CGRectMake(100, 10, 120, 120)] autorelease]; |
13 | imageview.defaultImage = TTIMAGE(@ "bundle://2.jpg" ); |
14 | [self.view addSubview:imageview]; |
15 |
16 | TTButton *button0 = [TTButton buttonWithStyle:@ "embossedButton:" title:@ "返回主界面" ]; |
17 | button0.font = [UIFont boldSystemFontOfSize:30]; |
18 | button0.frame = CGRectMake(60, 200, 200, 50); |
19 | [button0 addTarget:self action:@selector(ReturnStartView) forControlEvents:UIControlEventTouchUpInside]; |
20 | [self.view addSubview: button0]; |
21 |
22 | TTButton *button1 = [TTButton buttonWithStyle:@ "embossedButton:" title:@ "打开顶窗口" ]; |
23 | button1.font = [UIFont boldSystemFontOfSize:30]; |
24 | button1.frame = CGRectMake(60, 250, 200, 50); |
25 | [button1 addTarget:self action:@selector(OpenTopView) forControlEvents:UIControlEventTouchUpInside]; |
26 | [self.view addSubview: button1]; |
27 | } |
28 |
29 | -( void )dealloc |
30 | { |
31 | [super dealloc]; |
32 | [[TTNavigator navigator] setDelegate:nil]; |
33 |
34 | } |
35 |
36 | -( void )ReturnStartView |
37 | { |
38 | //注释1 |
39 | TTNavigator* navigator = [TTNavigator navigator]; |
40 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://StartView" ] applyAnimated:YES]]; |
41 |
42 | } |
43 |
44 | -( void )OpenTopView |
45 | { |
46 | //注释2 |
47 | TTNavigator* navigator = [TTNavigator navigator]; |
48 | [navigator openURLAction:[[TTURLAction actionWithURLPath:@ "tt://TopView" ] applyAnimated:YES]]; |
49 |
50 | } |
51 |
52 | @end |
注释1:在屏幕中点击“返回主界面”按钮后,将切换程序页面进入@”tt://StartView” 也就是回到主页面。如下图所示,界面正常的回到了主页面。到这里大家可能会有疑惑。为什么界面的左上角没有返回的按钮。原因简单,回到AppDelegate类中,在入口方法中我们在创建主页面中使用的方法是:
[map from:@"tt://StartView" toSharedViewController:[StartViewController class]];
”toSharedViewController”它表示共享创建控制器,所以页面再次切换至StartViewController类,它不会重新加载页面,所以左上角不会有返回按钮。
带着上面这个疑问,请大家将AppDelegate.m中的方法修改一下。
修改前: [map from:@"tt://StartView" toSharedViewController:[StartViewController class]];
修改后:[map from:@"tt://StartView" toViewController:[StartViewController class]];
如下图所示,返回按钮出现在屏幕当中,显然这不是一个好办法,因为使用toViewController表示页面将会再次加载一次,所以当前的主菜单并不是最开始创建的主菜单,而成为了ThiredViewController的子窗口。
请大家再次回到ThiredViewController当中。
注释2:在界面中点击“打开顶层窗口”按钮,程序页面将切换至@”tt://TopView”,也就是打开TopViewController这个类。为什么说它是顶层窗口?原因是它不同于之前的窗口,之前的窗口左上角都会有返回按钮,点击返回后可回到上一级窗口,而它仅仅是覆盖了上一级窗口,所以它没有左上角的返回按钮。然而这一些的设置都在AppDelegate当中:
[map from:@"tt://TopView" toModalViewController:[TopViewController class]];
toModalViewController方法表示当前界面为一个覆盖类型的页面,打开该页面后将覆盖原有页面。
TopViewController.h文件
1 | #import <Three20/Three20.h> |
2 |
3 | @interface TopViewController : TTViewController |
4 |
5 | @end |
TopViewController.m文件
01 | #import "TopViewController.h" |
02 |
03 | @implementation TopViewController |
04 |
05 | - ( void )viewDidLoad |
06 | { |
07 | [super viewDidLoad]; |
08 |
09 | self.title=@ "顶窗口页面" ; |
10 | self.view.backgroundColor = [UIColor blackColor]; |
11 | //创建图片视图 |
12 | TTImageView *imageview = [[[TTImageView alloc] initWithFrame: |
13 | CGRectMake(100, 10, 120, 120)] autorelease]; |
14 | imageview.defaultImage = TTIMAGE(@ "bundle://3.jpg" ); |
15 | [self.view addSubview:imageview]; |
16 |
17 | TTButton *button0 = [TTButton buttonWithStyle:@ "embossedButton:" title:@ "关闭页面" ]; |
18 | button0.font = [UIFont boldSystemFontOfSize:30]; |
19 | button0.frame = CGRectMake(60, 200, 200, 50); |
20 | [button0 addTarget:self action:@selector(dismiss) forControlEvents:UIControlEventTouchUpInside]; |
21 | [self.view addSubview: button0]; |
22 | } |
23 |
24 | - ( void )dismiss |
25 | { |
26 | //关闭窗口,包括关闭动画 |
27 | [self dismissModalViewControllerAnimated:YES]; |
28 |
29 | } |
30 |
31 | @end |
如下图所示,顶层窗口页面已经打开,它的打开动画也不同于其它窗口,打开时动画方向向上播放。左上角不会出现返回的按钮。在屏幕中点击“关闭页面按钮”将关闭最上层界面,关闭时动画方向向下播放。
仔细想想通过这篇文章我们学习了Three20中打开界面的三种方式,这也是最常用的方式。我相信仔细阅读过这篇博文的朋友应该会爱上Three20了吧。做IOS软件的话,就用它吧。通过这个例子大家应该已经能区分toSharedViewController 与toViewController 以及toModalViewController切换界面之间的区别的吧,一口气写了这么多,累得够呛!!哇咔咔~
最后欢迎各位盆友可以和MOMO一起讨论Three20软件开发,如果你觉得看得不清楚,MOMO附带上本章的源码下载,希望大家可以一起学习 哈哈~。哇咔咔~ MOMO愿和 大家好好学习,大家一起进步哈~!!!