怎样用swift制作一个滑出的导航控制面板Word下载.docx
- 文档编号:15784807
- 上传时间:2022-11-16
- 格式:DOCX
- 页数:15
- 大小:862.86KB
怎样用swift制作一个滑出的导航控制面板Word下载.docx
《怎样用swift制作一个滑出的导航控制面板Word下载.docx》由会员分享,可在线阅读,更多相关《怎样用swift制作一个滑出的导航控制面板Word下载.docx(15页珍藏版)》请在冰豆网上搜索。
它包含了左视图,中心视图和右视图控制器,然后用动画和滑动来操控。
在这个项目里,它在application(_:
did-FinishLaunchingWithOptions:
)创建并添加了一个窗口在AppDelegate.swift
2.CenterViewController:
中心面板,这个可以被你自己的视图控制器代替(确保你copy了所有的按钮actions).
3.SidePanelViewController:
使用左面板和右边面板,这样可以用你自己的视图控制器来代替。
所有的视图控制器都在Main.storyboard里定义过,所以你可以快速的看一遍storyboard,然后知道这个app大概是什么样子的。
现在,你已经对这个项目的结构非常熟悉了吧,我们准备开始咯!
找到你的中心视图管理器
在这个部分,你需要找到CenterViewController,在ContainerViewController里面,就像是一个子控制器。
打开ContainerViewController.swift,你会看到在底部文件里有一个小的UIStoryboard的扩展。
它添加了一些类方法,使它更简洁的在storyboard里加载特定的视图控制器,别着急,你马上就会用到这些方法了。
添加一组属性到ContainerViewController,给CenterViewController和UINavigationController,在viewDidLoad():
上面。
varcenterNavigationController:
UINavigationController!
varcenterViewController:
CenterViewController!
接下来,添加下面的代码到viewDidLoad(),
centerViewController=UIStoryboard.centerViewController()
centerViewController.delegate=self
//wrapthecenterViewControllerinanavigationcontroller,sowecanpushviewstoit
//anddisplaybarbuttonitemsinthenavigationbar
centerNavigationController=UINavigationController(rootViewController:
centerViewController)
view.addSubview(centerNavigationController.view)
addChildViewController(centerNavigationController)
centerNavigationController.didMoveToParentViewController(self)
上面的代码创建了一个新的CenterViewController,然后分配他去你刚刚创建的centerViewController。
另外,还创建了一个UINavigationController,用来包含中心视图控制器。
接下来,添加导航控制器到ContainerViewController,然后用addSubview(_:
),addChildViewController(_:
)和didMoveToParentViewController(_:
)的方法来设置父类子类的关系。
这些代码还设置了当前的视图控制器作为中心视图控制器的代理。
中心视图控制器会用代理告知它的container,何时展示或隐藏左边和右边栏面板。
你需要修改界面的类,让它可以遵守CenterViewControllerDelegate的协议。
以下的代码有很多都是空的方法,你以后需要填充代码的。
//MARK:
CenterViewControllerdelegate
extensionContainerViewController:
CenterViewControllerDelegate{
functoggleLeftPanel(){
}
functoggleRightPanel(){
funcaddLeftPanelViewController(){
funcaddRightPanelViewController(){
funcanimateLeftPanel(#shouldExpand:
Bool){
funcanimateRightPanel(#shouldExpand:
}
现在是时候来检查你的项目了,运行你的项目。
如果所有代码都OK,你会看到下面的屏幕。
是的,这些在顶部的按钮最后会显示你的小猫和小狗的照片。
首先,我们从左侧开始!
左侧滑出面板显示小猫照片的信息
你已经创建了你的中心面板,但是添加左视图控制器需要另外的一些步骤。
展开你的左侧菜单,用户需要点击导航栏上Kitties按钮。
所以就是在CenterViewController.swift里。
你需要了解的是如何配置按钮,注意有两个IBAction的方法,每一个对应一个按钮。
找到kittiesTapped(_:
)然后添加下面的运行代码:
delegate?
.toggleLeftPanel?
()
就像是之前所提到的,这个方法已经连接到了Kitties按钮。
如果代理有一个值,那么它会用可选的链接来调用toggleLeftPanel()。
你可以看到在CenterViewController.swift顶部定义了代理和协议。
你还可以看到,有很多可选的方法toggleLeftPanel()和toggleRightPanel().如果你记得,当你设置中心视图控制器之前,你设置了它的Container视图控制器的代理。
那么,现在是时候可以执行toggleLeftPanel()了。
返回ContainerViewController.swift,首先添加一个enum到文件的顶部,下面是你需要写入的代码:
enumSlideOutState{
caseBothCollapsed
caseLeftPanelExpanded
caseRightPanelExpanded
这就会记录你当前侧边面板的状态,所以你可以知道是否面板可见或者是隐藏,现在存在centerViewController的属性,然后添加下面的两个属性:
varcurrentState:
SlideOutState=.BothCollapsed
varleftViewController:
SidePanelViewController?
这些将hold住当前的状态,左侧面板视图控制器:
当前状态初始化.bothCollapsed,也就是说,当第一次程序加载的时候,左右两边侧栏都不要可见。
左面板控制器的属性是可选的,因为你将在任何时间添加和删除视图控制器,所以它不可能总有一个值。
现在为toggleLeftPanel添加一个实现代理的方法。
letnotAlreadyExpanded=(currentState!
=.LeftPanelExpanded)
ifnotAlreadyExpanded{
addLeftPanelViewController()
animateLeftPanel(shouldExpand:
notAlreadyExpanded)
首先,这个方法检测是否左边面板已经展开。
如果它不是已经可见的,那么添加面板和动画。
如果面板已经是可见的了,那么将动画“关闭”位置。
什么叫“添加”左侧面板呢?
?
找到addLeftPanelViewController90,添加下面的代码:
if(leftViewController==nil){
leftViewController=UIStoryboard.leftViewController()
leftViewController!
.animals=Animal.allCats()
addChildSidePanelController(leftViewController!
)
上面的代码首先检查是否leftViewController的属性为0。
如果是,那么代码将创建一个新的SidePanelViewController,并给它分配一个动物列表的显示栏,在这种情况下,也就是小猫!
接下来,添加addChildSidePanelController(_:
)的方法,在addLeftPanelViewController()下面:
funcaddChildSidePanelController(sidePanelController:
SidePanelViewController){
view.insertSubview(sidePanelController.view,atIndex:
0)
addChildViewController(sidePanelController)
sidePanelController.didMoveToParentViewController(self)
这个方法将子视图插入到ContainViewController里。
就像是你添加中心视图控制器一样。
它只简单的插入它的视图(在这个项目中,它插入了index:
0,意思就是说它将低于中心视图控制器),并添加它为子视图控制器。
现在我们需要再次尝试运行这个项目了,对了,我们还有一件事要做,那就是添加一些动画!
不会花费你很久的时间的。
首先,添加一个常量在ContainerViewController.swift文件里,在其他属性的下面:
letcenterPanelExpandedOffset:
CGFloat=60
这个值代表的是宽度,从这一点说,就是中心视图控制器会在左侧面板出现的时候被覆盖。
CGPoint=60刚刚好可以做到!
找到animateLeftPanel(shouldExpand)的方法,添加下面的代码:
if(shouldExpand){
currentState=.LeftPanelExpanded
animateCenterPanelXPosi
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 怎样用 swift 制作 一个 导航 控制 面板