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

来源：互联网发布：重庆旅游知乎编辑：程序博客网时间：2024/06/11 20:05

如今很多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) {                    }];    }}

@效果图

6 0