アプリのルック&フィールをカスタマイズする
アプリケーションの基本的なウィジェットの描画をカスタマイズします。カスタムスキン独自のボタン、スライダー、その他のコンポーネントを描画することで、アプリケーションを作成できます。
レベル初心者
プラットフォーム:Windows, macOS, Linux, iOS, Android
クラス: LookAndFeel,Slider,Button,Path,AffineTransform
スタート
このチュートリアルのデモ・プロジェクトのダウンロードはこちらから:PIP|ZIP.プロジェクトを解凍し、最初のヘッダーファイルをProjucerで開く。
このステップでヘルプが必要な場合は、以下を参照してください。Tutorial: Projucer Part 1: Getting started with the Projucer.
デモ・プロジェクト
デモ・プロジェクトは、標準的なJUCEのルック&フィールを用いて、2つのボタンと2つの回転スライダを持つGUIを作成します:

についてLookAndFeelクラスは、JUCEでカスタマイズされたGUIを作成するための基本です。クラスを使ってLookAndFeelクラスでは、特定のコンポーネントのデフォルト・カラーを変更するなどの簡単なカスタマイズを行うことができます。しかし、多くの種類のコンポーネントの描画をカスタマイズすることもできます。例えば、ボタンやスライダーを独自の外観で作成できます。
色のカスタマイズ
という場合LookAndFeelオブジェクトがコンポーネントに適用されると、そのコンポーネントに適用されます。そしてその子コンポーネント (Tutorial: Parent and child componentsただし、子コンポーネントに特別に別のルック&フィールが割り当てられている場合を除く)。
ルック・アンド・フィール・システムでできることの1つは、標準的なJUCEコンポーネントの要素に特定の色を上書きすることです(Tutorial: Colours in JUCE.)例えば、以下の行をMainContentComponent
コンストラクタの両方文字盤が赤くなる:
getLookAndFeel().setColour (juce::Slider::thumbColourId, juce::Colours::red);
以下のスクリーンショットのようになるはずだ:

2つのダイヤルを異なるものに設定するには、新しいダイヤルを作ればいい。LookAndFeelインスタンスを追加し、それをダイヤルの片方だけに適用する。まずLookAndFeel_V4オブジェクトをメンバー[1](これはデフォルトのJUCEルックアンドフィールを実装するクラスです)。
private:
juce::LookAndFeel_V4 otherLookAndFeel; // [1]
juce::Slider dial1;
juce::Slider dial2;
juce::TextButton button1;
juce::TextButton button2;
次に、先ほど追加したコンストラクタのコード行を次のように変更する:
otherLookAndFeel.setColour (juce::Slider::thumbColourId, juce::Colours::red);
このルック&フィールを使ってみようのみを最初のダイヤルに追加する。このコード行をMainContentComponent
ビルダー
dial1.setLookAndFeel (&otherLookAndFeel);
これで、以下のスクリーンショットのようなUIが作成されるはずだ:

