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