ios 视图切换翻页效果

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

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. //    创建导航栏,44像素
  6. UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
  7. //    需要在导航栏上创建按钮,所以先创建一个导航栏集合
  8. UINavigationItem *navagationItem = [[UINavigationItem alloc] initWithTitle:@"导航栏"];
  9. UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(pageDown:)];
  10. UIBarButtonItem *rightButton = [[UIBarButtonItem alloc]initWithTitle:@"右测试"
  11. style:UIBarButtonItemStyleDone
  12. target:self
  13. action:@selector(leftpage:)];
  14. [navigationBar pushNavigationItem:navagationItem animated:YES];
  15. [navagationItem setLeftBarButtonItem:leftButton animated:YES];
  16. [navagationItem setRightBarButtonItem:rightButton animated:YES];
  17. [self.view addSubview:navigationBar];
  18. UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 416, 320, 44)];
  19. NSMutableArray *toolBarArray = [NSMutableArray array];
  20. [toolBarArray addObject:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPageCurl
  21. target:self
  22. action:@selector(switchLoadView:)]];
  23. [toolBarArray addObject:[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemSearch
  24. target:self
  25. action:@selector(rightpage:)]];
  26. [toolBarArray addObject:[[UIBarButtonItem alloc]initWithTitle:@"MyTitle"
  27. style:UIBarButtonItemStylePlain
  28. target:self
  29. action:nil]];
  30. //UIToolBar上添加图像
  31. [toolBarArray addObject:[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"myImage.png"]
  32. style:UIBarButtonItemStylePlain
  33. target:self
  34. action:nil]];
  35. [toolBar setItems:toolBarArray animated:YES];
  36. [self.view addSubview:toolBar];
  37. }

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

附上代码: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. self.fTestViewController = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
  8. //  把根控制视图设置成fTestViewController
  9. self.window.rootViewController = self.fTestViewController;
  10. [self.window makeKeyAndVisible];
  11. return YES;
  12. }

然后再到我们的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. UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];
  7. NSMutableArray *toolBarArray = [NSMutableArray array];
  8. [toolBarArray addObject:[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAction
  9. target:self
  10. action:nil]];
  11. UIBarButtonItem *title=[[UIBarButtonItem alloc] initWithTitle:@"My Test"
  12. style:UIBarButtonItemStylePlain
  13. target:self
  14. action:nil];
  15. [toolBar setItems:[NSArray arrayWithObject:title]];
  16. [toolBar setItems:toolBarArray];
  17. [self.view addSubview:toolBar];
  18. }

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

时间: 2024-11-05 11:55:43

ios 视图切换翻页效果的相关文章

Activity切换动画(overridePendingTransition)-翻页效果

Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画.{它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时的动画:在Android的2.0版本之后,有了一个函数来帮我们实现这个动画.这个函数就是YoverridePendingTransitionj这个函数有两个参数,一个参数是第一个activity退出时的动画,另外一个参数则是第二个activity进入时的动画. 这里需要特别说明的是,关于override

iOS开发日记45-类似淘宝商品详情查看翻页效果的实现

今天博主有一个类似淘宝商品详情查看翻页效果的实现的需求,遇到了一些困难点,在此和大家分享,希望能够共同进步. 1.使用第三方框架 我用到的第三方库EGORefreshTableHeaderView下拉刷新的效果还有就是PWLoadMoreTableFooterView上拉加载更多 主要的思路在于UISCrollView两页,一页展示商品概况,另一页展示商品更多详情 首先,第一页的view包含一个UITableView,这个tableView实现PWLoadMoreTableFooterView中

iOS:横向使用iPhone默认的翻页效果

大致思路使用两层辅助UIView的旋转来实现添加后的View的横向翻页效果 CATransform3D transformA = CATransform3DRotate(CATransform3DIdentity, degreesToRadian(90), 0, 0, 1.0f);     CATransform3D transformB = CATransform3DRotate(CATransform3DIdentity, degreesToRadian(180), 0.0f, 1.0f,

关于Page翻页效果, PageViewConrtoller

Page View Controllers你使用一个page view controller用page by page的方式来展示内容.一个page view controller管理一个self-contained视图架构.这个架构的父视图由page View controller管理,并且子视图由你提供的view Controllers管理. 一,解析Page View Controller一个page view controller有一个单独的视图,是你的内容的存放的地方.下图显示了pag

Android翻页效果原理实现之翻页的尝试

尊重原创转载请注明:From AigeStudio(http://blog.csdn.net/aigestudio)Power by Aige 侵权必究! 炮兵镇楼 在<自定义控件其实很简单>系列的前半部分中我们用了整整六节近两万字两百多张配图讲了Android图形的绘制,虽然篇幅很巨大但仍然只是图形绘制的冰山一角,旨在领大家入门,至于修行成果就看各位的了--那么这个些列主要是通过前面学习到的一些方法来尝试完成一个翻页的效果. 对于我个人来说,我是不太建议大家在没自己去尝试前看本文的,因为你看

CSS3-----图片翻页效果的展示

在开发一个网站的过程中各种翻页效果数不胜数,在这里我将介绍一下简单的一种方法就是使用css3的旋转即可实现这种常见的效果: 显示效果如下: 首先是页面的布局,不用那么复杂; a标签的href属性,一般指向一个URL地址,也可以调用javascript,如href="javascript:xxx();",但是文档中推荐这样写<a href="http://www.111cn.net/zhongxing/U880/ javascript:void(0)" oncl

前端实现类似于iBooks的图书翻页效果的网络阅读软件(一)

昨天晚上在群里交流各种脑动大开的题目,我顺手也提了一个问题: JS如何做“字符分页“ 原意是源于我4年前公司项目,我负责开发1年的样子,后来各种原因就没有然后了… http://reader.appcarrier.com/     以上图片是手机上的截图,Metro风格当前可是风靡一时,软件本身是类似现在的”追书神器” 通过书名,在网络上搜索到对应的内容,之后保存到本地数据库.在通过JS获取数据再处理 自己装好测了下,貌似下载服务器已经挂了~ 程序采用PhoneGap打包的,数据采集是用底层完成

MVC4下如何实现模态弹出对话框效果--对话框里可以实现翻页效果(2)

其实上文只是对如何加代码的顺序方法的表述,这里面的代码每个函数是什么意思,要如何理解?需要我们深思. 我们先大框子去理解:我们上文在控制器里只是去HTTPGET了,HTTPget理解其实就是请求.那么我么要保存,要插入的时候要怎么做. 上文在控制器里增加了NEW的动作,当然我们要增加NEW的视图(New.cshtml),视图里面会有一个代码. using(Ajax.BeginForm("New","DataModule",new AjaxOptions{ Inser

FlipViewPager 对item实现左右对折滑动翻页效果《IT蓝豹》

FlipViewPager 对item实现左右对折滑动翻页效果 <FlipViewPager 对每一条item实现左右对折滑动翻页效果>,解决左右滑动和上下滑动的事件分发处理机制.内部实现如下:用ListView试下,对listview设置adapter,这个adapter继承BaseFlipAdapter<Friend>,然后对每一个item进行view处理,部分代码如下:class FriendsAdapter extends BaseFlipAdapter<Friend