美文网首页IOS
使用PageMenu实现顶部滑动菜单栏

使用PageMenu实现顶部滑动菜单栏

作者: 瑟闻风倾 | 来源:发表于2019-01-17 13:17 被阅读0次
    • 说明:IOS没用自带的顶部滑动菜单栏控件,需要导入第三方库,我所使用的是PageMenu
    • 备注:PageMenu学习
    • 界面展示


      菜单1.png
      菜单2.png
      菜单3.png

    1. 使用pod将PageMenu导入项目中

    (1)报错:


    O-C的选择器.png

    (2)解决:报错函数前加@objc后重新编译


    函数前加@objc.png

    1. 步骤

    (1)新建视图:在故事版中拖入2个ViewController视图


    新建视图.png

    (2)新建控制器:

    • 新建视图控制器MyPageMenuViewController.swift
    • 新建视图控制器NewsListController.swift

    (3)视图和控制器绑定


    视图1和MyPageMenuViewController控制器绑定.png
    视图2和NewsListController控制器绑定.png

    2. 具体实现

    (1)MyPageMenuViewController.swift

    //
    //  MyPageMenuViewController.swift
    //  JackUChat
    //
    //  Created by 徐云 on 2019/1/15.
    //  Copyright © 2019 Liy. All rights reserved.
    //
    
    import UIKit
    import PageMenu
    
    class MyPageMenuViewController: UIViewController {
    
        var pageMenu : CAPSPageMenu?
        let categoryArray = ["娱乐","体育","科技"]
        var controllerArray : [UIViewController] = []
        
        override func viewDidLoad() {
            super.viewDidLoad()
    
            // Do any additional setup after loading the view.
            
            //导航title设置为空则跳转后不会显示上一级导航的文字,仅显示返回按钮图标
            navigationItem.backBarButtonItem = UIBarButtonItem(title: "", style: .plain, target: self, action: nil)
            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: "NL_TVC_ID") as! NewsListController
                vc.title = category
                vc.parentNavi = self.navigationController
                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)
            //添加到当前控制器的视图上
            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为第二个视图的身份标识,即Storyboard ID的属性值

    设置视图身份标识.png
    (2)NewsListController.swift
    //
    //  NewsListController.swift
    //  JackUChat
    //
    //  Created by 徐云 on 2019/1/15.
    //  Copyright © 2019 Liy. All rights reserved.
    //
    
    import UIKit
    
    class NewsListController: UITableViewController {
        
        var parentNavi : UINavigationController?
        
        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为上一个页面传递的值
        }
    
        // 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
        }
        
        //重载单元格的点击事件,实现不同类型的单元格跳转到不同界面
        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)//无导航回不去
            parentNavi?.pushViewController(detailVC, animated: true)//有导航可回去
        }
    
        /*
        // 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.
        }
        */
    
    }
    
    

    相关文章

      网友评论

        本文标题:使用PageMenu实现顶部滑动菜单栏

        本文链接:https://www.haomeiwen.com/subject/zotudqtx.html