macOSアプリのメニューバーアイコンのデザイン #Swift

概要

以下のようにメニューバーアイコンを作って表示してみる。

HIGによるとメニューバーアイコンにはテンプレートイメージを使う。
つまり黒と透明度のみでデザインされた画像とすることが推奨。
- Menu Bar Extras
Use a template image to represent your menu bar extra. A template image discards color information and uses a mask to produce the appearance you see onscreen. Template images automatically adapt to the user’s appearance settings, so they look good on both dark and light menu bars, and when your menu bar extra is selected.
- ライト/ダークモードで視認しやすい色で表示されるのが嬉しい。
- Appleのものを見ると基本テンプレート画像なのでそれに調和させる。（Siriは多分例外）
- Providing Images for Different Appearances
画像の高さは28pxとする。(公式な記載がないので私の感覚)

GitHub

qiita-menubar-icon-design
- イラストレータとXcodeのプロジェクトをそれぞれ配置。

イラストレータでの画像の作成/出力

塗りには黒のみを使用。
不透明度の変更による表現は可能。

1x,2x,3x用にそれぞれ14,28,42pxで出力。

Xcode

Assetsの設定

Render AsでTemplate Imageを選択。

実装

メニューバーにアイコンを表示するだけの実装。
AppDelegateでStatusBarIconControllerのインスタンスをプロパティと持たせておく。
- 実際の運用ではNotificationでアイコンを変更したいことがあるので。

import AppKit

class StatusBarIconController: NSObject {
    
    // MARK: - Properties
    
    private let systemStatusItem: NSStatusItem

    private var menubarIconStandard: NSImage {
        return NSImage(named:NSImage.Name("MenubarIcon"))!
    }
    
    // MARK: - LifeCycle
    
    override init() {
        systemStatusItem = NSStatusBar.system.statusItem(withLength: NSStatusItem.squareLength)
        super.init()
        systemStatusItem.button?.image = menubarIconStandard
    }
}

テンプレート画像の反転した状態を確認

Accfessibility>DisplayからReduce trasparencyでテンプレート画像の表示を変更でき、ライト/ダークモードの時の確認がそれぞれできる。