Swift实现MacOS菜单栏应用的开发

通向荣誉的路上，并不铺满鲜花。

前言

用Java爬到我房间电表电量使用状况后，封装了一个接口，用于客户端的调用😝 在平常生活中，我用Mac的时间是最多的，若是将爬到的数据，展现在Mac的顶栏上，是一件很美好的事情😌 做为一个对Swift一无所知的我，花了两天时间，用Swift语言开发了一个Mac应用，接下来就跟你们分享下这个应用的开发过程，欢迎各为感兴趣的开发者阅读本文。

先跟你们看下最终实现的效果:

环境搭建

Swift: 4.2.1

Xcode: 10.1

MacOS: 10.14.2

库管理工具: Carthage

Alamofire: 4.0 (网络请求库)

SwiftyJSON: 3.0 (Json解析库)

建立项目

• 打开Xcode，咱们看到的界面如图所示
  • 左边为建立项目部分，右边为最近打开的项目
  • 点击图中用红款勾选的地方

    

• 如图所示，按图中标明的序号，分别进行点击。

  

• 如图所示，分别填写项目相关信息

  

• 选择项目建立位置

  

• 出现如图所示的页面后，项目建立成功

  

配置项目为一个菜单栏应用

此时项目为一个空白项目，点运行后会出现一个空的window窗口，同时dock上出现应用图标，这并非咱们要的，因此要添加配置来移除他们。

• 如图所示，在info下添加添加一个配置项

  

• Key选择Application is agent (UI Element),Value选择Yes

  

• 此时再次运行程序，咱们发现dock栏已经不显示程序图标，可是window窗口依然在
• 根据图中所示，删除Window Controller Scene和View Controller Scene

  

• 此时，咱们在云心应用程序，发现窗口也没了。

在菜单栏建立图标

• 如图所示,点击Assets.xcassets文件，新建一个Image Set

  

• 如图所示，将其命名为StatusIcon，将本身中意的图片制做成3种规格，托入对应的位置。

  

• 拖入图标后，执行图片中的步骤，让图标适配系统的黑暗模式

  

• 打开AppDelegate.swift文件，添加以下代码

  

// 建立状态栏按钮
    let statusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.squareLength)
复制代码

// applicationDidFinishLaunching生命周期
    if let button = statusItem.button {
         button.image = NSImage(named: "StatusIcon")
    }
复制代码

• 运行程序，咱们发现菜单栏有了咱们刚才设置的图标，此时点击后什么都不会发生。

添加Popover容器

• 在项目目录下，新建一个Cocoa Class，命名为PopoverViewController,此文件为点击时打开的弹层页面

  

  

  

  

• 添加View Controller容器

  

• 如图所示，对上一步添加的容器进行修改

  

• 打开PopoverViewController.swift文件，在末尾添加以下代码

extension PopoverViewController {
    static func freshController() -> PopoverViewController {
        //获取对Main.storyboard的引用
        let storyboard = NSStoryboard(name: NSStoryboard.Name("Main"), bundle: nil)
        // 为PopoverViewController建立一个标识符
        let identifier = NSStoryboard.SceneIdentifier("PopoverViewController")
        // 实例化PopoverViewController并返回
        guard let viewcontroller = storyboard.instantiateController(withIdentifier: identifier) as? PopoverViewController else {
            fatalError("Something Wrong with Main.storyboard")
        }
        return viewcontroller
    }
}

复制代码

• 打开AppDelegate.swift文件在class内添加以下代码

// 声明一个Popover
let popover = NSPopover()
复制代码

建立显示/隐藏Popover的函数

• 在AppDelegate.swift文件的class内添加以下代码

// 控制Popover状态
    @objc func togglePopover(_ sender: AnyObject) {
        if popover.isShown {
            closePopover(sender)
        } else {
            showPopover(sender)
        }
    }
    // 显示Popover
    @objc func showPopover(_ sender: AnyObject) {
        if let button = statusItem.button {
            popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY)
        }
        
    }
    // 隐藏Popover
    @objc func closePopover(_ sender: AnyObject) {
        popover.performClose(sender)
    }
复制代码

• 在AppDelegate.swift文件的applicationDidFinishLaunching函数中添加以下代码

