今天要分享第三方套件的簡單運用,首先使用套件做個簡單教學。先至
https://cocoapods.org/ 安裝cocoapods,懶惰的話可以直接下載他們的APP官方有附上抄作教學唷!很方便。
套件連結
SlideMenuControllerSwift ,小弟很早以前就找到這個套件了,只是一直沒有去使用。剛好有空閒時間玩了一下。順便跟大家分享^^
首先storyboard要建立5個ViewController,並在左邊欄中加入一個UITableVew
storyboard的前置作業大致上就這樣(記得UITableView要設定delegate跟dataSource),還有一點要注意的是每個ViewController要記得給予Identity(storyboard ID)
接下來進入到code方面了,首先第一個要做的地方是appdelegate
在application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?)加入以下程式碼(有些函數是擴充去寫的文中會提到)
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let mainViewController: MainViewController = storyboard.instantiateViewController(withIdentifier: "main") as! MainViewController
let leftViewController: LeftViewController = storyboard.instantiateViewController(withIdentifier: "left") as! LeftViewController
let rightViewController: RightViewController = storyboard.instantiateViewController(withIdentifier: "right") as! RightViewController
let navigationController: UINavigationController = UINavigationController(rootViewController: mainViewController)
leftViewController.mainViewController = navigationController
UINavigationBar.appearance().tintColor = UIColor(hex: "689F38")
let slideMenuController = ExSlideMenuController(mainViewController: navigationController, leftMenuViewController: leftViewController, rightMenuViewController: rightViewController)
slideMenuController.automaticallyAdjustsScrollViewInsets = true
slideMenuController.delegate = mainViewController
slideMenuController.closeLeft()
slideMenuController.closeRight()
self.window?.backgroundColor = UIColor(red: 236.0, green: 238.0, blue: 241.0, alpha: 1.0)
self.window?.rootViewController = slideMenuController
self.window?.makeKeyAndVisible()
而
ExSlideMenuController跟UIColor(hex: String)是另外寫擴充的方法,程式碼如下
ExSlideMenuController(請例外建立一個class)
import UIKit
import SlideMenuControllerSwift
class ExSlideMenuController : SlideMenuController {
override func isTagetViewController() -> Bool {
if let vc = UIApplication.topViewController() {
if vc is MainViewController ||
vc is Test1ViewController ||
vc is Test2ViewController {
return true
}
}
return false
}
override func track(_ trackAction: TrackAction) {
switch trackAction {
case .leftTapOpen:
print("TrackAction: left tap open.")
case .leftTapClose:
print("TrackAction: left tap close.")
case .leftFlickOpen:
print("TrackAction: left flick open.")
case .leftFlickClose:
print("TrackAction: left flick close.")
case .rightTapOpen:
print("TrackAction: right tap open.")
case .rightTapClose:
print("TrackAction: right tap close.")
case .rightFlickOpen:
print("TrackAction: right flick open.")
case .rightFlickClose:
print("TrackAction: right flick close.")
}
}
}
UIColor(hex: String)(請另外建立class或直接在想寫的地方寫擴充)
extension UIColor {
convenience init(hex: String) {
self.init(hex: hex, alpha:1)
}
convenience init(hex: String, alpha: CGFloat) {
var hexWithoutSymbol = hex
if hexWithoutSymbol.hasPrefix("#") {
hexWithoutSymbol = hex.substring(1)
}
let scanner = Scanner(string: hexWithoutSymbol)
var hexInt:UInt32 = 0x0
scanner.scanHexInt32(&hexInt)
var r:UInt32!, g:UInt32!, b:UInt32!
switch (hexWithoutSymbol.length) {
case 3: // #RGB
r = ((hexInt >> 4) & 0xf0 | (hexInt >> 8) & 0x0f)
g = ((hexInt >> 0) & 0xf0 | (hexInt >> 4) & 0x0f)
b = ((hexInt << 4) & 0xf0 | hexInt & 0x0f)
break;
case 6: // #RRGGBB
r = (hexInt >> 16) & 0xff
g = (hexInt >> 8) & 0xff
b = hexInt & 0xff
break;
default:
// TODO:ERROR
break;
}
self.init(
red: (CGFloat(r)/255),
green: (CGFloat(g)/255),
blue: (CGFloat(b)/255),
alpha:alpha)
}
}
appdelegate方面大致上就完成了,接下來就是個頁面,雖然是簡易套用介面簡單,但是程式碼也不算少了,接下來一個頁面一個頁面附上code給大家參考
首先是主頁面mainViewController(記得import SlideMenuControllerSwift)
import UIKit
import SlideMenuControllerSwift
class MainViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewWillAppear(_ animated: Bool) {
super.viewWillAppear(animated)
self.setNavigationBarItem()
}
}
extension MainViewController:SlideMenuControllerDelegate{
func leftWillOpen() {
print("SlideMenuControllerDelegate: leftWillOpen")
}
func leftDidOpen() {
print("SlideMenuControllerDelegate: leftDidOpen")
}
func leftWillClose() {
print("SlideMenuControllerDelegate: leftWillClose")
}
func leftDidClose() {
print("SlideMenuControllerDelegate: leftDidClose")
}
func rightWillOpen() {
print("SlideMenuControllerDelegate: rightWillOpen")
}
func rightDidOpen() {
print("SlideMenuControllerDelegate: rightDidOpen")
}
func rightWillClose() {
print("SlideMenuControllerDelegate: rightWillClose")
}
func rightDidClose() {
print("SlideMenuControllerDelegate: rightDidClose")
}
}
//MARK: UIViewController擴充(用來建立navigationBarItem&移除)
extension UIViewController {
func setNavigationBarItem() {
self.addLeftBarButtonWithImage(UIImage(named: "ic_menu_black_24dp")!)
self.addRightBarButtonWithImage(UIImage(named: "ic_notifications_black_24dp")!)
self.slideMenuController()?.removeLeftGestures()
self.slideMenuController()?.removeRightGestures()
self.slideMenuController()?.addLeftGestures()
self.slideMenuController()?.addRightGestures()
}
func removeNavigationBarItem() {
self.navigationItem.leftBarButtonItem = nil
self.navigationItem.rightBarButtonItem = nil
self.slideMenuController()?.removeLeftGestures()
self.slideMenuController()?.removeRightGestures()
}
}
再來是左邊欄leftViewController
import UIKit
enum LeftMenu: Int {
case main
case test1
case test2
}
protocol LeftMenuProtocol : class {
func changeViewController(_ menu: LeftMenu)
}
class LeftViewController: UIViewController ,UITableViewDelegate,UITableViewDataSource{
@IBOutlet weak var leftTableView: UITableView!
var menus = ["首頁", "test1", "test2"]
var mainViewController: UIViewController!
var test1ViewController: UIViewController!
var test2ViewController: UIViewController!
override func viewDidLoad() {
super.viewDidLoad()
let storyboard = UIStoryboard(name: "Main", bundle: nil)
let mainViewController = storyboard.instantiateViewController(withIdentifier: "main") as! MainViewController
self.mainViewController = UINavigationController(rootViewController: mainViewController)
let test1ViewController = storyboard.instantiateViewController(withIdentifier: "test1") as! Test1ViewController
self.test1ViewController = UINavigationController(rootViewController: test1ViewController)
let test2ViewController = storyboard.instantiateViewController(withIdentifier: "test2") as! Test2ViewController
self.test2ViewController = UINavigationController(rootViewController: test2ViewController)
leftTableView.backgroundColor = UIColor(hex: "66ff66", alpha: 0.2)
//隱藏多餘的cell分隔線
leftTableView.tableFooterView = UIView()
}
override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}
override func viewDidLayoutSubviews() {
super.viewDidLayoutSubviews()
// self.view.layoutIfNeeded()
}
func changeViewController(_ menu: LeftMenu) {
switch menu {
case .main:
self.slideMenuController()?.changeMainViewController(self.mainViewController, close: true)
case .test1:
self.slideMenuController()?.changeMainViewController(self.test1ViewController, close: true)
case .test2:
self.slideMenuController()?.changeMainViewController(self.test2ViewController, close: true)
}
}
// MARK: - DataSource
// ---------------------------------------------------------------------
// 設定表格section的列數
func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
return menus.count
}
// 表格的儲存格設定
func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
var cell = tableView.dequeueReusableCell(withIdentifier: "Cell")
if cell == nil {
cell = UITableViewCell(style: .subtitle, reuseIdentifier: "Cell")
}
cell?.backgroundColor = UIColor.lightGray
// cell?.imageView?.image = UIImage(named: "star")
cell?.textLabel?.text = self.menus[indexPath.row]
cell?.backgroundColor = UIColor.clear
return cell!
}
// MARK: - Delegate
// ---------------------------------------------------------------------
// 設定cell的高度
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
return self.view.frame.size.height / 10
}
// 點選儲存格事件
func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
if let menu = LeftMenu(rawValue: indexPath.row) {
self.changeViewController(menu)
}
}
}
public extension UITableView {
func registerCellClass(_ cellClass: AnyClass) {
let identifier = String.className(cellClass)
self.register(cellClass, forCellReuseIdentifier: identifier)
}
func registerCellNib(_ cellClass: AnyClass) {
let identifier = String.className(cellClass)
let nib = UINib(nibName: identifier, bundle: nil)
self.register(nib, forCellReuseIdentifier: identifier)
}
func registerHeaderFooterViewClass(_ viewClass: AnyClass) {
let identifier = String.className(viewClass)
self.register(viewClass, forHeaderFooterViewReuseIdentifier: identifier)
}
func registerHeaderFooterViewNib(_ viewClass: AnyClass) {
let identifier = String.className(viewClass)
let nib = UINib(nibName: identifier, bundle: nil)
self.register(nib, forHeaderFooterViewReuseIdentifier: identifier)
}
}
然後右邊欄rightViewController(我沒刻意寫什麼功能,如沒使用到就不要加入按鈕跟頁面即可),右邊藍什麼都不用寫...因為我沒做任何事@@
兩個子頁面是一樣的沒做任何特殊動作(Test1ViewController,Test2ViewController)
只要在ViewWillAppear加入
self.setNavigationBarItem()即可
以上希望能夠幫助到大家能夠快點上手使用SlideMenuControllerSwift的套件唷^^
在此也感謝套件作者及其他有分享教學的朋友們!
成果如下列圖片顯示: