摘要:在最近的一个项目中需要制作一个抽屉式的侧栏,便简单上网找了找,目前了解到的可以通过和这两个第三方的做出抽屉式侧栏的效果。创建侧栏新建一个文件,同样是选择,命名为。使用之前已经通过导入了,现在就开始使用。
在最近的一个项目中需要制作一个抽屉式的侧栏,便简单上网找了找,目前了解到的可以通过MMDrawerController和SWRevealViewController这两个第三方的frameworks做出抽屉式侧栏的效果。这两个frameworks都可以在Github上搜到,有兴趣的同学都可以看看。我在项目中用的是MMDrawerController,至于为什么,原因很简单,因为MMDrawerController的star比较多。。。所以这篇文章也是记录一下我使用MMDrawerController的过程和问题。
新建项目新建一个名叫MMDrawerControllerDemo的项目,language选择Swift,storyboard示意图如下,具体过程就不写了,中间是一个Button,将起始页面的title改为Home,也就是主页。
新建一个文件,选择cocoa touch class,命名为SecondViewController
在storyboard中选择右边的ViewController,在identity inspector中将其class设置为SecondViewController,同时设置一个storyboard ID
导入MMDrawerController因为方便在项目中使用,我是使用了cocoapods,至于如何使用cocoapods,不会的同学就自行百度一下吧,这种小问题还不需要Google出马。
创建侧栏新建一个文件,同样是选择cocoa touch class,命名为LeftDrawerViewController。
其实可以同时在主页的左右两边各添加一个侧栏,但是我这里仅仅是在左侧添加。
接下来,在viewDidLoad()方法之前加上:
var tableView: UITableView!
在viewDidLoad()方法的最后加上:
tableView = UITableView(frame: CGRectZero, style: .Plain) tableView.frame = CGRect(x: 0, y: 0, width: self.view.bounds.size.width, height: self.view.bounds.size.height) tableView.delegate = self tableView.dataSource = self view.addSubview(tableView) tableView.registerNib(UINib(nibName: "LeftDrawerTableViewCell", bundle: nil), forCellReuseIdentifier: "LeftDrawerTableViewCell")
在class的外部加上以下代码:
// MARK: - table view delegate, table view datasource extension LeftDrawerViewController: UITableViewDataSource, UITableViewDelegate { func numberOfSectionsInTableView(tableView: UITableView) -> Int { return 1 } func tableView(tableView: UITableView, cellForRowAtIndexPath indexPath: NSIndexPath) -> UITableViewCell { let cell = tableView.dequeueReusableCellWithIdentifier("LeftDrawerTableViewCell", forIndexPath: indexPath) as! LeftDrawerTableViewCell return cell } func tableView(tableView: UITableView, numberOfRowsInSection section: Int) -> Int { return 3 } }
其中的LeftDrawerTableViewCell是我新建的一个继承自UITableViewCell的Swift文件,关于UITableView具体的这里就不讲了,不是重点,如果不会的就自行百度或者Google吧。
使用MMDrawerController之前已经通过cocoapods导入了MMDrawerController,现在就开始使用MMDrawerController。
打开AppDelegate.swift
在didFinishLaunchingWithOptions方法的上方添加以下代码:
var centerContainer: MMDrawerController!
这时候Xcode会报一个警告,"Use of undeclared type MMDrawerController"
因为是从cocoapods导入的,所以需要在class上方添加
import MMDrawerController
但是这时候Xcode又会报一个警告,"No such module MMDrawerController"
对于这个问题的解决办法,我是新建了一个名为MMDrawerControllerDemo-Bridge-Header.h的header文件,添加以下代码即可:
#import
然后在Build Settings中找到Objective-C Bridging Header这一项,写上MMDrawerControllerDemo-Bridge-Header.h这个文件在本项目中的路径,这样一来,项目就可以正常运行了,但是为什么需要这个文件,我目前还不是很清楚。
继续回到AppDelegate.swift这个文件
在didFinishLaunchingWithOptions方法中添加以下代码:
let mainStoryboard = UIStoryboard(name: "Main", bundle: nil) let centerViewController = mainStoryboard.instantiateViewControllerWithIdentifier("HomePageViewController") as! ViewController let leftDrawerViewController = LeftDrawerViewController() let centerNav = UINavigationController(rootViewController: centerViewController) centerContainer = MMDrawerController(centerViewController: centerNav, leftDrawerViewController: leftDrawerViewController) centerContainer.openDrawerGestureModeMask = .PanningCenterView centerContainer.closeDrawerGestureModeMask = .PanningCenterView window?.rootViewController = centerContainer window?.makeKeyAndVisible()
现在可以将项目运行起来看下效果了。
添加子页面返回到storyboard,在项目的一开始,我创建了一个名叫SecondViewController的ViewController。
选择“下一页”按钮,control+drag到SecondViewController,选择push
这时候再次运行程序,进入到第二个页面之后,会发现在第二个页面同样能够显示出侧栏,但是一般来说,应该只有主页能够显示出侧栏。
现在我讲一下我选择的方法来解决这个问题。
回到AppDelegate.swift
将以下两行代码注释,如果你想删了也随意:
centerContainer.openDrawerGestureModeMask = .PanningCenterView centerContainer.closeDrawerGestureModeMask = .PanningCenterView
打开ViewController.swift
在viewDidLoad()之后加入以下代码:
override func viewDidAppear(animated: Bool) { super.viewDidAppear(animated) let appDelegte = UIApplication.sharedApplication().delegate as! AppDelegate appDelegte.centerContainer.openDrawerGestureModeMask = .PanningCenterView appDelegte.centerContainer.closeDrawerGestureModeMask = .PanningCenterView } override func viewDidDisappear(animated: Bool) { super.viewDidDisappear(animated) let appDelegte = UIApplication.sharedApplication().delegate as! AppDelegate appDelegte.centerContainer.openDrawerGestureModeMask = .None appDelegte.centerContainer.closeDrawerGestureModeMask = .None }
现在看下运行效果就正常了。
添加BarButtonItems继续在ViewController.swift,添加以下代码:
override func viewDidLoad() { super.viewDidLoad() navigationItem.leftBarButtonItem = UIBarButtonItem(image: UIImage(named: "menu.png"), style: .Plain, target: self, action: "sideMenuTapped:") } func sideMenuTapped(sender: UIBarButtonItem) { let appDelegate = UIApplication.sharedApplication().delegate as! AppDelegate appDelegate.centerContainer.toggleDrawerSide(MMDrawerSide.Left, animated: true, completion: nil) }
到此这个demo就完成了,demo地址Github
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/16135.html
摘要:主要对当前排名前的项目做一个简单的简介方便初学者快速了解到当前在的情况地址若有任何疑问可通过微博李锦发联系我项目名称项目信息作者是的博主开发界的大神级人物毕业于卡内基梅隆大学开源了许多牛逼的项目这个便是其中之一采用主要方便与服务端进 主要对当前 GitHub 排名前 100 的项目做一个简单的简介, 方便初学者快速了解到当前 Objective-C 在 GitHub 的情况. Git...
摘要:前言第三方库是现在的程序员离不开的东西不光是开发基本上所有的商业项目都会或多或少的使用到第三方库上的开源库数量如下可以看到以绝对的优势排名第一一定程度上也说明了在这几年为什么发展得这么迅速不会点都不好意思说自己是码农不过现在圈的造轮子浪潮也 前言 第三方库是现在的程序员离不开的东西 不光是APP开发 基本上所有的商业项目 都会或多或少的使用到第三方库 Github上Star>100的开...
摘要:导航组件使用详解注意了,如果有小伙伴们发现运行作者提供的示例项目报如下的错误,可能是大家使用了命令导致的,解决这个错误的办法就是将删除,然后重新使用命令来安装,最后使用来起服务,应该就不报错了。 react-navigation导航组件使用详解 注意了,如果有小伙伴们发现运行作者提供的react-navigation示例项目报如下的错误,可能是大家使用了 yarn install 命...
摘要:细节今日力推风格款资讯类学习仿照豆瓣音乐效果掘金一风格款资讯类学习模块简介百思不得姐数据来源于百思不得其姐抓取,其中包含视频播放,段子,图片。 Android 实践:做一款新闻 APP - Android - 掘金跟代码相关的工作,大多唯手熟尔,所以这里花了点时间做了款简易版的新闻 APP,虽然都是些基础的内容,不过还是可以加深自己对部分代码的理解。至少,可以加深自己的记忆 ... 高...
阅读 3198·2021-10-14 09:42
阅读 1793·2021-09-07 09:59
阅读 2413·2019-08-29 16:33
阅读 3461·2019-08-29 16:18
阅读 2735·2019-08-29 15:30
阅读 1538·2019-08-29 13:52
阅读 1897·2019-08-26 18:36
阅读 387·2019-08-26 12:19