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

概要

この章では、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 ` は、既存の左から右（LTR）Qt Quick アプリケーションに対して、右から左（RTL）のサポートを容易に実装できるようにするために提供されています。これは、アイテムのアンカー、ポジショナーおよびモデルビューのレイアウト方向、ならびに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座標に基づく位置指定の両方に依存しているビューにおいて、アプリケーションのコードを一部変更する必要がある場合があります。 以下は、`x `座標を使用して配置されたアイテムにミラーリングを適用するために、`LayoutMirroring `アタッチドプロパティを使用する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");

次に、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);