如今很多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用来做控制作用(额,是不是有点混乱,没关系,我在下一章会将网易标签栏对应各个内容的功能剖析出来)
@展示主要代码:
- - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
- {
- self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
- // Override point for customization after application launch.
- self.window.backgroundColor = [UIColor whiteColor];
- DNWLeftViewController * leftVC = [[DNWLeftViewController alloc] init];
- //UINavigationController * leftNC = [[UINavigationController alloc] initWithRootViewController:leftVC];
- DNWRightViewController * rightVC = [[DNWRightViewController alloc] init];
- //UINavigationController * rightNC = [[UINavigationController alloc] initWithRootViewController:rightVC];
- DNWMidViewController * midVC = [[DNWMidViewController alloc] init];
- UINavigationController * midNC = [[UINavigationController alloc] initWithRootViewController:midVC];
- DNWRootViewController * rootVC = [[DNWRootViewController alloc] init];
- //UINavigationController * rootNC = [[UINavigationController alloc] initWithRootViewController:rootVC];
- rootVC.leftViewController = leftVC;
- rootVC.rightViewController = rightVC;
- rootVC.midViewController = midNC;
- self.window.rootViewController = rootVC;
- [self.window makeKeyAndVisible];
- return YES;
- }
- - (void)viewDidLoad
- {
- [super viewDidLoad];
- // Do any additional setup after loading the view.
- /**
- * 1.加载视图的顺序,中间视图放在最后加,因为程序一开始它要显示在最上面
- * 2.所有ViewController的View如果不设置的话,默认全屏大小(标签栏展示效果的话,所有的ViewController都是标签栏以下大小)
- * 3.这里的self-->RootViewController,不要设置为导航控制器
- * 4.只做视图切换,不做其他任何数据操作
- * 5.手势切换,原理一样,自己可以加上,点击或者拖拉都想,这个我就不在这里描述了
- *
- */
- [self addChildViewController:self.leftViewController];
- [self.view addSubview:self.leftViewController.view];
- [self addChildViewController:self.rightViewController];
- [self.view addSubview:self.rightViewController.view];
- [self addChildViewController:self.midViewController];
- [self.view addSubview:_midViewController.view];
- UIButton *leftButton = [UIButton buttonWithType:UIButtonTypeSystem];
- leftButton.frame = CGRectMake(0, 20, 40, 40);
- [leftButton setTitle:@"left" forState:UIControlStateNormal];
- [leftButton addTarget:self action:@selector(didClickLeftBarButtonAction:) forControlEvents:UIControlEventTouchUpInside];
- [self.midViewController.view addSubview:leftButton];
- UIButton *rightButton = [UIButton buttonWithType:UIButtonTypeSystem];
- rightButton.frame = CGRectMake(280 ,20, 40, 40);
- [rightButton setTitle:@"right" forState:UIControlStateNormal];
- [rightButton addTarget:self action:@selector(didClickRightBarButtonAction:) forControlEvents:UIControlEventTouchUpInside];
- [self.midViewController.view addSubview:rightButton];
- }
- // 网易侧边栏效果
- - (void)didClickLeftBarButtonAction:(UIBarButtonItem *)leftButton{
- // 用这个判断条件是为了左边视图出来后,再点击按钮能够回去
- if (self.midViewController.view.frame.origin.x == 0) {
- [UIView animateWithDuration:0.3 animations:^{
- // ScreenWidth ScreenHeight 屏幕实际大小宏
- self.leftViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
- // 也可以通过这种方式来实现
- //self.midViewController.view.transform = CGAffineTransformTranslate(self.midViewController.view.transform, 280,64 );
- self.midViewController.view.frame = CGRectMake(280, 64, ScreenWidth, ScreenHeight-64*2);
- self.rightViewController.view.frame = CGRectMake(280, 64, ScreenWidth, ScreenHeight-64*2);
- } completion:^(BOOL finished) {
- }];
- }else{
- [UIView animateWithDuration:0.3 animations:^{
- self.midViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
- self.rightViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
- } completion:^(BOOL finished) {
- }];
- }
- }
- // 标准侧边栏效果
- - (void)didClickRightBarButtonAction:(UIBarButtonItem *)rightButton{
- if (_midViewController.view.frame.origin.x == 0) {
- [UIView animateWithDuration:1.1 animations:^{
- _midViewController.view.frame = CGRectMake(-280, 0, ScreenWidth, ScreenHeight);
- _rightViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
- } completion:^(BOOL finished) {
- }];
- }else{
- [UIView animateWithDuration:1.1 animations:^{
- _midViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
- _rightViewController.view.frame = CGRectMake(0, 0, ScreenWidth, ScreenHeight);
- } completion:^(BOOL finished) {
- }];
- }
- }