if let button = statusItem.button {
            button.image = NSImage(named: "StatusIcon")
            button.action = #selector(togglePopover(_:))
    }
    popover.contentViewController =            PopoverViewController.freshController()
复制代码

• 此时，运行项目，点击菜单栏的应用图标，会显示弹层，再次点击弹层会消失

  

优化Popover

执行完上个步骤后，咱们会发现弹层只会在点击时关闭或者消失，接下来咱们来优化下，失去焦点时，也让它隐藏

• 新建一个EventMonitor.swift文件，用于事件监听,此文件代码以下

import Cocoa

public class EventMonitor {
    private var monitor: Any?
    private let mask: NSEvent.EventTypeMask
    private let handler: (NSEvent?) -> Void
    
    public init(mask: NSEvent.EventTypeMask, handler: @escaping (NSEvent?) -> Void) {
        self.mask = mask
        self.handler = handler
    }
    
    deinit {
        stop()
    }
    
    public func start() { //开启监视器
        monitor = NSEvent.addGlobalMonitorForEvents(matching: mask, handler: handler)
    }
    
    public func stop() { //关闭监视器
        if monitor != nil {
            NSEvent.removeMonitor(monitor!)
            monitor = nil
        }
    }
}

复制代码

• 打开AppDelegate.swift在class中声明这个监视器

// 声明监视器
var eventMonitor: EventMonitor?
复制代码

• 在applicationDidFinishLaunching函数中添加

eventMonitor = EventMonitor(mask: [.leftMouseDown, .rightMouseDown]) { [weak self] event in
  if let strongSelf = self, strongSelf.popover.isShown {
    strongSelf.closePopover(event!)
  }
}
复制代码

• 修改showPopover和closePopover函数

// 显示Popover
    @objc func showPopover(_ sender: AnyObject) {
        if let button = statusItem.button {
            popover.show(relativeTo: button.bounds, of: button, preferredEdge: NSRectEdge.minY)
        }
        eventMonitor?.start()
        
    }
    // 隐藏Popover
    @objc func closePopover(_ sender: AnyObject) {
        popover.performClose(sender)
        eventMonitor?.stop()
    }
复制代码

• 运行项目，咱们发现失去焦点后，弹层隐藏掉了。

添加右键菜单

• 如图所示，添加menu组件进来

  

• 将 Menu 与 AppDelegate.swift 创建联系

  

  

  

• 删除多余项，添加退出图标和条目

  

• 修改AppDelegate.swift文件，添加Handler来接管togglePopover

// 接管togglePopover
    @objc func mouseClickHandler() {
        if let event = NSApp.currentEvent {
            switch event.type {
            case .leftMouseUp:
                togglePopover(popover)
            default:
                statusItem.menu = Menu
                statusItem.button?.performClick(nil)
            }
        }
    }
复制代码

• statusItem.button添加以下代码

// 点击事件
 button.action = #selector(mouseClickHandler)
 button.sendAction(on: [.leftMouseUp, .rightMouseUp])
复制代码

• 在AppDelegate.swift的末尾添加

extension AppDelegate: NSMenuDelegate {
    // 为了保证按钮的单击事件设置有效，menu要去除
    func menuDidClose(_ menu: NSMenu) {
        self.statusItem.menu = nil
    }
}

复制代码

• 在applicationDidFinishLaunching内添加

// 修复按钮单击事件无效问题
Menu.delegate = self
复制代码

• 此时右键，咱们发现已成功添加

  

实现退出功能

• 如图所示，将推出函数关联至AppDelegate文件下

  

• 完善退出app函数

// 关闭App
    @IBAction func Quit(_ sender: Any) {
        NSApplication.shared.terminate(self)
    }
复制代码

• 再次运行后，右键，点击推出，便可关闭应用

编写Popover页面

执行完上述步骤后，咱们建立了一个空的Popover,接下来咱们往Popover添加内容，调用接口，显示咱们房间电表电量使用状况。

布局页面

• 如图所示,添加Text Field和label组件，拖拽至PopoverViewController中，并与PopoverViewController.swift进行关联

  

  

• 调整拖出来的控件大小，搞成如图所示的样子

  

安装Cartfile库管理工具

Cartfile是一个优秀的库管理工具，至关于咱们前端的npm。

• 点击Cartfile下载地址，进入Cartfile的github仓库的下载页面，选择pkg文件下载，而后安装。

  

