右から左へのユーザーインターフェース

概要

この章では、Qt Quick アプリケーションに右から左への言語サポートを実装するために利用可能な、さまざまなアプローチとオプションについて説明します。一般的な右から左への言語には、アラビア語、ヘブライ語、ペルシャ語、ウルドゥー語などがあります。ほとんどの変更には、右から左への言語に翻訳されたテキストが適切に右に配置され、ビュー、リスト、グリッドで水平に並べられたコンテンツが右から左に正しく流れるようにすることが含まれます。

右から左の言語を話す文化圏では、人々は自然にグラフィック要素やテキストを右から左にスキャンして読みます。一般的な経験則では、コンテンツ（写真、ビデオ、地図など）はミラーリングされませんが、コンテンツの配置（アプリケーションのレイアウトや視覚的要素の流れなど）はミラーリングされます。例えば、時系列で表示される写真は右から左に流れ、水平スライダーの下端範囲はスライダーの右側に位置し、テキスト行は使用可能なテキストエリアの右側に揃える。ビジュアル要素の位置がコンテンツに関連している場合、例えば地図上の位置を示すポジションマーカーが表示されている場合など、位置はミラーリングされるべきではありません。また、右から左へ話す言語話者が左から右への配置に慣れているような特殊なケース、たとえば電話のナンバーダイヤラーや音楽プレーヤーのメディア再生、一時停止、巻き戻し、送りボタンを使う場合などにも配慮が必要な場合があります。

テキストの配置