もちろん、この単純な例では、この方法はSlider::thumbColourId色をスライダーオブジェクトに直接適用できます。しかし、アプリでは複数のスライダーを異なる目的で使用することがあり、ある目的のスライダーには1つのカラーセットを使用し、他の目的のスライダーには異なるカラーセットを使用したい場合があります。このアプローチでは、各スライダーにそのタイプに適したルック&フィールが割り当てられている限り、これらの色をグローバルに変更できます。
このアプローチの利点は、実際の描画コードをカスタマイズし始めるとはっきりする。特に、カスタム・ルック&フィール・クラスを作成する必要がある。
カスタム・ルック&フィール
特定のコンポーネントの描画をカスタマイズするためには、以下のクラスを継承した新しいクラスを作成する必要がある。LookAndFeelクラスを継承しています。もしLookAndFeelクラスを実装する必要がある。すべて純粋仮想関数のこれらの関数がすでに定義されているクラスを継承する方がはるかに現実的だ。必要なものだけをオーバーライドすればいい。デフォルトのルック&フィールと比較して、この1つの色の変更だけが定義されたシンプルなカスタム・ルック&フィールを作成してみましょう。
まず、先ほど追加したコンストラクタからこの行を削除する:
otherLookAndFeel.setColour (juce::Slider::thumbColourId, juce::Colours::red);
さて、新しいクラスを追加します。LookAndFeel_V4クラスの前にMainContentComponent
クラスである:
class OtherLookAndFeel : public juce::LookAndFeel_V4
{
public:
OtherLookAndFeel()
{
setColour (juce::Slider::thumbColourId, juce::Colours::red);
}
このコードを実行する前に、クラス名を変更します。otherLookAndFeel
OtherLookAndFeelのメンバー[2]:
private:
OtherLookAndFeel otherLookAndFeel; // [2]
juce::Slider dial1;
juce::Slider dial2;
juce::TextButton button1;
juce::TextButton button2;
アプリケーションをビルドして実行すると、前のスクリーンショットと同じ結果が表示されるはずです。
図面のカスタマイズ
には多くの機能がある。LookAndFeelクラスは、さまざまなタイプのコンポーネントに対応している。特定のコンポーネント・タイプに指定された関数は、すべてLookAndFeelMethods
関連するコンポーネント・クラス内の
スライダーのカスタマイズ
例えばSlider::LookAndFeelMethodsJUCE APIドキュメントの中にあります。このリストの中にSlider::LookAndFeelMethods::drawRotarySlider().
これをOtherLookAndFeel
クラスに追加する。宣言文をクラスに追加する:
void drawRotarySlider (juce::Graphics& g, int x, int y, int width, int height, float sliderPos,
const float rotaryStartAngle, const float rotaryEndAngle, juce::Slider&) override
ここでは、以下のデータが渡されていることがわかる:
g
(その)Graphicsという文脈があるx
回転スライダーを描く矩形の左上のx座標y
回転スライダーを描く矩形の左上のy座標width
回転スライダーを描く矩形の幅height
回転スライダーを描く矩形の高さsliderPos
:その位置これはスライダーの実際の値の範囲とは無関係です)rotaryStartAngle
文字盤の回転開始角度(ラジアン単位)rotaryEndAngle
文字盤の回転終了角度(ラジアン単位)slider
:そのSliderオブジェクトそのものである
x、y、width、heightの引数は、すべてのテキストボックススライダーが使用しているかもしれないそのため、スライダーの位置とサイズにアクセスし、それらの値を使用できます。
それでは、文字盤の指針を表す線と塗りつぶされた円だけのシンプルな文字盤を描くように、関数本体 を書いてみましょう。まず、渡された値に基づいて計算するために、いくつかの一時変数が必要です:
auto radius = (float) juce::jmin (width / 2, height / 2) - 4.0f;
auto centreX = (float) x + (float) width * 0.5f;
auto centreY = (float) y + (float) height * 0.5f;
auto rx = centreX - radius;
auto ry = centreY - radius;
auto rw = radius * 2.0f;
auto angle = rotaryStartAngle + sliderPos * (rotaryEndAngle - rotaryStartAngle);
最終的にangle
変数には文字盤が指すべき角度が格納される。
次に、文字盤の色を塗りつぶし、輪郭を描くコードを追加しよう:
// fill
g.setColour (juce::Colours::orange);
g.fillEllipse (rx, ry, rw, rw);
// outline
g.setColour (juce::Colours::red);
g.drawEllipse (rx, ry, rw, rw, 1.0f);
ポインターそのものを描画するために、最初にPathオブジェクトを平行移動させ、必要な角度だけ回転させる:
juce::Path p;
auto pointerLength = radius * 0.33f;
auto pointerThickness = 2.0f;
p.addRectangle (-pointerThickness * 0.5f, -radius, pointerThickness, pointerLength);
p.applyTransform (juce::AffineTransform::rotation (angle).translated (centreX, centreY));
そして、このパスを埋めてポインターを描画する:
// pointer
g.setColour (juce::Colours::yellow);
g.fillPath (p);
このセクションの完成したコードはLookAndFeelCustomisationTutorial_02.h
ファイルを参照してください。
ポインタの描画を変更します。長さを変えてみたり、少し太いけれど丸みを帯びた長方形にしてみたり、矢印を描いてみたり。
の1つをシンプルにカスタマイズしたものです。Sliderルック・アンド・フィールのメソッド。しかし、この原則は他のメソッドにも当てはまる。おそらく、他のカスタマ イズを作成するための最良のアプローチは、既存の実装をLookAndFeel_V4またはLookAndFeel_V3クラスを作成し、これを自分のコードの基礎として使用する。
についてLookAndFeel_V4クラスはLookAndFeel_V3クラスで再定義されないメソッドもある。