[C++,QT/Qml]31.QML 위치 지정 속성(두개의 텍스트를 항상 가운데 정렬 하기)

 

 

 

[C++,QT/Qml]31.QML 위치 지정 속성(두개의 텍스트를 항상 가운데 정렬 하기)

 

 

 

 

안녕하세요 고급 개발자가 꿈인 코린이 입니다. 

 

오늘은 Qml위치 지정 속성을 이용해서 두개의 텍스트를 항상 가운데 정렬하는 방법을 구현해 보겠습니다.

 

두개의 텍스트를 항상 가운데 정렬하는 방법이란 예를 들어 특정한 사람의 걸음 걸이수를 표현하는 앱을 만들었을때

 

걸음 거리: 1000걸음 이라고 출력되거나 더 많을 수도 있습니다. 예를 들어 10000걸음이라고 출력을하면 1000보다

 

0이 하나 추가되었기 때문에 이상태에서 가운데 정렬을 하기 위해서 0하나 추가된 길이만큼 동적으로 가운데 정렬을 

 

해주어야 합니다.

 

예를 들어 어떤사람은 10만 걸음이라고 하면 그 글자수가 늘어난 만큼 동적으로 가운데 정렬을 해줘야 한다는 것 입니다.

 

실제로 이런 내용들은 현업에서 구현해달라고 했던 내용입니다.

 

어떠한 긴 텍스트를 받아도 항상 가운데 정렬이 되도록 해달라는 고객사의 요청 이었고 그래서 항상 가운데 정렬하라고

 

구현했던 기억이 얼핏 납니다. ㅎㅎㅎ

 

그래서 이 가운데 정렬 하는 내용을 구현하기 위해서는 가운데 정렬하는 속성을 알아야 합니다.

    

일단 가운데 정렬하는 속성으로는 세로 속성인 horizontalAlignment를 사용해야합니다.

 

세로의 영어인 horizontal을 사용해서 Qt enum값인 Text.AlignHCenter를

 

사용하시면 됩니다. Text.AlignHcenter는 텍스의 넓이에 따르는 것으로 텍스트 넓이에서의 가운데 정렬 입니다.

 

아래의 코드를 보면서 설명 드리겠습니다.

 

import QtQuick 2.0
 
Item {
    width: 640
    height: 480
    Rectangle
    {
        anchors.fill: parent
        color:"gray"
    }
    Text
    {
        id: text
        width:parent.width
        height:50
        horizontalAlignment: Text.AlignHCenter//텍스트의 넓이에서의 가운데 정렬
        //부모의 넓이 이므로 부모의 넓이의 가운데 정렬
        text: "걸음:"
        Rectangle {
            anchors.fill: parent
            color: "transparent"
            border.color: "green"
        }
 
    }
 
    Rectangle
    {
        id:rect1
        width:100
        height:100
        anchors.centerIn: parent
        color:"green"
        Text {
            id: res1_text1
            text: qsTr("rect1_text1")
            anchors.centerIn: parent
        }
    }
 
}
 
 
 

 

위의 실행 이미지를 보겠습니다. 위처럼 부모의 넓이 즉 전체 넓이 만큼에서 가운데 정렬을 했기 때문에 

 

위처럼 가운데 정렬이 되었습니다. 그렇다면 위의 걸음이라는 텍스트의 넓이를 줄여 보겠습니다.

 

아래의 이미지는 넓이는 부모의 반 즉 320으로 설정한 내용 입니다.

 

 

위처럼 horizontalAlignment속성은 텍스트의 넓이기준으로 가운데 정렬이 된다는 것을 알수가 있습니다.

 

그렇다면 가변적으로 변하는 두개의 텍스트를 가운데 정렬 하려면 어떻게 해야할까요??

 

텍스트가 두개이기 때문에 위와 같은 속성을 사용하면 각 자의 텍스트가 각자의 넓이에서 가운데 정렬이 될텐데

 

같은 넓이에서 가운데 정렬을 하려면 어떻게 해야할까요??

 

이 내용의 답은 두 텍스트를 합쳐서 합친 넓이에서 가운데 정렬을 하면 됩니다.

 

특정한 사각형을 만들어주고 이 넓이를 두개의 텍스트의 넓이가 합쳐진 넓이로 설정 하신다음에 

 

이 사각형을 가운데 정렬 해주시면 됩니다.

 

말로 설명하면 잘이해가 안되기 때문에 

 

import QtQuick 2.0
 
Item {
    width: 640
    height: 480
    Rectangle
    {
        anchors.fill: parent
        color:"gray"
    }
    Rectangle
    {
        width:text1.paintedWidth + text2.paintedWidth//paintedwidth를 사용해야 실제로 그려지는 넓이로 구현이 가능 합니다.
        //아래처럼 텍스트의 넓이를 넓게 잡아 놓아도 실제로 그려지능 만큼만 설정이 가능합니다.
        anchors.horizontalCenter:parent.horizontalCenter
 
        Text
        {
            id: text1
            //텍스트의 넓이에서의 가운데 정렬
            //부모의 넓이 이므로 부모의 넓이의 가운데 정렬
            text: "걸음:"
            Rectangle {
                anchors.fill: parent
                color: "transparent"
                border.color: "red"
            }
 
        }
        Text
        {
            id: text2
            text: "1"
            width:500
            anchors.left: text1.right//text1의 오른쪽에 위치하도록 설정
            anchors.leftMargin:5
            Rectangle {
                anchors.fill: parent
                color: "transparent"
                border.color: "red"
            }
        }
    }
 
    Rectangle
    {
        id:rect1
        width:100
        height:100
        anchors.centerIn: parent
        color:"green"
        Text {
            id: res1_text1
            text: qsTr("rect1_text1")
            anchors.centerIn: parent
        }
    }
 
}
 
 
 

위의 이지는 텍스트가 짧은 내용을 실행 시킨 내용 입니다.

위의 이미지는 텍스트의 길이가 길때 출력되는 이미지 입니다.

 

위의 실행결과 처럼 위의 코드를 사용하면 텍스트의 길이가 길더라고 배경화면의 가운데 정렬이 가능해 집니다.

 

그리고 위의 실행결과를 더욱 이해하기 편하게 하기위해서 각 텍스트들의 넓이를 빨간색으로 출력 해두었습니다.

 

width:text1.paintedWidth + text2.paintedWidth//paintedwidth를 사용해야 실제로 그려지는 넓이로 구현이 가능 합니다.
        //아래처럼 텍스트의 넓이를 넓게 잡아 놓아도 실제로 그려지능 만큼만 설정이 가능합니다.

 

그리고 paintedWidth라는 새로운 속성이 있는데요 이 속성은 텍스트가 그려지는 실제 넓이를 출력하는 내용으로

 

위의 코드처럼 숫자를 표현하는 텍스트의 넓이가 500인데도 불구하고 실제 넓이 만큼만 출력이 되어서

 

위의 실행이미지처럼 가운데 정렬이 할수가 있는 것입니다.

 

그런데 막상 위의 이미지를 보시면 한글 텍스트와 숫자 텍스트의 높이가 다르고 위치도 살짝 어긋나게 출력이 됩니다.

 

이런 내용들은 한글의 텍스트의 실체 출력되는 높이가 다른 텍스트 보다 크기 때문에 발생하는 것으로 

 

위치좌표들을 적절히 조정하면 정상적으로 출력이 되는 내용 입니다.

 

그래서 이 부분에 대해서는 따로 언급하지는 않겠습니다.

 

여기 까지 텍스트의 가운데 정렬 속성을 알아보았습니다.

 

읽어주셔서 감사합니다.!!