イマジン・スタイル

「イマジン・スタイル」は、設定可能な画像アセットに基づいています。詳細...

関連プロパティ

• path: 文字列

詳細な説明

「Imagine」スタイルは画像アセットに基づいています。このスタイルにはデフォルトの画像セットが付属していますが、あらかじめ定義された命名規則に従って画像を格納したディレクトリを指定することで、画像を簡単に変更することができます。

デフォルトの画像を使用した「Imagine」スタイル

Imagine スタイルを使用してアプリケーションを実行するには、「 Qt Quick コントロールでのスタイルの使用」を参照してください。

ファイル名

画像ファイルの名前は、以下の規則に従って付けられます：

<control>-<element>-<states>

<control> および<element> セクションは必須ですが、<states> セクションは任意です。例えば、Button に対して"button-background.9.png" という単一のファイルが提供された場合、その画像はButton がサポートするすべての状態に対して使用されます。どの状態の画像を提供するかは、開発者が決定します。 ただし、可能な限り、disabled やpressed など、最も一般的なコントロールの状態に対応する画像を用意することをお勧めします。これにより、インタラクティブなコントロールが、エンドユーザーが期待する通りの視覚的な挙動を示すようになります。

要素リファレンス

以下の表には、各コントロールでサポートされている要素、その要素の可能な状態、および期待されるファイル拡張子が一覧表示されています。要素とは、コントロールの特定の視覚的な部分を表す画像のことです。例えば、Button の"background" 要素は、そのbackground を表しています。

アセットの例

以下の表は、すべてのコントロールに関するアセットの例（デフォルトの「Imagine」スタイルのアセットから抜粋）を一覧にしたものです。すべての要素にアセットが必要なわけではないため、このリストは網羅的なものではありませんが、独自のアセットを作成する際の指針としてご利用いただけます。

これらのアセットがエクスポートされたテンプレートは、Sketchプロジェクトとして利用可能です。

¹1x1の画像で、1色のみを含み、コントロールのサイズに合わせて引き伸ばされます。

9-Patch 画像

「Imagine」スタイルでは、特定の要素のサイズ変更に対する挙動をデザイナーが制御できるようにするため、9-Patch画像が使用されています。以下は、Button のbackground を表す9-Patch画像の例です。9-Patchの線をより見やすくするために、拡大版も併せて掲載しています：

画像の内容は、幅44ピクセル、高さ32ピクセルです。すべての9-patch画像には、各辺の周囲に1ピクセル幅の線（総称して「9-patchライン」と呼ばれる）が必要であるため、画像の実際のサイズは幅46ピクセル、高さ34ピクセルになります。 なお、画像のターゲットDPIにかかわらず、9-patchラインの太さは必ず1ピクセルでなければなりません。たとえば、button-background.9.pngとbutton-background@2x.9.pngの9-patchラインは、どちらも1ピクセルの太さである必要があります。

9-patchラインは黒色でなければならず、残りの領域は透明または白色でなければなりません：

伸縮可能な領域

上端と左端の9パッチの線は、画像のサイズ変更時にどの部分が伸縮するかを決定します。

以下は、9-patch画像を元のサイズの1.5倍に、さまざまな寸法でリサイズした例です：

角丸部分は、線の範囲外にあるため、元のサイズが維持されていることに注目してください。

パディング領域

右端と下端にある9-patchの線は、コントロールのcontentItem に割り当てられるスペースの量を決定します。つまり、これはpadding を制御するものとしても考えることができます。パディングを説明した図については、Control Layout を参照してください。

以下に、9-patch 画像のサイズ変更に関するさらなる例を示しますが、今回はパディングの 9-patch ラインがどのように機能するかを示しています。

contentItem は、網掛けされた領域内で必要なだけスペースを占めることができます。パディングラインを省略した場合、contentItem は、伸縮可能な領域を超えない範囲で必要なだけスペースを占めることになります。

インセット領域

場合によっては、コントロールにドロップシャドウなどを適用する必要があることもあります。しかし、上記のボタンにドロップシャドウを追加すると、ボタンのサイズに影響が出てしまい、レイアウトやマウス／タッチ入力の境界設定において問題が生じます。

インセット領域は、9-patch 画像の特定の領域をコントロールの外側に配置するようコントロールに指示することで、この問題を解決します：

下の画像では、破線はボタンのクリック可能領域と、レイアウト上でボタンが占めるスペースを表しています。影は、その背後の縞模様の領域で示されています：

9-Patch 画像のエクスポート

さまざまなベクターエディタやビットマップエディタを使用して、Imagineスタイルでの使用に適した9-patch画像を作成できます。以下のセクションでは、各エディタでのエクスポート手順を簡単に説明し、最後のセクションでは、エクスポートされた画像が9-patchの仕様に準拠していることを確認する方法について説明します。

