剖析Path侧边栏抽屉效果原理(抽屉效果,Path效果)

 如今很多App应用,都用到了侧边栏的效果,比如网易新闻(还带有偏移缩小),今日头条(普遍这种),Path(最先应用这种抽屉效果,所以这种效果也叫Path效果),code4App上已经有很多网友写的第三方侧边栏类,大家可以直接拿来用.这里我主要的是介绍一下这种效果的实现原理,涉及了几个知识点,在其他地方也能用到.

            UINavigationController和UITabBarController是2个主要的视图控制容器,都有属性viewControllers,能够很好地管理多个视图控制器.但有的时候,系统给的有很大的局限性,我们做效果,更多是基于系统UI,自定义很多的控件.就拿侧边栏效果举例,表面上看上去,它只有3个UIViewController,left-mid-right,中间的minViewController作为根控制器.其实,不是的,有4个,应该还有一个RootViewController,作为管理它们的视图控制容器,它的作用,就像UITabBarController,只做管理那3个视图控制器之用,并不参与任何子ViewController的视图,数据的操作.

           这里,又要讲一下UIView和UIViewController的关系了.UIView(视图)在展示用户界面和响应用户界面交互方面起很重要的作用,我们所看到的内容,都是通过视图展示给我们的,属于MVC中的V.而UIViewController(视图控制器),保存所管理视图的引用,协调Model和View之间的数据,通常作为委托或者数据源,简而言之就是实现数据操纵的地方.为什么要讲这个呢?因为我有朋友,直接在一个RootViewController加了3个UIView,我就说他,你干嘛不用UIViewController,他说你那不是控制器嘛,又不是视图.....晕倒,每个UIViewController都有自己管理的view,直接.view不就出来了嘛.

           不仅仅是侧边栏是这样,网易App主界面标签控制的内容也是这样,标签"头条"-"娱乐"-"体育"-"财经"-"科技"等等,其实每个都是对应了一个UIViewController,而不是UITableView,MVC的本意就是M和V不交互,数据的操作还是要放在controller中的,利用iOS5新出的属性addChildViewController,这样就不需要在一个controller处理所有的标签内容,而是将不同数据的处理各自对应一个viewController,一个主UIViewController用来做控制作用(额,是不是有点混乱,没关系,我在下一章会将网易标签栏对应各个内容的功能剖析出来)

@展示主要代码:

[objc] 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.window.backgroundColor = [UIColor whiteColor];  
6.       
7.     DNWLeftViewController * leftVC = [[DNWLeftViewController alloc] init];  
8.     //UINavigationController * leftNC = [[UINavigationController alloc] initWithRootViewController:leftVC];  
9.       
10.     DNWRightViewController * rightVC = [[DNWRightViewController alloc] init];  
11.     //UINavigationController * rightNC = [[UINavigationController alloc] initWithRootViewController:rightVC];  
12.   
13.     DNWMidViewController * midVC = [[DNWMidViewController alloc] init];  
14.     UINavigationController * midNC = [[UINavigationController alloc] initWithRootViewController:midVC];  
15.       
16.       
17.     DNWRootViewController * rootVC = [[DNWRootViewController alloc] init];  
18.     //UINavigationController * rootNC = [[UINavigationController alloc] initWithRootViewController:rootVC];  
19.     rootVC.leftViewController = leftVC;  
20.     rootVC.rightViewController = rightVC;  
21.     rootVC.midViewController = midNC;  
22.       
23.     self.window.rootViewController = rootVC;  
24.       
25.     [self.window makeKeyAndVisible];  
26.     return YES;  
27. }  

[objc] view plaincopy

1. - (void)viewDidLoad  
2. {  
3.     [super viewDidLoad];  
4.     // Do any additional setup after loading the view.  
5.   
6.     /** 
7.      *  1.加载视图的顺序,中间视图放在最后加,因为程序一开始它要显示在最上面 
8.      *  2.所有ViewController的View如果不设置的话,默认全屏大小(标签栏展示效果的话,所有的ViewController都是标签栏以下大小) 
9.      *  3.这里的self-->RootViewController,不要设置为导航控制器 
10.      *  4.只做视图切换,不做其他任何数据操作 
11.      *  5.手势切换,原理一样,自己可以加上,点击或者拖拉都想,这个我就不在这里描述了 
12.      *   
13.      */  
14.     [self addChildViewController:self.leftViewController];  
15.     [self.view addSubview:self.leftViewController.view];  
16.       
17.     [self addChildViewController:self.rightViewController];  
18.     [self.view addSubview:self.rightViewController.view];  
19.       
20.     [self addChildViewController:self.midViewController];  
21.     [self.view addSubview:_midViewController.view];  
22.       
23.     UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeSystem];  
24.     leftButton.frame = CGRectMake(0, 20, 40, 40);  
25.     [leftButton setTitle:@"left" forState:UIControlStateNormal];  
26.     [leftButton addTarget:self action:@selector(didClickLeftBarButtonAction:) forControlEvents:UIControlEventTouchUpInside];  
27.     [self.midViewController.view addSubview:leftButton];  
28.       
29.     UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeSystem];  
30.     rightButton.frame = CGRectMake(280 ,20, 40, 40);  
31.     [rightButton setTitle:@"right" forState:UIControlStateNormal];  
32.     [rightButton addTarget:self action:@selector(didClickRightBarButtonAction:) forControlEvents:UIControlEventTouchUpInside];  
33.     [self.midViewController.view addSubview:rightButton];  
34. }  
35.   
36. //  网易侧边栏效果  
37. - (void)didClickLeftBarButtonAction:(UIBarButtonItem *)leftButton{  
38.   
39.     //  用这个判断条件是为了左边视图出来后,再点击按钮能够回去  
40.     if (self.midViewController.view.frame.origin.x == 0) {  
41.           
42.         [UIView animateWithDuration:0.3 animations:^{  
43.             //  ScreenWidth  ScreenHeight  屏幕实际大小宏  
44.             self.leftViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);  
45.             //  也可以通过这种方式来实现  
46.             //self.midViewController.view.transform = CGAffineTransformTranslate(self.midViewController.view.transform, 280,64 );  
47.             self.midViewController.view.frame = CGRectMake(280, 64, ScreenWidth, ScreenHeight-64*2);  
48.             self.rightViewController.view.frame = CGRectMake(280, 64, ScreenWidth, ScreenHeight-64*2);  
49.               
50.         } completion:^(BOOL finished) {  
51.         }];  
52.           
53.     }else{  
54.           
55.         [UIView animateWithDuration:0.3 animations:^{  
56.               
57.             self.midViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);  
58.             self.rightViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);  
59.               
60.         } completion:^(BOOL finished) {  
61.         }];  
62.     }  
63.   
64.       
65. }  
66.   
67. //  标准侧边栏效果  
68. - (void)didClickRightBarButtonAction:(UIBarButtonItem *)rightButton{  
69.       
70.     if (_midViewController.view.frame.origin.x == 0) {  
71.           
72.         [UIView animateWithDuration:1.1 animations:^{  
73.               
74.             _midViewController.view.frame = CGRectMake(-280, 0, ScreenWidth, ScreenHeight);  
75.             _rightViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);  
76.               
77.         } completion:^(BOOL finished) {  
78.               
79.         }];  
80.           
81.     }else{  
82.           
83.         [UIView animateWithDuration:1.1 animations:^{  
84.               
85.             _midViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);  
86.             _rightViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);  
87.               
88.         } completion:^(BOOL finished) {  
89.               
90.         }];  
91.     }  
92. }