(これは、Text 、TextInput 、TextEdit タイプに適用されます）。

テキストアイテムの水平方向の配置が明示的に設定されていない場合、テキスト要素はテキストの自然な読み方向に自動的に配置されます。デフォルトでは、英語のような左から右へのテキストはテキストエリアの左側に揃えられ、アラビア語のような右から左へのテキストはテキストエリアの右側に揃えられます。空白テキス ト を持つテキス ト 要素の整列は、QInputMethod::inputDirection （） を手がかり と し ます。

こ のデフ ォ ル ト の ロ ケールに基づ く 配置は、 テ キ ス ト 要素にhorizontalAlignment プ ロ パテ ィ を設定す る か、 あ る いはLayoutMirroring 添付プ ロ パテ ィ を用いて レ イ ア ウ ト ミ ラ ー を有効にす る こ と で上書きす る こ と がで き ます。LayoutMirroring が設定されている場合、horizontalAlignment プロパティの値は変更されないことに注意してください。ミラーリングを考慮したテキスト要素の有効な配置は、effectiveHorizontalAlignment プロパティから読み取ることができます。

// automatically aligned to the left
Text {
    text: "Phone"
    width: 200
}

// automatically aligned to the right
Text {
    text: "خامل"
    width: 200
}

// aligned to the left
Text {
    text: "خامل"
    horizontalAlignment: Text.AlignLeft
    width: 200
}

// aligned to the right
Text {
    text: "خامل"
    horizontalAlignment: Text.AlignLeft
    LayoutMirroring.enabled: true
    width: 200
}

ポジショナーとビューのレイアウト方向

(これは、Row 、Grid 、Flow 、ListView 、GridView タイプに適用されます）。

水平ポジショニングとモデルビューに使用されるタイプは、レイアウトの水平方向を制御するためにlayoutDirection プロパティを持ちます。layoutDirection をQt.RightToLeft に設定すると、アイテムは右から左にレイアウトされます。デフォルトでは、Qt Quick は左から右へのレイアウト方向に従います。

水平方向のレイアウト方向は、LayoutMirroring 添付プロパティによって逆にすることもできます。これにより、ポジショナーとビューの有効なlayoutDirection が反転します。layoutDirection プロパティの実際の値は変更されないことに注意してください。ミラーリングを考慮したポジショナーとビューの有効なレイアウト方向は、effectiveLayoutDirection プロパティから読み取ることができます。

// by default child items are positioned from left to right
Row {
    Child {}
    Child {}
}

// position child items from right to left
Row {
    layoutDirection: Qt.RightToLeft
    Child {}
    Child {}
}

// position child items from left to right
Row {
    LayoutMirroring.enabled: true
    layoutDirection: Qt.RightToLeft
    Child {}
    Child {}
}

レイアウトミラーリング

添付のプロパティLayoutMirroring は、既存の左から右へのQt Quick アプリケーションに右から左へのサポートを簡単に実装するための便宜として提供されています。これは、アイテムアンカーの動作、ポジショナや モデルビューのレイアウト方向、QMLテキストタイプの明示的なテキスト配置を反映します。

特定のItem に対してレイアウトミラーリングを有効にすることができます：

Item {
    height: 50; width: 150

    LayoutMirroring.enabled: true
    anchors.left: parent.left   // anchor left becomes right

    Row {
        // items flow from left to right (as per default)
        Child {}
        Child {}
        Child {}
    }
}

または、すべての子タイプもレイアウト方向を継承するように設定します：

Item {
    height: 50; width: 150

    LayoutMirroring.enabled: true
    LayoutMirroring.childrenInherit: true
    anchors.left: parent.left   // anchor left becomes right

    Row {
        // setting childrenInherit in the parent causes these
        // items to flow from right to left instead
        Child {}
        Child {}
        Child {}
    }
}

この方法でミラーリングを適用しても、関連するアンカー、layoutDirection 、horizontalAlignment プロパティの実際の値は変わりません。別の読み取り専用プロパティeffectiveLayoutDirection は、ミラーリングを考慮したポジショナーやモデルビューの有効なレイアウト方向を問い合わせるために使用することができます。同様に、Text 、TextInput 、TextEdit タイプは、テキストの効果的なビジュアルアライメントを問い合わせるためのリードオンリープロパティeffectiveHorizontalAlignment を得ています。

アンカーやポジショナ型ではなく）x プロパティ値を使用して定義されたアプリケーションレイアウトやアニメーションは、LayoutMirroring 添付プロパティの影響を受けないことに注意してください。したがって、これらのタイプのレイアウトに右から左へのサポートを追加するには、特にアンカーとx座標ベースの位置決めの両方に依存しているビューでは、アプリケーションにいくつかのコード変更が必要になる場合があります。ここでは、LayoutMirroring attached プロパティを使用して、x 座標を使用して配置されているアイテムにミラーリングを適用する 1 つの方法を示します：

Rectangle {
    color: "black"
    height: 50; width: 50
    x: mirror(10)
    function mirror(value) {
        return LayoutMirroring.enabled ? (parent.width - width - value) : value;
    }
}

すべてのレイアウトが必ずしもミラーリングされるべきではありません。ほとんどの人は右利きなので、片手での使いやすさを向上させるためにビジュアルタイプを画面の右側に配置する場合があります。子タイプがミラーリングの影響を受けるべきではない場合は、そのタイプのLayoutMirroring.enabled プロパティを false に設定してください。

Qt Quick は、アニメーションする流動的なユーザインタフェースを開発するために設計されています。アプリケーションをミラーリングする際には、アニメーションとトランジションが期待通りに動作し続けることを忘れずにテストしてください。アプリケーションに右から左へのサポートを追加するリソースがない場合は、アプリケーションのレイアウトを左揃えのままにしておき、テキストが適切に翻訳され配置されていることだけを確認する方がよいでしょう。

アイコンのミラーリング

(これはImage 、BorderImage 、AnimatedImage のタイプに適用されます）。

ほとんどの画像はミラーリングする必要はありませんが、矢印のような方向性のあるアイコンはミラーリングが必要な場合があります。これらのアイコンの描画は、専用のmirror プロパティでミラーリングすることができます：

Image {
    source: "arrow.png"
    mirror: true
}

デフォルトのレイアウト方向

アプリケーションのアクティブなレイアウト方向を問い合わせるには、Qt.application.layoutDirection プロパティを使用します。このプロパティはQGuiApplication::layoutDirection() を継承しており、アクティブな言語翻訳ファイルからレイアウト方向を決定します。

特定のロケールのレイアウト方向を定義するには、QGuiApplication コンテキスト内の専用文字列リテラルQT_LAYOUT_DIRECTION を、LTR またはRTL のいずれかとして宣言します。

まず、この行をQMLソースコードのどこかに記述してください：

qsTr("QT_LAYOUT_DIRECTION","QGuiApplication");

次に、Using lupdateを使用して翻訳ソースファイルを生成します。

これにより、次の宣言が翻訳ファイルに追加されます。ここで、ロケールの翻訳として、LTR またはRTL を入力することができます。

<context>
    <name>QGuiApplication</name>
    <message>
        <location filename="myapp.qml" line="33"/>
        <source>QT_LAYOUT_DIRECTION</source>
        <translation type="unfinished">RTL</translation>
    </message>
</context>

次に、アプリケーションのルートQMLコンポーネントに以下のバインディングを追加します：

LayoutMirroring.enabled: Qt.application.layoutDirection === Qt.RightToLeft
LayoutMirroring.childrenInherit: true

最初のバインディングは、右から左へのロケールが設定されたときにUIが適切にミラーリングされるようにするものです。2つ目のバインディングは、ルートコンポーネントの子アイテムもミラーリングに対応するようにします。

コンパイルした翻訳ファイルを使用してQt Quick アプリケーションを実行すると、レイアウト方向が期待どおりに動作することをテストできます：

qml myapp.qml -translation myapp.qm

静的関数QGuiApplication::setLayoutDirection （）を呼び出すことで、右から左へのレイアウト方向でアプリケーションをテストできます：

QGuiApplication app(argc, argv);
app.setLayoutDirection(Qt::RightToLeft);