【Swift】 ウィンドウの背景が丸いOSXアプリを作る

今回はCocoaProgrammingウィンドウの背景が丸いMacOSXアプリを作る方法を紹介します。

 

Macアプリにはウィンドウが存在するため、そのウィンドウにも装飾を加えることができるので丸いアプリを作るなんてこともできました。

では早速その方法を見ていきましょう。

はじめに

 

今回紹介する方法では、以下のようなウィンドウを持つアプリが完成します。

 

20170515141355

 

こちらのアプリは丸い部分が背景になっており、透明な部分をクリックしても何も反応しなくなっています。

もし、透明な部分に別のアプリケーション(Chromeなど)があれば、そのアプリが前面に移動します。

 

アプリの背景がただ透明なだけではなく、何もない部分になるというわけですね。

ではまずストーリーボードを作成していきましょう。

 

ストーリーボードを作る

 

今回開発するアプリでは、ストーリーボードの中に「Custom View」「Label」「Push Button」を配置してみました。

CustomViewはアプリ上の白い背景の部分になっています。

 

では、以下を参考にしてストーリーボードにオブジェクトを配置してください。

 

20170515141356

 

こちらのViewはWindow Controllerと接続しています。

初期状態をいじっていなければ、自動的にWindowControllerが追加されているはずです。

 

続いて、Custom ViewとWindowControllerのカスタムクラスを作成しましょう。

command + nを押して新規ファイルを追加してください。

 

20170515141359

 

CustomViewのカスタムクラスは「CustomView」という名前で、NSViewを継承しています。

 

Check
Subclass…がNSViewに変更されている点に注意してください。

 

20170515141357

 

WindowControllerも同様に「WindowController」という名前で、Subclass…をNSWindowControllerに変更しています。

 

20170515141358

 

これらのファイルが作成できたら、ストーリーボードの「WindowController」と「CustomView」に割り当てていきましょう。

WindowControllerを選択した状態で、Idenitity inspectorを以下のように変更。

 

20170515141402

 

CustomViewも同様。

 

20170515141401

 

あとは、適当にラベルやボタンなどを配置してみてください。

これでストーリーボードが完成しました。

 

20170515141403

 

CustomViewのスタイルを変更

 

続いて、CustomViewのスタイルを調整していきます。

今回のカスタムビューは以下のような手順で作成しました。

 

  1. 背景を白に変更
  2. 背景の角を丸くする
  3. 背景を黒く縁取り
  4. 縁の太さを変更

 

ではまず先に完成系のコードを確認してください。

 

import Cocoa

class CustomView: NSView {

    override func draw(_ dirtyRect: NSRect) {
        super.draw(dirtyRect)

        // Drawing code here.
    layer?.backgroundColor = NSColor.white.cgColor
    layer?.cornerRadius = self.frame.width / 2
    layer?.borderColor = NSColor.black.cgColor
    layer?.borderWidth = 2

    }
}

 

編集するコードは、先ほど作成した「CustomView」クラスなので注意してください。

コードが書けたので、順番に解説していきます。

 

backgroundColor

 

これはそのまま「背景の色を白くする」コードです。

「white」の部分を「black」に変更すれば黒い背景にもできます。

 

また「NSColor(red: 1, green: 1, blue: 1, alpha: 1).cgColor」のようなコードにすれば、細かく色を調整できるので試してみてください。

 

cornerRadius

 

このコードでは、ウィンドウの角を丸めることができます。

今回の場合、完全な円形にするため「横幅 / 2」で指定してあります。

 

このcornerRadiusの値を小さくすれば、丸角の正方形を作ることもできますね。

 

20170515141406

 

borderColor

 

背景と同様の手順で、背景の縁に色を指定します。

 

20170515141404

 

borderWidth

 

先ほど色を指定したので、縁が表示されるようになりました。

borderWidthの値を変更することで、縁の太さを変更できます。

 

20170515141405

 

カスタムビューのスタイル変更は以上です。

続いてWindowControllerにアプリケーションのウィンドウ設定を記述していきましょう。

 

