码迷，mamicode.com
首页 > 移动开发 > 详细

ios 视图切换翻页效果

时间：2014-10-27 21:00:36      阅读：230      评论：0      收藏：0      [点我收藏+]

标签：style   blog   http   io   color   os   ar   for   sp   

本文写的是视图切换，涉及到的内容有

1.实现代码添加Navigation Bar  Toolbal；

2.实现在Navigation Bar和Toolbar上用代码添加Bar Button Item；

3.UIView层面的简单动画效果

 

先把实现结果功能截图贴出来，对应动画效果

开始界面 和第一次向上翻页

向上翻页 和向下翻页

从左向右翻页 和从右向左翻页

bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣bubuko.com,布布扣

 

 

 

开始制作：

1.创建一个新工程叫NVDemo； File->New->Project ->single View Application -> next

bubuko.com,布布扣

2.在新建两个ViewController，分别为FirstViewController和SecondViewController，顺便把XIB一块生成好

bubuko.com,布布扣

 

3.首先在视图上添加导航栏和导航按钮，经测试导航栏上只能添加两个导航按钮，和设置一个title标题；

我们还需要知道的一个常识是NavigationBar  ToolBar  Tab  Bar  都是44像素，所以在设置他们宽度时候他们的高度设置成44

还有一个通知栏，显示电量信息信号的地方是20像素；

 

[cpp] view plaincopy
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.     // Do any additional setup after loading the view, typically from a nib.  
  5.       
  6. //    创建导航栏,44像素  
  7.     UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];  
  8.       
  9. //    需要在导航栏上创建按钮，所以先创建一个导航栏集合  
  10.     UINavigationItem *navagationItem = [[UINavigationItem alloc] initWithTitle:@"导航栏"];  
  11.       
  12.     UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(pageDown:)];  
  13.       
  14.     UIBarButtonItem *rightButton = [[UIBarButtonItem alloc]initWithTitle:@"右测试"  
  15.                                                                    style:UIBarButtonItemStyleDone  
  16.                                                                   target:self  
  17.                                                                   action:@selector(leftpage:)];  
  18.     [navigationBar pushNavigationItem:navagationItem animated:YES];  
  19.       
  20.     [navagationItem setLeftBarButtonItem:leftButton animated:YES];  
  21.     [navagationItem setRightBarButtonItem:rightButton animated:YES];  
  22.       
  23.     [self.view addSubview:navigationBar];  
  24.        
  25.     UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 416, 320, 44)];  
  26.       
  27.     NSMutableArray *toolBarArray = [NSMutableArray array];  
  28.        
  29.     [toolBarArray addObject:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPageCurl  
  30.                                                                            target:self  
  31.                                                                            action:@selector(switchLoadView:)]];  
  32.       
  33.     [toolBarArray addObject:[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemSearch  
  34.                                                                          target:self  
  35.                                                                          action:@selector(rightpage:)]];  
  36.       
  37.     [toolBarArray addObject:[[UIBarButtonItem alloc]initWithTitle:@"MyTitle"  
  38.                                                             style:UIBarButtonItemStylePlain  
  39.                                                            target:self  
  40.                                                            action:nil]];  
  41.       
  42.       
  43.       
  44.     //UIToolBar上添加图像  
  45.     [toolBarArray addObject:[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"myImage.png"]  
  46.                                                             style:UIBarButtonItemStylePlain  
  47.                                                            target:self  
  48.                                                            action:nil]];  
  49.          
  50.     [toolBar setItems:toolBarArray animated:YES];    
  51.     [self.view addSubview:toolBar];  
  52.         
  53. }  

 

 

           [navigationBar pushNavigationItem:navagationItem animated:YES];涉及到一个压栈的操作，把navigationItem压到navigationBar里，导航栏上只能添加左右两个按钮；所以是setLeftBarButtonItem 和 setRightBarButtonItem，最后再将navigationBar添加到视图之上；

         在Toolbar上添加可以添加各种按钮，创建一个可变数组，把添加的按钮全部放到数组上，[toolBar setItems:toolBarArrayanimated:YES];将数组里按钮集合添加到了toolBar上面，选取图片的时候素材没选好，所以显示出来的图片那个按钮效果不是太好


4.接下来说的是按钮事件，因为需要用到FirstViewController和SecondViewController，在RootViewController.m添加上他们的头文件，为了区别确实是两个视图的切换，在他们的ViewDidLoad函数中初始化视图的背景颜色，

self.view.backgroundColor = [UIColor yellowColor];  和self.view.backgroundColor = [UIColor redColor];

 

按钮时间再次也不做过多解释，全部写在注释里了，其他几个都一样，只是修改了动画效果，变化不大，详情可下载源代码研究一下；

 

