`

新风作浪博客学习(六)ios 视图切换翻页效果 .

    博客分类:
  • ios
ios 
阅读更多
本文写的是视图切换,涉及到的内容有

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

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

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




[img]

[/img]

[img]

[/img]

[img]

[/img]

[img]

[/img]



开始制作:

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

[img]

[/img]






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

[img]

[/img]







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

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

还有一个通知栏,显示电量信息信号的地方是20像素;
- (void)viewDidLoad
{
    [super viewDidLoad];
	// Do any additional setup after loading the view, typically from a nib.
    
//    创建导航栏,44像素
    UINavigationBar *navigationBar = [[UINavigationBar alloc] initWithFrame:CGRectMake(0, 0, 320, 44)];
    
//    需要在导航栏上创建按钮,所以先创建一个导航栏集合
    UINavigationItem *navagationItem = [[UINavigationItem alloc] initWithTitle:@"导航栏"];
    
    UIBarButtonItem *leftButton = [[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemAction target:self action:@selector(pageDown:)];
    
    UIBarButtonItem *rightButton = [[UIBarButtonItem alloc]initWithTitle:@"右测试"
                                                                   style:UIBarButtonItemStyleDone
                                                                  target:self
                                                                  action:@selector(leftpage:)];
    [navigationBar pushNavigationItem:navagationItem animated:YES];
    
    [navagationItem setLeftBarButtonItem:leftButton animated:YES];
    [navagationItem setRightBarButtonItem:rightButton animated:YES];
    
    [self.view addSubview:navigationBar];
     
    UIToolbar *toolBar = [[UIToolbar alloc] initWithFrame:CGRectMake(0, 416, 320, 44)];
    
    NSMutableArray *toolBarArray = [NSMutableArray array];
     
    [toolBarArray addObject:[[UIBarButtonItem alloc] initWithBarButtonSystemItem:UIBarButtonSystemItemPageCurl
                                                                           target:self
                                                                           action:@selector(switchLoadView:)]];
    
    [toolBarArray addObject:[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemSearch
                                                                         target:self
                                                                         action:@selector(rightpage:)]];
    
    [toolBarArray addObject:[[UIBarButtonItem alloc]initWithTitle:@"MyTitle"
                                                            style:UIBarButtonItemStylePlain
                                                           target:self
                                                           action:nil]];
    
    
    
    //UIToolBar上添加图像
    [toolBarArray addObject:[[UIBarButtonItem alloc]initWithImage:[UIImage imageNamed:@"myImage.png"]
                                                            style:UIBarButtonItemStylePlain
                                                           target:self
                                                           action:nil]];
       
    [toolBar setItems:toolBarArray animated:YES];  
    [self.view addSubview:toolBar];
      
}



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

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








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

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

按钮时间再次也不做过多解释,全部写在注释里了,其他几个都一样,只是修改了动画效果,变化不大,详情可下载源代码研究一下;
-(void) switchLoadView:(id)sender
{

//开始一个动画    
    [UIView beginAnimations:@"Curl" context:nil];
//    设置动画方式,开始和结束时动画效果比较慢
    [UIView setAnimationCurve:UIViewAnimationCurveEaseInOut];
//    动画持续时间
    [UIView setAnimationDuration:1.25];
//    设置动画效果,向上翻页
    [UIView setAnimationTransition:UIViewAnimationTransitionCurlUp forView:self.view cache:YES];    
    
//    首先判断firstView视图父视图是否为空
    if (firstView.view.superview == nil) 
    {
//        父视图为空,在判断他的子视图是否为空,如果为空在创建一个视图加载上面
        if (firstView.view == nil) {
            FirstViewController *firstViewDemo = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
            firstView = firstViewDemo;
        }
//        把seconView视图从父视图中移除
        [secondView.view removeFromSuperview];
//        在当前视图插入子视图firstView的视图
        [self.view insertSubview:firstView.view atIndex:0];
    }
       
    else {
            if (secondView.view == nil) 
            {
                SecondViewController *secondViewDemo = [[SecondViewController alloc] initWithNibName:@"SecondViewController" bundle:nil];
                secondView = secondViewDemo;
            }
            [firstView.view removeFromSuperview];
            [self.view insertSubview:secondView.view atIndex:0];
        }
//       动画结束
    [UIView commitAnimations];
}





咱在这在研究一个问题,在RootAppDelegate.m中我们先看看系统生成的代码
- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.   
    self.viewController = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:nil];
    self.window.rootViewController = self.viewController;
    [self.window makeKeyAndVisible];
    return YES;
}




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

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




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

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
    // Override point for customization after application launch.
//    self.viewController = [[RootViewController alloc] initWithNibName:@"RootViewController" bundle:nil];
//    self.window.rootViewController = self.viewController;
     
    self.fTestViewController = [[FirstViewController alloc] initWithNibName:@"FirstViewController" bundle:nil];
//  把根控制视图设置成fTestViewController
    self.window.rootViewController = self.fTestViewController;
    
    [self.window makeKeyAndVisible];
    return YES;
}



然后再到我们的FirstViewController.m的ViewDidLoad函数先添加几行代码,以示区别
- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view from its nib.
    self.view.backgroundColor = [UIColor yellowColor];
    
    UIToolbar *toolBar = [[UIToolbar alloc]initWithFrame:CGRectMake(0, 0, 320, 44)];
    
   NSMutableArray *toolBarArray = [NSMutableArray array];
    [toolBarArray addObject:[[UIBarButtonItem alloc]initWithBarButtonSystemItem:UIBarButtonSystemItemAction
                                                                         target:self
                                                                         action:nil]];
    
    UIBarButtonItem *title=[[UIBarButtonItem alloc] initWithTitle:@"My Test"
                                                            style:UIBarButtonItemStylePlain
                                                           target:self
                                                           action:nil];
    [toolBar setItems:[NSArray arrayWithObject:title]];
    [toolBar setItems:toolBarArray];
        [self.view addSubview:toolBar];
    
}





  • 大小: 128.5 KB
  • 大小: 114.1 KB
  • 大小: 101.9 KB
  • 大小: 105.3 KB
  • 大小: 182 KB
  • 大小: 197.1 KB
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics