菜单视图最常见的一种实现是“侧滑抽屉”、“地下室”或“侧菜单”,这在Facebook和Path等应用中变得流行。当用户点击打开侧菜单时,用户的主界面向右滑动(或在某些实现中向左滑动)来显示另一个视图下方。这在iOS 6及之前效果良好。对于iOS 7意味着什么吗?
从iOS 7开始,鼓励应用使用整个屏幕,而不是依赖于20pt状态栏在应用平面上方。这打破了现有的侧栏概念,因为状态栏现在覆盖了两个视图上下文并具有单一样式。
与Luvocracy团队合作,我们需要找到一种为iOS 7版本显示侧菜单的方法。许多Dribbble上的设计师开始关注侧栏的新方法。受此启发,我们迅速制作了一个原型,将视图向右滑动并放大以显示菜单,正如上面Dribbble示例所示。从这一想法出发,并受到iOS 7中其他想法的启发,我们将它从滑动改变为更偏向于视口变化。
TWTSideMenuViewController是通过一个单一代理视图控制器实现的,该控制器管理您的菜单和主视图作为子代理视图控制器。要设置它,初始化一个TWTSideMenuViewController的新实例并提供一个菜单视图控制器和一个主视图控制器。
// application:didFinishLaunchingWithOptions:
self.menuViewController = [[UIViewController alloc] initWithNibName:nil bundle:nil];
self.mainViewController = [[UIViewController alloc] initWithNibName:nil bundle:nil];
// create a new side menu
self.sideMenuViewController = [[TWTSideMenuViewController alloc] initWithMenuViewController:self.menuViewController mainViewController:[[UINavigationController alloc] initWithRootViewController:self.mainViewController]];
// specify the shadow color to use behind the main view controller when it is scaled down.
self.sideMenuViewController.shadowColor = [UIColor blackColor];
// specify a UIOffset to offset the open position of the menu
self.sideMenuViewController.edgeOffset = UIOffsetMake(18.0f, 0.0f);
// specify a scale to zoom the interface — the scale is 0.0 (scaled to 0% of it's size) to 1.0 (not scaled at all). The example here specifies that it zooms so that the main view is 56.34% of it's size in open mode.
self.sideMenuViewController.zoomScale = 0.5634f;
// set the side menu controller as the root view controller
self.window.rootViewController = self.sideMenuViewController;
以后,当您需要更改主视图控制器上下文中的内容时,您可以使用便利方法简单地设置视图控制器。
// All views presented in a side menu view controller have access to the side menu directly. Much like the way UINavigationController works. To swap to a new view controller simply set the main view controller:
[self.sideMenuViewController setMainViewController:controller animated:YES closeMenu:YES];
TWTSideMenuViewController是由Two Toasters在开发Luvocracy时创建的。
在MIT许可证下提供。有关更多信息,请参阅LICENSE文件。