[cpp] view plaincopy
  1. -(void) switchLoadView:(id)sender  
  2. {  
  3.   
  4. //开始一个动画      
  5.     [UIView beginAnimations:@"Curl" context:nil];  
  6. //    设置动画方式，开始和结束时动画效果比较慢  
  7.     [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];  
  8. //    动画持续时间  
  9.     [UIView setAnimationDuration:1.25];  
  10. //    设置动画效果，向上翻页  
  11.     [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];      
  12.       
  13. //    首先判断firstView视图父视图是否为空  
  14.     if (firstView.view.superview == nil)   
  15.     {  
  16. //        父视图为空，在判断他的子视图是否为空，如果为空在创建一个视图加载上面  
  17.         if (firstView.view == nil) {  
  18.             FirstViewController *firstViewDemo = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];  
  19.             firstView = firstViewDemo;  
  20.         }  
  21. //        把seconView视图从父视图中移除  
  22.         [secondView.view removeFromSuperview];  
  23. //        在当前视图插入子视图firstView的视图  
  24.         [self.view insertSubview:firstView.view atIndex:0];  
  25.     }  
  26.          
  27.     else {  
  28.             if (secondView.view == nil)   
  29.             {  
  30.                 SecondViewController *secondViewDemo = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];  
  31.                 secondView = secondViewDemo;  
  32.             }  
  33.             [firstView.view removeFromSuperview];  
  34.             [self.view insertSubview:secondView.view atIndex:0];  
  35.         }  
  36. //       动画结束  
  37.     [UIView commitAnimations];  
  38. }  


附上代码:http://download.csdn.net/detail/duxinfeng2010/4407717

 

 

 

 

咱在这在研究一个问题，在RootAppDelegate.m中我们先看看系统生成的代码

 

 

[cpp] view plaincopy
  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
  2. {  
  3.     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
  4.     // Override point for customization after application launch.     
  5.     self.viewController = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:nil];  
  6.     self.window.rootViewController = self.viewController;  
  7.     [self.window makeKeyAndVisible];  
  8.     return YES;  
  9. }  


系统直接加载的就是的RootViewController的视图，也就是弹出第一个界面是RootViewController.xib,假如说我想第一个就显示的FirstViewController控制的视图怎么办？ 我们就可以在这个函数中进行重写

 

在delegateApp.h中@class RootViewController后面添加@class FirstViewController;此处声明一个类，在这样当我们添加@property (strong, nonatomic) FirstViewController *fTestViewController;才不会报错；

 

只需修改两行代码，此处注释原先加载RootViewController视图的代码，可能是我命名的不够合理，RootViewController和rootViewController要区别开，一个工程建立的，一个是系统本身自动生成的

 

[cpp] view plaincopy
  1. - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions  
  2. {  
  3.     self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];  
  4.     // Override point for customization after application launch.  
  5. //    self.viewController = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:nil];  
  6. //    self.window.rootViewController = self.viewController;  
  7.        
  8.     self.fTestViewController = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];  
  9. //  把根控制视图设置成fTestViewController  
  10.     self.window.rootViewController = self.fTestViewController;  
  11.       
  12.     [self.window makeKeyAndVisible];  
  13.     return YES;  
  14. }  

 

 

然后再到我们的FirstViewController.m的ViewDidLoad函数先添加几行代码，以示区别

 

[cpp] view plaincopy
  1. - (void)viewDidLoad  
  2. {  
  3.     [super viewDidLoad];  
  4.     // Do any additional setup after loading the view from its nib.  
  5.     self.view.backgroundColor = [UIColor yellowColor];  
  6.       
  7.     UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];  
  8.       
  9.    NSMutableArray *toolBarArray = [NSMutableArray array];  
  10.     [toolBarArray addObject:[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAction  
  11.                                                                          target:self  
  12.                                                                          action:nil]];  
  13.       
  14.     UIBarButtonItem *title=[[UIBarButtonItem alloc] initWithTitle:@"My Test"  
  15.                                                             style:UIBarButtonItemStylePlain  
  16.                                                            target:self  
  17.                                                            action:nil];  
  18.     [toolBar setItems:[NSArray arrayWithObject:title]];  
  19.     [toolBar setItems:toolBarArray];  
  20.         [self.view addSubview:toolBar];  
  21.       
  22. }  


然后，当运行程序的时候，加载的就是FirstViewController的视图了

 

bubuko.com,布布扣

ios 视图切换翻页效果

标签：style   blog   http   io   color   os   ar   for   sp   

原文地址：http://www.cnblogs.com/geek6/p/4055051.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！