Affinity Designer

Affinityの「エクスポート設定」に関するドキュメントを参照してください。

Adobe Illustrator

Adobeの「アセットエクスポート」パネルのドキュメントを参照してください。

Adobe Photoshop

Adobeの「レイヤーから画像アセットを生成する」に関するドキュメントを参照してください。

Inkscape

Inkscape 9-Patch Export Extensionを使用すると、Inkscape からアセットをエクスポートできます。

Sketch

Sketchの「エクスポート」に関するドキュメントを参照してください。

Qt Quick Controlsでは、アセットのエクスポート後に9-patchの線の太さを自動的に修正するSketch用プラグインも提供しています。このファイルをインストールするには、ファイルをダブルクリックしてください。Sketchが9-patchエクスポートプラグインのインストールを確認すると、画像のエクスポート時にプラグインが自動的に処理を行います。

9-patch ラインの修正

9-patch画像を複数のDPIバリエーション（@2x 、@3x など）でエクスポートする場合、通常、9-patchの線は画像とともに拡大されてしまいます。 これを修正する方法はいくつかありますが、おそらく最も簡単なアプローチは、ImageMagickのmogrifyツールを使用することです。このツールには「-shave 」機能があり、これを使って画像をトリミングし、9-patchラインの太さを減らすことができます：

mogrify -shave 1x1 -path path/to/images *@2x.9.png
mogrify -shave 2x2 -path path/to/images *@3x.9.png
mogrify -shave 3x3 -path path/to/images *@4x.9.png

通常のDPIの画像（@Nx という接頭辞が付いていないもの）は影響を受けないため、高DPIディスプレイ向けの画像に対してのみこのコマンドを実行すれば十分です。

アニメーション画像

Imagineスタイルでは、WebPおよびGIF形式のアニメーション画像がサポートされています。

カスタマイズ

パス

「Imagine」スタイルでは、画像アセットの選択に使用されるパスをカスタマイズできます。 パスは任意のウィンドウやアイテムに対して指定でき、fonts と同様に、その設定は子要素に自動的に継承されます。以下の例では、ウィンドウと3つのラジオボタンすべてに、ダークテーマの画像アセット（「qrc:/themes/dark」にあるファイル）が表示されます。

import QtQuick
import QtQuick.Controls
import QtQuick.Controls.Imagine

ApplicationWindow {
    visible: true

    Imagine.path: "qrc:/themes/dark"

    Column {
        anchors.centerIn: parent

        RadioButton { text: qsTr("Small") }
        RadioButton { text: qsTr("Medium"); checked: true }
        RadioButton { text: qsTr("Large") }
    }
}

QMLでパスを指定するほか、環境変数や 設定ファイルを介して指定することも可能です。QMLで指定された属性は、他のすべての方法よりも優先されます。

設定ファイル

[Imagine]
Path=:/imagine-assets

[Imagine]
Path=imagine-assets

設定ファイルの詳細については、「Qt Quick コントロール設定ファイル」を参照してください。

環境変数

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

サポートされている環境変数の完全な一覧については、『Qt Quick コントロール』の「サポートされている環境変数」を参照してください。

パレット

Imagine スタイルでは、palette プロパティおよびqtquickcontrols2.confファイルを介してパレットのカスタマイズが可能です。 他のスタイルと同様、Imagine スタイルが使用する具体的な `palette roles ` はスタイルによって異なります。ただし、コントロールの視覚的な外観のほとんど（例：背景）は画像アセットを通じて管理されるため、通常テキストに使用されるロールにのみ影響が及ぶことになります。

フォント

カスタムフォントは、font プロパティおよび設定ファイルを介して設定できます。

依存関係

Imagineスタイル固有の属性を利用するには、Imagineスタイルを別途インポートする必要があります。なお、Imagineスタイルへの参照の有無にかかわらず、アプリケーションのコード自体は他のどのスタイルでも同様に実行されます。Imagine固有の属性が有効になるのは、アプリケーションがImagineスタイルで実行されている場合のみです。

常に読み込まれるQMLファイルにImagineスタイルがインポートされている場合、アプリケーションがどのスタイルで実行されるかに関係なくアプリケーションを実行できるようにするには、Imagineスタイルをアプリケーションとともにデプロイする必要があります。ファイルセレクタを使用することで、スタイルへのハードな依存関係を作ることなく、スタイル固有の調整を適用することができます。

「 Qt Quick コントロールのスタイル設定」も参照してください 。

添付プロパティのドキュメント

このアタッチドプロパティは、画像アセットへのパスを保持します...

Button {
    Imagine.path: "qrc:/themes/dark"
}

関連情報

• Qt Quick コントロールのスタイル設定
• 自動車分野の事例