怎样用swift制作一个滑出的导航控制面板.docx

1、怎样用swift制作一个滑出的导航控制面板怎样用swift制作一个滑出的导航控制面板向右滑出一个导航控制面板。 这个教程会展示给你如何制作一个侧滑导航面板，就像是facebook或者IOS apps的侧滑页面。滑出式导航页面的设计模式准许开发者添加永久性导航到应用程序上，而无需占用宝贵的屏幕空间。用户可以选择在任何时间显示导航栏，同时还可以看到当前的内容。在这个教程中，你会发现，制作一个侧滑导航面板没有你想象的那么复杂。准备开始这次要做的项目是关于一个小猫小狗照片的侧滑导航栏，准备开始，你需要先下载一些“开始文件starter project for this tutorial”，这是一个zi

2、p的文件，将它保存到一个方便的地方，这样方便找到你的项目。打开Xcode, 你会发现Resources文件包含了所有的小猫和小狗的照片，这些照片是用来显示到app里的。你还会发现，总共有3个主视图控制器。当你想把这个教程运用到你的项目里，有以下几点是你需要牢记的：1. ContainerViewController: 这就是奇迹发生的地方！它包含了左视图，中心视图和右视图控制器，然后用动画和滑动来操控。在这个项目里，它在application(_:did-FinishLaunchingWithOptions:)创建并添加了一个窗口在AppDelegate.swift2.CenterViewCo

3、ntroller: 中心面板，这个可以被你自己的视图控制器代替（确保你copy了所有的按钮actions).3.SidePanelViewController: 使用左面板和右边面板，这样可以用你自己的视图控制器来代替。所有的视图控制器都在Main.storyboard里定义过，所以你可以快速的看一遍storyboard, 然后知道这个app大概是什么样子的。现在，你已经对这个项目的结构非常熟悉了吧，我们准备开始咯！找到你的中心视图管理器在这个部分，你需要找到CenterViewController，在ContainerViewController里面，就像是一个子控制器。打开Containe

4、rViewController.swift, 你会看到在底部文件里有一个小的UIStoryboard的扩展。它添加了一些类方法，使它更简洁的在storyboard里加载特定的视图控制器，别着急，你马上就会用到这些方法了。添加一组属性到ContainerViewController，给CenterViewController和UINavigationController，在viewDidLoad():上面。var centerNavigationController: UINavigationController!var centerViewController: CenterViewContr

5、oller!接下来，添加下面的代码到viewDidLoad(), centerViewController = UIStoryboard.centerViewController()centerViewController.delegate = self / wrap the centerViewController in a navigation controller, so we can push views to it/ and display bar button items in the navigation barcenterNavigationController = UINav

6、igationController(rootViewController: centerViewController)view.addSubview(centerNavigationController.view)addChildViewController(centerNavigationController) centerNavigationController.didMoveToParentViewController(self)上面的代码创建了一个新的CenterViewController， 然后分配他去你刚刚创建的centerViewController。另外，还创建了一个UINa

7、vigationController，用来包含中心视图控制器。接下来，添加导航控制器到ContainerViewController，然后用 addSubview(_:), addChildViewController(_:)和didMoveToParentViewController(_:)的方法来设置父类子类的关系。这些代码还设置了当前的视图控制器作为中心视图控制器的代理。中心视图控制器会用代理告知它的container，何时展示或隐藏左边和右边栏面板。你需要修改界面的类，让它可以遵守CenterViewControllerDelegate的协议。以下的代码有很多都是空的方法，你以后需要填

