- 說明：IOS沒有自帶的頂部滑動(dòng)菜單欄控件器联，需要導(dǎo)入第三方庫氢妈，我所使用的是PageMenu
- 備注：PageMenu學(xué)習(xí)
- 界面展示
菜單分頁頁面1.png
菜單分頁頁面2.png
菜單分頁頁面3.png
注意：此案例的菜單分頁界面的內(nèi)容一樣，若菜單分頁界面的內(nèi)容不一樣违施，可參考PageMenu分頁控制器(進(jìn)階篇)-不同分頁頁面的實(shí)現(xiàn)
1. 使用pod將PageMenu導(dǎo)入項(xiàng)目中
(1)報(bào)錯(cuò)：
O-C的選擇器.png
(2)解決：報(bào)錯(cuò)函數(shù)前加@objc后重新編譯
函數(shù)前加@objc.png
2. 步驟
(1)新建視圖：在故事版中拖入3個(gè)視圖僵蛛，類型分別為：ViewController視圖尚蝌、TableViewController視圖和ViewController視圖
新建視圖.png
(2)新建控制器：
- 新建視圖控制器NewsPageMenuViewController.swift
- 新建視圖控制器NewsTableViewController.swift
-
新建視圖控制器NewsDetailViewController.swift
(3)視圖和控制器綁定
視圖1和NewsPageMenuViewController控制器綁定.png
視圖2和NewsListController控制器綁定.png
視圖3和NewsDetailViewController控制器綁定.png
3. 具體實(shí)現(xiàn)
(1)NewsPageMenuViewController.swift
//
// NewsPageMenuViewController.swift
// JackUChat
//
// Created by 徐云 on 2019/1/15.
// Copyright ? 2019 Liy. All rights reserved.
//
import UIKit
import PageMenu
class NewsPageMenuViewController: UIViewController {
var pageMenu : CAPSPageMenu?
let categoryArray = ["娛樂","體育","科技"]
var controllerArray : [UIViewController] = []
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
showMenu()
}
func showMenu() {
// let controller1 : UIViewController = UIViewController()
// controller1.view.backgroundColor = UIColor.purple
// controller1.title = "娛樂"
// controllerArray.append(controller1)
//
// let controller2 : UIViewController = UIViewController()
// controller2.view.backgroundColor = UIColor.orange
// controller2.title = "體育"
// controllerArray.append(controller2)
//
// let controller3 : UIViewController = UIViewController()
// controller3.view.backgroundColor = UIColor.gray
// controller3.title = "科技"
// controllerArray.append(controller3)
//菜單控制器
for category in categoryArray {
let vc = self.storyboard?.instantiateViewController(withIdentifier: "NEWS_TVC_ID") as! NewsTableViewController
vc.title = category
self.controllerArray.append(vc)
}
//菜單樣式
let parameters: [CAPSPageMenuOption] = [
.menuItemSeparatorWidth(4.3),
.scrollMenuBackgroundColor(UIColor.white),
.viewBackgroundColor(UIColor.orange),
.bottomMenuHairlineColor(UIColor.gray),
.selectionIndicatorColor(UIColor.jackColor),
.menuMargin(20.0),
.menuHeight(40.0),
.selectedMenuItemLabelColor(UIColor.jackColor),
.unselectedMenuItemLabelColor(UIColor.gray),
.menuItemFont(UIFont(name: "HelveticaNeue-Medium", size: 14.0)!),
.useMenuLikeSegmentedControl(true),
.menuItemSeparatorRoundEdges(true),
.selectionIndicatorHeight(2.0),
.menuItemSeparatorPercentageHeight(0.1)
]
//菜單位置
let frame = CGRect(x: 0, y: 100, width: self.view.frame.width, height: self.view.frame.height)
pageMenu = CAPSPageMenu(viewControllers: self.controllerArray, frame: frame, pageMenuOptions: parameters)
//添加到當(dāng)前控制器的視圖上
self.view.addSubview(self.pageMenu!.view)
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}
備注:NL_TVC_ID為第二個(gè)視圖的身份標(biāo)識，即Storyboard ID的屬性值
注意:當(dāng)菜單分頁界面不一樣時(shí),參考PageMenu分頁控制器(進(jìn)階篇)-不同分頁頁面的實(shí)現(xiàn)
//let controller1 : UIViewController = UIViewController()
let controller1 = self.storyboard?.instantiateViewController(withIdentifier: "INSTALMENT_VC_ID") as! InstalmentViewController
controller1.title = "分期機(jī)器"
controllerArray.append(controller1)
//let controller2 : UIViewController = UIViewController()
let controller2 = self.storyboard?.instantiateViewController(withIdentifier: "REPAYMENT_VC_ID") as! RepaymentViewController
controller2.title = "近期還款"
controllerArray.append(controller2)
設(shè)置視圖身份標(biāo)識.png
(2) NewsTableViewController.swift
//
// NewsTableViewController.swift
// JackUChat
//
// Created by 徐云 on 2019/1/15.
// Copyright ? 2019 Liy. All rights reserved.
//
import UIKit
class NewsTableViewController: UITableViewController {
var newsList = ["示例新聞"]
override func viewDidLoad() {
super.viewDidLoad()
// Uncomment the following line to preserve selection between presentations
// self.clearsSelectionOnViewWillAppear = false
// Uncomment the following line to display an Edit button in the navigation bar for this view controller.
// self.navigationItem.rightBarButtonItem = self.editButtonItem
newsList.append(title!)//title為上一個(gè)頁面?zhèn)鬟f的值
}
// MARK: - Table view data source
// override func numberOfSections(in tableView: UITableView) -> Int {
// // #warning Incomplete implementation, return the number of sections
// return 0
// }
override func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
// #warning Incomplete implementation, return the number of rows
return newsList.count
}
override func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
let cell = tableView.dequeueReusableCell(withIdentifier: "TextCell", for: indexPath) as! TextCell
// Configure the cell...
let news = newsList[indexPath.row]
cell.titleLabel.text = news
cell.commentLabel.text = "評論: 0"
return cell
}
//重載單元格的點(diǎn)擊事件,實(shí)現(xiàn)不同類型的單元格跳轉(zhuǎn)到不同界面
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let detailVC = storyboard?.instantiateViewController(withIdentifier: "ND_VC_ID") as! NewsDetailViewController
detailVC.title = title! + "新聞詳情"
present(detailVC, animated: true, completion: nil)//模態(tài)展示：從下向上彈出
}
/*
// Override to support conditional editing of the table view.
override func tableView(_ tableView: UITableView, canEditRowAt indexPath: IndexPath) -> Bool {
// Return false if you do not want the specified item to be editable.
return true
}
*/
/*
// Override to support editing the table view.
override func tableView(_ tableView: UITableView, commit editingStyle: UITableViewCellEditingStyle, forRowAt indexPath: IndexPath) {
if editingStyle == .delete {
// Delete the row from the data source
tableView.deleteRows(at: [indexPath], with: .fade)
} else if editingStyle == .insert {
// Create a new instance of the appropriate class, insert it into the array, and add a new row to the table view
}
}
*/
/*
// Override to support rearranging the table view.
override func tableView(_ tableView: UITableView, moveRowAt fromIndexPath: IndexPath, to: IndexPath) {
}
*/
/*
// Override to support conditional rearranging of the table view.
override func tableView(_ tableView: UITableView, canMoveRowAt indexPath: IndexPath) -> Bool {
// Return false if you do not want the item to be re-orderable.
return true
}
*/
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}
(3)NewsDetailViewController.swift
//
// NewsDetailViewController.swift
// JackUChat
//
// Created by 徐云 on 2019/1/15.
// Copyright ? 2019 Liy. All rights reserved.
//
import UIKit
class NewsDetailViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
}
/*
// MARK: - Navigation
// In a storyboard-based application, you will often want to do a little preparation before navigation
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
// Get the new view controller using segue.destination.
// Pass the selected object to the new view controller.
}
*/
}
4. 問題及解決
4.1 現(xiàn)象描述：
當(dāng)點(diǎn)擊具體新聞(單元格)跳轉(zhuǎn)至新聞詳情頁(任意新頁面)時(shí)充尉，頂部導(dǎo)航欄消失導(dǎo)致界面無法回退飘言。
新聞詳情頁導(dǎo)航欄消失.png
-
分析：界面間由代碼建立關(guān)系時(shí)可能會(huì)導(dǎo)致頂部導(dǎo)航欄消失
界面間由代碼建立關(guān)系時(shí)頂部導(dǎo)航欄消失.png - 解決思路：實(shí)現(xiàn)導(dǎo)航爛從頭到尾的貫通
4.2 具體解決
(1) NewsPageMenuViewController.swift
說明：將本頁面的導(dǎo)航控制器的引用傳遞給下一級控制器
//菜單控制器
for category in categoryArray {
let vc = self.storyboard?.instantiateViewController(withIdentifier: "NEWS_TVC_ID") as! NewsTableViewController
vc.title = category
vc.parentNavi = self.navigationController//將本頁面的導(dǎo)航控制器的引用傳遞給下一級
self.controllerArray.append(vc)
}
(2)NewsTableViewController.swift
說明：獲取父級傳遞的導(dǎo)航控制器的引用
var parentNavi : UINavigationController?//保持一個(gè)導(dǎo)航的引用：導(dǎo)航控制器由父級傳遞而來，可能有也可能沒有
//重載單元格的點(diǎn)擊事件,實(shí)現(xiàn)不同類型的單元格跳轉(zhuǎn)到不同界面
override func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
let detailVC = storyboard?.instantiateViewController(withIdentifier: "ND_VC_ID") as! NewsDetailViewController
detailVC.title = title! + "新聞詳情"
//present(detailVC, animated: true, completion: nil)//模態(tài)展示：從下向上彈出驼侠；無導(dǎo)航回不去
parentNavi?.pushViewController(detailVC, animated: true)//有導(dǎo)航可回去
}
(3)導(dǎo)航正常顯示
導(dǎo)航正常顯示.png
(4)導(dǎo)航樣式重新配置
NewsPageMenuViewController.swift
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
//導(dǎo)航title設(shè)置為空則跳轉(zhuǎn)后不會(huì)顯示上一級導(dǎo)航的文字,僅顯示返回按鈕圖標(biāo)
navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: self, action: nil)
showMenu()
}
導(dǎo)航一般僅顯示返回按鈕.png
- 總結(jié)：在IOS中姿鸿，大部分情況下只需一個(gè)導(dǎo)航條。無論下面有多少個(gè)頁面泪电，只需要獲取最開始的導(dǎo)航條的引用般妙，并在每一級界面將導(dǎo)航條的引用傳遞給其它的控制器就可以實(shí)現(xiàn)導(dǎo)航欄從頭到尾的貫通纪铺。
