如今很多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) {
}];
}
}
@效果图
剖析Path侧边栏抽屉效果原理(抽屉效果,Path效果)