安装网络请求库和Json解析库

Alamofire,为一个优秀的网络请求库，他封装了各类http请求。

SwiftyJSON,为一个优秀的json解析库

咱们能够经过Cartfile来获取他们

• 在咱们的项目根目录建立Cartfile文件，并添加以下内容

github "Alamofire/Alamofire" ~> 4.0
github "SwiftyJSON/SwiftyJSON" ~> 3.0
复制代码

• 打开终端，进入到咱们项目的根目录，执行以下命令

carthage update --platform macOS
复制代码

• 执行完毕后，咱们发现，项目的根目录下多了Carthage文件夹

  

• 此时咱们打开，xcode，打开如图所示的页面

  

• 如图所示，选择咱们刚才Carthage文件夹下的，build->Mac->framework文件

  

• 添加成功后，如图所示

  

开启网络访问

Xcode默认不容许http请求，按照如图所示的操做进行便可。

调用接口渲染页面

在PopoverViewController.swift文件中添加以下代码

import Cocoa
import Alamofire
import SwiftyJSON

class PopoverViewController: NSViewController {
    // 今日用电
    @IBOutlet weak var electricityToday: NSTextField!
    // 本月已用
    @IBOutlet weak var currentMonthBatteryTotal: NSTextField!
    // 剩余电量
    @IBOutlet weak var remainingBattery: NSTextField!
    // 统计时间
    @IBOutlet weak var time: NSTextField!

    private var timer: Timer?
    // 定时器记数: 每20分钟执行一次，3轮为1小时
    private var timeCount = 3
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // 获取并设置页面数据
        setPageData()
        // 启动定时器
        loop()
    }
    
    // 获取并设置数据
    func setPageData(){
        // 发起post请求
        Alamofire.request("https://www.xxx.com",method: .post,parameters: ["userName":"xxx","password":"xxx"],encoding: JSONEncoding.default).responseJSON { (response) in
            switch response.result {
            // 请求成功
            case .success(let resData):
                // 将返回的数据转为JSON对象
                let jsonData = JSON.init(resData as Any)
                // 变量赋值
                self.electricityToday.stringValue = jsonData["data"]["electricityToday"].string!
                self.currentMonthBatteryTotal.stringValue = jsonData["data"]["currentMonthBatteryTotal"].string!
                self.remainingBattery.stringValue = jsonData["data"]["remainingBattery"].string!
                self.time.stringValue = jsonData["data"]["time"].string!
                break
            case .failure(let error):
                print("接口调用失败")
                print(error);
                break
            }
        }
    }
    
    // GCD 方式的定时器，循环
    func loop() {
        print("\(Date()): 定时器初始化")
        // timeInterval: 隔多少秒执行一次
        timer = Timer(timeInterval: 1200, repeats: true, block: { timer in
            self.loopFireHandler(timer)
        })
        // 添加定时器
        RunLoop.main.add(timer!, forMode: .common)
    }
    // 定时器须要执行的内容
    @objc private func loopFireHandler(_ timer: Timer?) -> Void {
        // 定时器执行结束结束
        if self.timeCount <= 0 {
            print("\(Date()): 执行完1轮，开始下一轮")
            self.timeCount = 3
            return
        }
        // 获取并设置页面数据
        setPageData()
        // 执行完分钟
        self.timeCount -= 1
      
    }

}


extension PopoverViewController {
    static func freshController() -> PopoverViewController {
        //获取对Main.storyboard的引用
        let storyboard = NSStoryboard(name: NSStoryboard.Name("Main"), bundle: nil)
        // 为PopoverViewController建立一个标识符
        let identifier = NSStoryboard.SceneIdentifier("PopoverViewController")
        // 实例化PopoverViewController并返回
        guard let viewcontroller = storyboard.instantiateController(withIdentifier: identifier) as? PopoverViewController else {
            fatalError("Something Wrong with Main.storyboard")
        }
        return viewcontroller
    }
}


复制代码

写在最后

如何爬取你房间内电表使用状况，请移步这篇文章:Java爬取电表电量使用状况

本篇文章对应的代码地址: home-battery-tool

• 文中若有错误，欢迎在评论区指正，若是这篇文章帮到了你，欢迎点赞和关注😊
• 本文首发于掘金，未经许可禁止转载💌