![[C++,QT/Qml]29.QML 에서 style 파일 적용 하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FrQE3W%2FbtqzgpNQ4Ao%2FZCZbjOe4KBKkKN3GT7kqfk%2Fimg.png)
[C++,QT/Qml]29.QML 에서 style 파일 적용 하기
안녕하세요 고급 개발자가 꿈인 코린이 입니다.
오늘은 Qml 에서 스타일 파일을 적용하는 내용을 다루어 보겠습니다.
스타일 파일이 적용 이라고 말하면 솔직히 처음에는 무슨 말인지 잘 이해가 안되는 경우가 있습니다.
스타일 파일이 무엇이냐면 UI디자인이 되어있는 하나의 PSD파일을 qml 파일로 변환 해주어서
디자이너가 화면을 디자인하고 qml파일로 변환한 파일이 style파일 입니다.
즉 특정한 화면을 구성할때 출력되는 이미지 등이나 텍스트 color등과 같은 디자인들의 속성값과 위치 값들을
style파일로 적용해서 프로그래머들은 style파일 그대로 적용하면 디자이너가 원하는 디자인이 그대로
구현이 될수 있도록 하는 것입니다.
즉 디자인은 디자인대로 로직 구현은 로직 구현대로 서로 각자의 업무를 할수 있다는 장점이 됩니다.
style파일은 아래 소스코드처럼 되어있습니다.
아래의 소스코드는 qt 사이트에서 예제로 가져온 소스 입니다. 참고해주세요
https://doc-snapshots.qt.io/qt5-5.9/qtquickcontrols2-wearable-qml-style-uistyle-qml.html
UIStyle.qml Example File | Qt Quick Controls 2 5.9
doc-snapshots.qt.io
아래 소스는 위의 url의 소스코드 입니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
import QtQuick 2.7
pragma Singleton
QtObject {
id: uiStyle
// Font Sizes
readonly property int fontSizeXXS: 10
readonly property int fontSizeXS: 15
readonly property int fontSizeS: 20
readonly property int fontSizeM: 25
readonly property int fontSizeL: 30
readonly property int fontSizeXL: 35
readonly property int fontSizeXXL: 40
// Color Scheme
// Green
readonly property color colorQtPrimGreen: "#41cd52"
readonly property color colorQtAuxGreen1: "#21be2b"
readonly property color colorQtAuxGreen2: "#17a81a"
// Gray
readonly property color colorQtGray1: "#09102b"
readonly property color colorQtGray2: "#222840"
readonly property color colorQtGray3: "#3a4055"
readonly property color colorQtGray4: "#53586b"
readonly property color colorQtGray5: "#53586b"
readonly property color colorQtGray6: "#848895"
readonly property color colorQtGray7: "#9d9faa"
readonly property color colorQtGray8: "#b5b7bf"
readonly property color colorQtGray9: "#cecfd5"
readonly property color colorQtGray10: "#f3f3f4"
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
현재 qt에서 제공하는 style file은 위처럼 color 랑 폰트 사이즈등만 나와 있습니다. 여기서 저는 아래소스와 같이
이미지에 대한 위치 정보와 이미지의 이름등을 추가해 보도록 하겠습니다.
|
1
2
3
4
5
6
|
readonly property var rectImagePauseButton : { "x" : 100, "y" : 100, "width" : 150, "height" : 150 }
readonly property var rectImagePauseButton : { "x" : 200, "y" : 200, "width" : 15-, "height" : 150 }
readonly property string imagePauseButton : "icons8-pause-button-96.png"
readonly property string imagePlayButton : "icons8-circled-play-96.png"
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
이전에 사용했던 play 버튼과 pause버튼을 위와 같이 지정을 해주었습니다.
그래서 디자이너가 포토샵을 통해서 위와 같이 x좌표가 100이고 y 좌표가 100이고 넓이가 150, 높이가 150인
pausebutton이라는 것을 지정해주어서 만들었습니다. 그렇다면 프로그래머 쪽에서도 위의 파일을 그대로 사용해서
적용해야 겠죠??
그래서 아래 이미지 처럼 qmldir파일을 추가 하고 위의 추가된 style파일을 추가 하였습니다.
qmldir 파일은 style파일을 등록하기 위해서 만들어주는 파일로 style파일을 등록하기 위해서 꼭 만들어 주어야 하는
파일 입니다.
아래 이미지를 보면 qmldir 파일과 위의 style파일을 teststyle.qml이라는 이름으로 추가하였습니다.
그리고 이 style파일을 적용하기 위해서 applyQmlStyle.qml이라는 파일도 추가 하였습니다.
applyQmlStyle.qml 파일에서 style파일을 어떻게 가져오고 적용을 하는지를 아래 소스코드에서 보여드리도록
하겠습니다.
일단 전체 소스코드를 보겠습니다.
teststyle.qml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
|
/****************************************************************************
**
** Copyright (C) 2017 The Qt Company Ltd.
** Contact: https://www.qt.io/licensing/
**
** This file is part of the examples of the Qt Toolkit.
**
** $QT_BEGIN_LICENSE:BSD$
** Commercial License Usage
** Licensees holding valid commercial Qt licenses may use this file in
** accordance with the commercial license agreement provided with the
** Software or, alternatively, in accordance with the terms contained in
** a written agreement between you and The Qt Company. For licensing terms
** and conditions see https://www.qt.io/terms-conditions. For further
** information use the contact form at https://www.qt.io/contact-us.
**
** BSD License Usage
** Alternatively, you may use this file under the terms of the BSD license
** as follows:
**
** "Redistribution and use in source and binary forms, with or without
** modification, are permitted provided that the following conditions are
** met:
** * Redistributions of source code must retain the above copyright
** notice, this list of conditions and the following disclaimer.
** * Redistributions in binary form must reproduce the above copyright
** notice, this list of conditions and the following disclaimer in
** the documentation and/or other materials provided with the
** distribution.
** * Neither the name of The Qt Company Ltd nor the names of its
** contributors may be used to endorse or promote products derived
** from this software without specific prior written permission.
**
**
** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS
** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR
** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT
** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,
** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT
** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE."
**
** $QT_END_LICENSE$
**
****************************************************************************/
import QtQuick 2.7
//pragma Singleton
QtObject {
readonly property var rectImagePauseButton : { "x" : 100, "y" : 100, "width" : 150, "height" : 150 }
readonly property var rectImagePlayButton : { "x" : 200, "y" : 200, "width" : 150, "height" : 150 }
readonly property string imagePauseButton : "icons8-pause-button-96.png"
readonly property string imagePlayButton : "icons8-circled-play-96.png"
// Font Sizes
readonly property int fontSizeXXS: 10
readonly property int fontSizeXS: 15
readonly property int fontSizeS: 20
readonly property int fontSizeM: 25
readonly property int fontSizeL: 30
readonly property int fontSizeXL: 35
readonly property int fontSizeXXL: 40
// Color Scheme
// Green
readonly property color colorQtPrimGreen: "#41cd52"
readonly property color colorQtAuxGreen1: "#21be2b"
readonly property color colorQtAuxGreen2: "#17a81a"
// Gray
readonly property color colorQtGray1: "#09102b"
readonly property color colorQtGray2: "#222840"
readonly property color colorQtGray3: "#3a4055"
readonly property color colorQtGray4: "#53586b"
readonly property color colorQtGray5: "#53586b"
readonly property color colorQtGray6: "#848895"
readonly property color colorQtGray7: "#9d9faa"
readonly property color colorQtGray8: "#b5b7bf"
readonly property color colorQtGray9: "#cecfd5"
readonly property color colorQtGray10: "#f3f3f4"
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
h |
qmldir 파일
|
1
|
TESTSTYLE 1.0 teststyle.qml #teststyle.qml 스타일 파일을 TESTSTYLE이름으로 등록해 준다
|
main.qml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
|
import QtQuick 2.9
import QtQuick.Controls 2.0
import QtQuick.Window 2.2
import "./"
import "./style" 1.0
Window {
property bool mbImageClicked : true
property int mCount : 0
visible: true
width: 640
height: 480
title: qsTr("Hello World")
StackView
{
id:stackView
anchors.fill: parent
initialItem: Item //제일 첫화면을 설정하는 것으로 설정을 안하면 되돌아오기가 안된다.
{
Rectangle//배경 색을 지정하는 부분
{
id:background
anchors.fill: parent
color:"red"
}
Text
{
id:testData
anchors.horizontalCenter: parent.horizontalCenter
text:"main screen testData"
font.pixelSize: 30
font.bold: true
}
Text
{
id:testText
anchors.centerIn: parent
text:"main screen"
font.pixelSize: 50
font.bold: true
}
Button
{
anchors.top:testText.bottom
anchors.horizontalCenter: parent.horizontalCenter
text:"open popup"
onClicked:
{
stackView.push(Qt.resolvedUrl("qrc:/applyQmlStyle.qml"))
}
}
}
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
applyQmlStyle.qml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
import QtQuick 2.0
import QtQuick.Controls 2.0
import "./style" 1.0
Item {
width: 640
height: 480
TESTSTYLE //qmldir파일에 등록한 TESTSTYLE를 실제 사용할 qml에 객체로 만들어 준다.
{
id:testStyle //스타일 파일을 id로 등록
}
Image
{
x:testStyle.rectImagePauseButton.x//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 x로 선언되어 있는 값을 가저온다.
y:testStyle.rectImagePauseButton.y//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 y로 선언되어 있는 값을 가저온다.
width:testStyle.rectImagePauseButton.width//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 width로 선언되어 있는 값을 가저온다.
height:testStyle.rectImagePauseButton.height//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 height로 선언되어 있는 값을 가저온다.
source:"./image/" + testStyle.imagePauseButton //teststyle.qml 파일 안의 변수이름이 imagePauseButton인 변수의 값을 가져온다.
}
Image
{
x:testStyle.rectImagePlayButton.x
y:testStyle.rectImagePlayButton.y
width:testStyle.rectImagePlayButton.width
height:testStyle.rectImagePlayButton.height
source:"./image/" + testStyle.imagePlayButton
}
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
아래 이미지는 style파일을 적용한 화면의 실행 이미지 입니다.
위의 소스코드를 보겠습니다.
일단 style파일을 사용하기 위해서 qmldir파일을 만들어 준후에 아래와 같이 style파일을 등록해 줍니다.
|
1
|
TESTSTYLE 1.0 teststyle.qml #teststyle.qml 스타일 파일을 TESTSTYLE이름으로 등록해 준다
|
teststyle.qml 파일을 TESTSTYLE 이라는 이름으로 사용할 것이라고 등록을 해주는 부분입니다.
그리고 실제 스타일 파일을 사용할 부분에서 아래와 같이 객체 등록을 해주면 됩니다.
|
1
2
3
4
5
6
7
8
9
10
|
import "./style" 1.0
Item {
width: 640
height: 480
TESTSTYLE //qmldir파일에 등록한 TESTSTYLE를 실제 사용할 qml에 객체로 만들어 준다.
{
id:testStyle //스타일 파일을 id로 등록
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
위의 소스처럼 qmldir을 import해주기 위해서 style폴더를 import시켜줍니다.
style폴더에는 qmldir뿐만 아니라 style파일도 모두 포함되어 있습니다.
그런다음 qmldir에서 등록했던 TESTSTYLE이름으로 객체를 만들어 주고 id를 이용해서 객체에 이름을 선언해 줍니다.
저는 testStyle라고 이름을 지었습니다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
Image
{
x:testStyle.rectImagePauseButton.x//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 x로 선언되어 있는 값을 가저온다.
y:testStyle.rectImagePauseButton.y//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 y로 선언되어 있는 값을 가저온다.
width:testStyle.rectImagePauseButton.width//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 width로 선언되어 있는 값을 가저온다.
height:testStyle.rectImagePauseButton.height//teststyle.qml 파일 안의 변수이름이 rectImagePauseButton인 변수의 height로 선언되어 있는 값을 가저온다.
source:"./image/" + testStyle.imagePauseButton //teststyle.qml 파일 안의 변수이름이 imagePauseButton인 변수의 값을 가져온다.
}
Image
{
x:testStyle.rectImagePlayButton.x
y:testStyle.rectImagePlayButton.y
width:testStyle.rectImagePlayButton.width
height:testStyle.rectImagePlayButton.height
source:"./image/" + testStyle.imagePlayButton
}
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
그리고 위의 소스코드처럼 값들을 가져오면 됩니다. 일단 객체이름을 선언했던 testStyle를 사용해주시고
testStyle안에 있는 rectImagePauseButton라는 변수를 참조해서 이변수의 x값을 가져오라고 한 것이
testStyle.rectImagePauseButton.x입니다.
그리고 이미지 파일의 이름은 string 파일 이겠죠?? 그래서 이미지 파일 이름을 가져와서 경로에 맞게 설정 해주어서
이미지 파일을 불러올수 있도록 source:"./image/" + testStyle.imagePauseButton 와 같이 코딩해 줍니다.
그러면 testStyle의 imagePauseButton 변수의값을가져올수있습니다.
이렇게 하면 style파일은 디자이너가 포토샵으로 만들어서 만들어주고 저희 같은 프로그래머들은 이러한 스타일 파일을
등록해서 사용할수 있도록 하는 하나의 업무관련 프로세스가 만들어 집니다.
이 방법을 이용하면 디자이너는 디자인만 할수 있고 프로그래머들은 로직만 짤수 있도록 되는 것입니다.
스타일 파일을 만드는 방법은 제가 안만들어서 정확하게는 모르겠지만 photoshop에서 qml파일로 만들어주는
라이브러리가 있다고 합니다. 그래서 그 라이브러리를 이용하면 photoshop에서 작성한 psd파일을 qml로
변환 해줄수 있다고하니 참고하시면 됩니다.
(필자는 프로그래머라 style파일이 정확이 어떻게 변환하는건지는 모릅니다. ㅜㅜ)
(나중에 직접 할수있다면 한번 해보는 것을 포스팅 하겠습니다.)
(style파일 예제로는 gimp를 이용하는 방법이 qt사이트에 있지만 막상 소스코드를 받아보니 gimp에서 만들어준 디자인 자체를 qml파일로 만들어 주는 거더군요 그래서 gimp에서 만든것을 바로 사용할수 있도록 하는 것인데 제가 포스팅한 내용과는 많이 다릅니다.)
여기까지 qml에서 style파일을 적용하는 방법이었습니다.
여기까지 읽어주셔서 감사합니다.!!
'QT and QML' 카테고리의 다른 글
| [C++,QT/Qml]31.QML 위치 지정 속성(두개의 텍스트를 항상 가운데 정렬 하기) (0) | 2019.11.23 |
|---|---|
| [C++,QT/Qml]30.QML 위치 지정 속성(anchors) (2) | 2019.11.09 |
| [C++,QT/Qml]28.Qml프로그래밍 버튼이 있는 팝업 출력하기 3(custom popup 만들기) (0) | 2019.10.20 |
| [C++,QT/Qml]27.Qml프로그래밍 버튼이 있는 팝업 출력하기 2(팝업 영역이 아닌 부분 gray 처리하기) (0) | 2019.10.20 |
| [C++,QT/Qml]26.Qml프로그래밍 버튼이 있는 팝업 출력하기 1(팝업 영역이 아닌 부분을 클릭시 팝업 닫기) (0) | 2019.10.13 |