ios 视图切换翻页效果

浏览数：29 / 时间：2015年06月11日

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

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

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

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

 

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

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

向上翻页 和向下翻页

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

 

 

 

开始制作：

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

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

 

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的视图了

 

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

标签： Android iOS 移动互联 终端开发

相关文章

随机文章

您可能还喜欢

您可能还喜欢