8、充代码的。/ MARK: CenterViewController delegate extension ContainerViewController: CenterViewControllerDelegate func toggleLeftPanel() func toggleRightPanel() func addLeftPanelViewController() func addRightPanelViewController() func animateLeftPanel(#shouldExpand: Bool) func animateRightPanel(#shouldExpa

9、nd: Bool) 现在是时候来检查你的项目了，运行你的项目。如果所有代码都OK，你会看到下面的屏幕。是的，这些在顶部的按钮最后会显示你的小猫和小狗的照片。首先，我们从左侧开始！左侧滑出面板显示小猫照片的信息你已经创建了你的中心面板，但是添加左视图控制器需要另外的一些步骤。展开你的左侧菜单，用户需要点击导航栏上Kitties按钮。所以就是在CenterViewController.swift里。你需要了解的是如何配置按钮，注意有两个IBAction的方法，每一个对应一个按钮。找到kittiesTapped(_:)然后添加下面的运行代码：delegate?.toggleLeftPanel?()就

10、像是之前所提到的，这个方法已经连接到了Kitties按钮。如果代理有一个值，那么它会用可选的链接来调用toggleLeftPanel()。你可以看到在CenterViewController.swift顶部定义了代理和协议。你还可以看到，有很多可选的方法toggleLeftPanel()和toggleRightPanel(). 如果你记得，当你设置中心视图控制器之前，你设置了它的Container视图控制器的代理。那么，现在是时候可以执行toggleLeftPanel()了。返回ContainerViewController.swift, 首先添加一个enum到文件的顶部，下面是你需要写入的代

11、码：enum SlideOutState case BothCollapsed case LeftPanelExpanded case RightPanelExpanded这就会记录你当前侧边面板的状态，所以你可以知道是否面板可见或者是隐藏，现在存在centerViewController的属性，然后添加下面的两个属性：var currentState: SlideOutState = .BothCollapsedvar leftViewController: SidePanelViewController?这些将hold住当前的状态，左侧面板视图控制器：当前状态初始化.bothCollaps

12、ed, 也就是说，当第一次程序加载的时候，左右两边侧栏都不要可见。左面板控制器的属性是可选的，因为你将在任何时间添加和删除视图控制器，所以它不可能总有一个值。现在为toggleLeftPanel添加一个实现代理的方法。let notAlreadyExpanded = (currentState != .LeftPanelExpanded) if notAlreadyExpanded addLeftPanelViewController() animateLeftPanel(shouldExpand: notAlreadyExpanded)首先，这个方法检测是否左边面板已经展开。如果它不是已经可

13、见的，那么添加面板和动画。如果面板已经是可见的了，那么将动画“关闭”位置。 什么叫“添加”左侧面板呢？找到addLeftPanelViewController90, 添加下面的代码：if (leftViewController = nil) leftViewController = UIStoryboard.leftViewController() leftViewController!.animals = Animal.allCats() addChildSidePanelController(leftViewController!)上面的代码首先检查是否leftViewController

14、的属性为0。如果是，那么代码将创建一个新的SidePanelViewController, 并给它分配一个动物列表的显示栏，在这种情况下，也就是小猫！ 接下来，添加addChildSidePanelController(_:)的方法，在addLeftPanelViewController()下面：func addChildSidePanelController(sidePanelController: SidePanelViewController) view.insertSubview(sidePanelController.view, atIndex: 0) addChildViewCon

15、troller(sidePanelController) sidePanelController.didMoveToParentViewController(self)这个方法将子视图插入到ContainViewController里。就像是你添加中心视图控制器一样。它只简单的插入它的视图（在这个项目中，它插入了index:0, 意思就是说它将低于中心视图控制器), 并添加它为子视图控制器。现在我们需要再次尝试运行这个项目了，对了，我们还有一件事要做，那就是添加一些动画！ 不会花费你很久的时间的。首先，添加一个常量在ContainerViewController.swift文件里，在其他属性的下面：let centerPanelExpandedOffset: CGFloat = 60这个值代表的是宽度，从这一点说，就是中心视图控制器会在左侧面板出现的时候被覆盖。CGPoint =60刚刚好可以做到！找到animateLeftPanel(shouldExpand)的方法，添加下面的代码： if (shouldExpand) currentState = .LeftPanelExpanded animateCenterPanelXPosi