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

개요

이 장에서는 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 첨부 속성을 사용하여 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 는 애니메이션이 있는 유동적인 사용자 인터페이스를 개발하기 위해 설계되었습니다. 애플리케이션을 미러링할 때는 애니메이션과 전환이 예상대로 계속 작동하는지 테스트하는 것을 잊지 마세요. 애플리케이션에 오른쪽에서 왼쪽 지원을 추가할 리소스가 없는 경우 애플리케이션 레이아웃을 왼쪽으로 정렬하고 텍스트가 제대로 번역되고 정렬되는지 확인하는 것이 좋습니다.

미러링 아이콘

( 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);