イマジン・スタイル

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

付属プロパティ

• パス: 文字列

詳細説明

Imagineスタイルは画像アセットに基づいています。スタイルにはデフォルトの画像セットが付属していますが、事前に定義された命名規則を使用して画像のあるディレクトリを提供することで、画像を簡単に変更できます。

イマジン・スタイルとデフォルト画像

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

ファイル名

画像ファイルのファイル名は、以下の規則で命名されています：

<control>-<element>-<states>

<control> と<element> セクションは必須ですが、<states> セクションは任意です。たとえば、Button に"button-background.9.png" という名前のファイルが1つ提供されると、Button がサポートするすべての状態に使用されます。画像を提供する状態のセットを決めるのは開発者次第です。しかし、disabled 、pressed など、可能な限り最も一般的なコントロールの状態に画像を提供することを推奨します。こうすることで、インタラクティブ・コントロールが、エンドユーザーが期待するような視覚的な振る舞いをするようになります。

要素リファレンス

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

アセット例

次の表は、すべてのコントロールのアセット例（デフォルトの Imagine スタイルのアセットから抜粋）です。すべての要素にアセットが必要なわけではないので、このリストは完全ではありませんが、独自のアセットを作成する際のガイドとして使用できます。

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

¹コントロールを塗りつぶすように引き伸ばされた、1色を含む1x1の画像。

9パッチ画像

Imagineスタイルでは、特定の要素のサイズ変更に対する反応をデザイナーがコントロールできるように、9パッチ画像を使用しています。Button 「background 」を表す9パッチ画像の例と、拡大バージョン（9パッチの線を見やすくするため）を示します：

画像の内容は幅44ピクセル×高さ32ピクセルです。すべての9パッチ画像は、すべての辺に1ピクセルの太さの線（総称して「9パッチ線」と呼ぶ）が必要なので、画像の実際のサイズは幅46ピクセル×高さ34ピクセルになる。9パッチラインは、画像のターゲットDPIに関係なく、1ピクセルの太さでなければならないことに注意してください。例えば、button-background.9.pngとbutton-background@2x.9.png の9パッチラインは、どちらも1ピクセルの太さでなければなりません。

9パッチラインは黒でなければならず、残りの部分は透明か白でなければなりません：

伸縮可能な領域

上端と左端にある9本のパッチラインは、リサイズ時に画像のどの部分が引き伸ばされるかを決定します。

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

角丸の部分は線の範囲外なので、元のサイズを保っていることに注目してください。

パディング領域

padding Control Layout右端と下端にある9パッチの線は、コントロールのcontentItem 。

以下は、9パッチ画像をリサイズした例ですが、今回はパディング9パッチラインがどのように機能するかを示しています。

contentItem は、網掛けされた領域内で必要なだけのスペースを取ることができます。パディング線がない場合、contentItem は、伸縮可能な領域を超えることなく、必要なだけのスペースを取ります。

挿入エリア

例えば、コントロールにドロップシャドウが必要な場合があります。しかし、上のボタンにドロップシャドウを追加すると、そのサイズに影響し、レイアウトとマウス/タッチ入力境界の両方に問題が生じます。

インセット領域は、9パッチ画像のある領域をコントロールの外側に出すようにコントロールに指示することで、この問題を解決します：

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

9パッチ画像のエクスポート

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

アフィニティ・デザイナー

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

Adobe Illustrator

AdobeのAsset Exportパネルのドキュメントを参照してください。

アドビ フォトショップ

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

Inkscape

Inkscape 9-Patch Export ExtensionはInkscapeでアセットのエクスポートに使用できます。

スケッチ

Sketch のエクスポートに関するドキュメントをご覧ください。

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

9パッチラインの修正

いくつかのDPIバリエーション(@2x,@3x など)で9-patchイメージをエクスポートする場合、9-patchラインは通常イメージと共にスケールアップされます。これを修正する方法はいくつかありますが、おそらく最も簡単な方法は、ImageMagickのmogrifyツールを使うことです。このツールには-shave 機能があり、それを使って画像をトリミングし、9パッチラインの太さを減らすことができます：

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 2.12
import QtQuick.Controls 2.12
import QtQuick.Controls.Imagine 2.12

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 Controls 設定ファイルを参照してください。

環境変数

QT_QUICK_CONTROLS_IMAGINE_PATH=:/imagine-assets

QT_QUICK_CONTROLS_IMAGINE_PATH=imagine-assets

サポートされている環境変数の完全なリストはQt Quick Controls の Supported Environment Variablesを参照してください。

パレット

Imagineスタイルでは、palette プロパティとqtquickcontrols2.confファイルによるパレットのカスタマイズをサポートしています。他のスタイルと同様に、Imagineスタイルが使用する正確なpalette roles はスタイルに依存します。ただし、コントロールの視覚的な外観の大部分（背景など）は画像アセットで管理されるため、一般的にテキストに使用されるロールだけが影響します。

フォント

カスタムフォントは、font プロパティと設定ファイルで設定できます。

依存関係

Imagineスタイルに固有の属性にアクセスするには、Imagineスタイルを別途インポートする必要があります。Imagineスタイルへの参照に関係なく、同じアプリケーションコードが他のどのスタイルでも実行されることに注意する必要があります。Imagine固有の属性は、アプリケーションがImagineスタイルで実行される場合にのみ効果を発揮します。

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

Qt Quick Controls のスタイリング」も参照してください。

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

この添付プロパティは、画像アセットへのパスを保持します。

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

関連情報

• Qtクイックコントロールのスタイリング
• 自動車の例