WindowContorllerを設定

 

こちらは、先ほど作成した「WindowController」クラスを編集します。

今回の場合、以下のような項目を設定しました。

 

  1. 不透明を設定
  2. 背景を透明化
  3. ウィンドウの背景をドラッグして移動
  4. タイトルバーのテキストを非表示
  5. タイトルバーを透明化
  6. 影を非表示
  7. タイトルバーを非表示(Optional)
  8. ウィンドウのサイズを固定

 

「タイトルバーを非表示にするか」の設定はなくても大丈夫です。

アプリケーションのクローズボタンや最大化ボタンを非表示にできるだけなので、必要なら記述するようにしてください。

 

また、もしこの処理を追加した場合は「アプリ終了」の処理も追加しましょう。

私の場合、ストーリーボードに配置した「Quit」ボタンからアプリ終了処理を呼び出すようになっています。

 

20170515141407

 

アプリ終了処理は「ViewController」に以下のように記述すれば追加できますよ。

 

// ***action接続***
@IBAction func quitButton(_ sender: Any) {
  NSApplication.shared().terminate(self)
}

 

では、WindowControllerの実際のコードを確認してください。

 

import Cocoa

class WindowController: NSWindowController {

    override func windowDidLoad() {
        super.windowDidLoad()

        // Implement this method to handle any initialization after your window controller's window has been loaded from its nib file.

    window?.isOpaque = false
    window?.backgroundColor = NSColor(white: 1, alpha: 0)

    window?.isMovableByWindowBackground = true
    window?.titleVisibility = .hidden
    window?.titlebarAppearsTransparent = true
    window?.hasShadow = false

    window?.styleMask.remove(NSWindowStyleMask.titled)
    window?.styleMask.remove(NSWindowStyleMask.resizable)
    }
}

 

ウィンドウを透過

 

Point
window?.isOpaque = falsewindow?.backgroundColor = NSColor(white: 1, alpha: 0)

 

この処理で、ウィンドウの背景を透明に設定しています。

 

これらのコードについては以下の記事を参考にしてください。

Cocoa Swift3 背景を透明にするisOpaqueの使い方

 

ウィンドウをドラッグで移動

 

Point
window?.isMovableByWindowBackgraund = true

 

ウィンドウをドラッグして移動できるかを設定しました。

Cocoa ウィンドウの背景をドラッグして移動させる方法

 

タイトルを非表示

 

今回のアプリケーションでは、タイトルが表示されていると邪魔になってしまうため、非表示にしました。

 

Point
window?.titleVisibility = .hiddenwindow?.titlebarAppearsTransparent = true

 

こちらの記事を参考にしてください。

Cocoa タイトルバーを非表示にするtitleVisibilityの使い方

 

影を非表示

 

hasShadow でウィンドウが影を持つかを設定できます。

 

影ありの場合:

20170515141409

 

影無しの場合:

20170515141355

 

タイトルバーを非表示

 

タイトルバーに表示される「クローズボタン」や「リサイズボタン」を非表示にします。

 

Point
window?.styleMask.remove(NSWindowStyleMask.titled)

 

20170515141410

 

今回のアプリでは、このボタンの有無を設定するために記述しました。

 

ウィンドウのサイズを固定

 

Point
window?.styleMask.remove(NSWindowStyleMask.resizable)

 

このコードを追加すれば、ウィンドウをリサイズできないようにできました。

また、ストーリーボードのWindowを選択した状態で「Resize」のチェックを外すことでも同様の設定ができるかと思います。

 

20170515141408

 

これで、ウィンドウが丸いOSXアプリが作成できたかと思います。

あとは、自分なりのアプリをCustomViewの中に設置してみてください。

 

まとめ

 

今回紹介した方法を使えば、背景のウィンドウが丸いアプリケーションを作成することができました。

円形のアプリだけではなく、角を丸くしたい時にも使える方法だと思います。

 

また、今回紹介したコードはウィンドウを丸くする時以外でも活用することができるので、ぜひ覚えてみてください。

 

 

ではまた。

過去にレビューしたアイテム