ios侧边栏效果

如今很多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:^{			//ScreenWidthScreenHeight屏幕实际大小宏			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) {					}];	}}

@效果图