Preferenceっぽいwindowをつくる

やること

環境設定(Preference)っぽいウィンドウを作ります。 イメージ的にはdocker desktop for macのやつです。

出来上がりはこんな感じです

• 起動時にウィンドウが出ます
• メニューから Preferences を選択すると環境設定ウィンドウが出ます
• 環境設定ウィンドウのwindowヘッダっぽいところにアイコンを出して表示が切り替わります

環境

• swift: 4.2
• xcode: Version 10.0 (10A255)

成果物

参考までにソースです。 github.com

手順

windowControllerを追加

1. preferencesWindow用の windowController を追加します
2. preferences から追加した windowControllerにセグエを設定します

tab view controller

• tabviewcontroller を追加

  • tab３つ作る
  • 今回はそれぞれ general, advanced, reset に名前を変更
  • crossfade のチェックを外す
  • styleをtoolbarにする

• imageをわりあてる

  • assetに任意の画像を入れる
  • それぞれのtab item に任意のファイル名を指定
    • 今回だと general, advanced, reset
    • 候補に出てくると思う

• タブ表示を消す

  • styleをtoolbarに変更

• 各tabitemに適当に中身を入れる

• windowのresizeもできないようにしておく

配置を整える

このままだとすべて左寄りなので reset だけ右に寄せます。toolbar コンポーネントだとstoryboardから調整できるけどtabviewcontrollerは調整できない？のでコード書きます

1. tabviewcontroller ファイルを作成

2. 追加したtabviewcontroller と紐づける

3. コード書く

import Cocoa

class TabViewController: NSTabViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do view setup here.
    }
    override func toolbarDefaultItemIdentifiers(_ toolbar: NSToolbar) -> [NSToolbarItem.Identifier] {
        
        super.toolbarDefaultItemIdentifiers(toolbar)
        
        var arr = Array<NSToolbarItem.Identifier>()
        arr.append(NSToolbarItem.Identifier.init(self.tabViewItems[0].identifier as! String))
        arr.append(NSToolbarItem.Identifier.init(self.tabViewItems[1].identifier as! String))
        arr.append(NSToolbarItem.Identifier.flexibleSpace)
        arr.append(NSToolbarItem.Identifier.init(self.tabViewItems[2].identifier as! String))
        
        return arr
    }

}

• ダサい
• NSToolbarItem.Identifier.flexibleSpace でスペースを作ってくれるぽひ

完成

参考

参考というかやってる内容はまんま同じ。最高

www.youtube.com

ウインドウのヘッダっぽいところにタブ(ツールバー)を表示してみました。そんなに手順無いですが正解に行き着くのにやはり時間かかりますね。macOSのアプリ関連だと意外とyoutubeに動画上がってたりするのに気づきました。これで環境設定を作れる。