【Swift】NSSliderでRGBAスライダーを作ってみた

こんにちははクリアメモリです！

今回はCocoaProgrammingでカラーを選択する「RGBAスライダー」を作成してみました。

RGBAスライダーを作ることで、オブジェクトの色をユーザーが選択したものに変更させることができます。

そこで今回は、NSSliderを使ったRGBAスライダーの作り方を紹介します。

はじめに

今回紹介する方法はSwiftを使って処理を記述するCocoaProgrammingです。

また、使用アプリケーションはXcodeですので、その他のツールではうまくいかないのでちゅいしてください。

では先に実際の動作を確認しておきましょう。

このように、ユーザー側から値を受け取って、それに合わせた色に「CustomView」の背景色を変更しています。

このようなRGBAスライダーはXcodeのNSSliderを使うことで、簡単に実装することができました。

では、xibファイルにSlider や CustomView、TextFieldなどを設置していきましょう。

xibファイルを作成

今回のアプリケーションは、以下のようなレイアウトにしてみたので参考にしてください。

初期状態では、CustomViewの色は「黒 (r=0, g=0, b=0, a=1)」です。

またこれらのスライダーは、移動するたびにリアルタイムでCustomViewに描画していきたいので、以下を参考にしてスライダーの設定を変更させましょう。

【Swift】スライダーでリアルタイムにラベルを更新するNSSliderの使い方

2017.3.13

CocoaProgrammingでスライダーを設置した場合、ラベルなどとリンクして「スライダーを移動させた時」の処理を記述すると思います。 仮にラベルのテキストをスライダーから変...

アプリケーション上の数値は、よく見る 0~255 にしました。

同様に、スライダーの最小値、最大値も0~255に変更し、初期値をrgb -> 0, a -> 255に変更しました。

RGBスライダー：

Alphaスライダー：

さらに、これらのスライダーアクションはまとめて取得したいので、それぞれのオブジェクトにタグを設定しました。

テキストフィールドは、RGBの初期値が0、Alphaの初期値は255です。

これらのテキストフィールドは右寄せのテキストにしたいので、以下のように変更してください。

Alignmentが右寄せのアイコンに変更されているのがわかるかと思います。

あとは、適当な位置にラベルを配置してxibは完成です。

続いて、設置したRGBAスライダーにコードから処理を追加していきましょう。

コードを作成

今回のコードでは、以下のような動作を実装しました。

ではコードを紹介します。

今回のアプリケーションは以下のようなコードにしてみました。

import Cocoa

@NSApplicationMain
class AppDelegate: NSObject, NSApplicationDelegate {

    @IBOutlet weak var window: NSWindow!
    @IBOutlet weak var customView: NSView!

    @IBOutlet weak var rField: NSTextField!
    @IBOutlet weak var gField: NSTextField!
    @IBOutlet weak var bField: NSTextField!
    @IBOutlet weak var aField: NSTextField!

    var r = CGFloat(0.0)
    var g = CGFloat(0.0)
    var b = CGFloat(0.0)
    var a = CGFloat(1.0)

    func applicationDidFinishLaunching(_ aNotification: Notification) {
        // Insert code here to initialize your application

        drawBackgroundColor()
    }

    func applicationWillTerminate(_ aNotification: Notification) {
        // Insert code here to tear down your application
    }

    @IBAction func sliderAction(_ sender: NSSlider) {

        sender.minValue = 0
        sender.maxValue = 255

        switch sender.tag {
        case 0:
            rField.stringValue = String(sender.integerValue)
            r = CGFloat(sender.doubleValue / 255)
            break
        case 1:
            gField.stringValue = String(sender.integerValue)
            g = CGFloat(sender.doubleValue / 255)
            break

        case 2:
            bField.stringValue = String(sender.integerValue)
            b = CGFloat(sender.doubleValue / 255)
            break

        case 3:
            aField.stringValue = String(sender.integerValue)
            a = CGFloat(sender.doubleValue / 255)
            break

        default:
            break
        }
        drawBackgroundColor()
    }

    func drawBackgroundColor(){
        customView.layer?.backgroundColor = NSColor(red: r, green: g, blue: b, alpha: a).cgColor
    }
}

スライダーのイベントを取得するためには「NSSlider」型のアクションイベントが必要になります。

このイベントはスライダーのアクションをまとめて取得しています。

【Swift】複数ボタンのアクションをまとめて設定する方法

2017.3.24

Xcodeで、ストーリーボードからボタンを配置してコードにアクション接続をした時に、そのボタンが複数あった場合はひとまとめにしておきたいですよね。 そこで今回は、複数ボタンのアク...

その中で、先ほど設定したタグを元にして「Switch」文で条件分岐しています。

これで、スライダーの値が取得できるので、NSTextFieldの値を変更しつつRGBAの値を変更できました。

最後に、drawbackgroundColorを呼び出して、CustomViewを再描画しましょう。

実際に起動して、RGBAスライダーからCustomVeiwの背景色を調整できたら完成です。

まとめ

今回紹介したように、XcodeのNSSliderを使えば簡単にRGBAスライダーを作成できました。

このアプリケーション単体では出番がないですが、アプリケーションのPreferencesなどで実装することで、色を設定できますね。

テキスト色を変更できるアプリを作る時などに参考にしてみてください。

【Swift】NSGraphicsContextで図形を描画する方法

2017.3.31

今回はCocoaProgrammingで「カスタムビューに図形を描画」させてみようと思います。 NSGraphicsContextを使うことで、四角や丸だけではなく、直線も描画できるようになるので、星のような複雑な図形も描画できます。 そこで今回は、NSGraphicsContextを使って、四角...

【Swift】addArcで半円や正円を描画する方法

2017.4.2

今回はCocoaProgrammingでSwiftを使った「正円」や「半円」それ以外の中途半端な弓形をビュー上に描画する方法を紹介します。 「addEllipse」だと正円や楕円しか描画できなかったのですが、「addArc」を使うことで270°の弓形なども描画できるようになるので参考にしてみてくだ...

ではまた。