오른쪽에서 왼쪽으로 진행되는 사용자 인터페이스

개요

이 장에서는 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 `는 기존의 좌우 방향(left-to-right) Qt Quick 애플리케이션에 우좌 방향(right-to-left) 지원을 쉽게 구현할 수 있도록 편의성을 제공하기 위해 마련되었습니다. 이 속성은 항목 앵커( Item anchors), 포지셔너 및 모델 뷰의 레이아웃 방향, 그리고 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 부착 속성의 영향을 받지 않는다는 점에 유의하십시오. 따라서 이러한 유형의 레이아웃에 오른쪽에서 왼쪽으로(RTL) 지원을 추가하려면, 특히 앵커와 x 좌표 기반 위치 지정을 모두 사용하는 뷰의 경우 애플리케이션 코드를 일부 수정해야 할 수 있습니다. 다음은 ` LayoutMirroring ` 부착 속성을 사용하여 ` x ` 좌표로 배치된 항목에 미러링을 적용하는 한 가지 방법입니다:

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 는 생동감 있고 유연한 사용자 인터페이스 개발을 위해 설계되었습니다. 애플리케이션을 미러링할 때는 애니메이션과 전환 효과가 예상대로 계속 작동하는지 테스트하는 것을 잊지 마십시오. 애플리케이션에 우측에서 좌측으로 읽는 방향(RTL) 지원을 추가할 자원이 없다면, 애플리케이션 레이아웃을 좌측 정렬 상태로 유지하고 텍스트가 올바르게 번역되고 정렬되도록 하는 편이 더 나을 수 있습니다.

아이콘 미러링

(이는 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가 적절하게 반전되도록 보장합니다. 두 번째 바인딩은 루트 컴포넌트의 자식 항목들도 반전 설정을 따르도록 보장합니다.

컴파일된 번역 파일을 사용하여 Qt Quick 애플리케이션을 실행하면 레이아웃 방향이 예상대로 작동하는지 테스트할 수 있습니다:

qml myapp.qml -translation myapp.qm

QGuiApplication::setLayoutDirection() 정적 함수를 호출하여 오른쪽에서 왼쪽으로 진행되는 레이아웃 방향에서 애플리케이션을 테스트할 수 있습니다:

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