-- Contents --
[*] 라즈베리파이 OS x64 설치하기 : https://makeutil.tistory.com/136
[*] QT5 설치하기 : https://makeutil.tistory.com/138
[*] QT5 Webengine 설치 : https://makeutil.tistory.com/166
000. Prologue : https://makeutil.tistory.com/168
001. HelloWorld Project : https://makeutil.tistory.com/169
002. HelloWorld 프로젝트 구경하기 : https://makeutil.tistory.com/171
003. BasicTextWidget : https://makeutil.tistory.com/173
004. BasicTextWidget 내용 둘러보기 : https://makeutil.tistory.com/174
005. LayoutExample : < 현재 >
006. Radiobutton Example : https://makeutil.tistory.com/177
007. CheckboxExample : https://makeutil.tistory.com/178
------------------
이번에는 레이아웃에 대해서 알아보는 시간을 가져볼 것이라, 코딩은 굳이하지 않으려 한다. 레이아웃이 무엇이며 QT에서 기본적으로 제공하는 레이아웃에는 어떤 것들이 있는지에 대해서 만 알아보도록 하겠다.
레이아웃은 화면구성요소중 어떤 형태로 배치할 것인지에 따라서 설정할 수 있다. 물론 필자는 특정형태를 유지하는 UI를 가진 프로그램을 만들어본 경험이 없다보니, 레이아웃을 사용한 적은 없다. 뭐 어쨋거나 레이아웃을 이용하면 형태가 흐트러지지 정의된 레이아웃 형태로 GUI를 사용 및 관리할 수 있다는 장점이 있다. 또한 화면의 크기가 변경 될때 레이아웃의 크기를 적절히 조정하여 늘어난 화면에 맞게 포함된 요소들을 배치할 수 있다는 장점이 있다.
QT에서 제공하는 레이아웃은 4가지가 있다. 구성요소를 세로로 나열하는 Vertical Layout, 가로로 나열하는 Horizontal Layout, 격자 형태로 나열하는 Grid Layout과 특정한 폼 형태를 구성하는 Form Layout이 있다. 실제 하나씩 만들어서 각 레이아웃에 배치하면서 직접 느껴보기 바란다.
1. 프로젝트 파일생성
1) 프로젝트 생성 위치 : /home/pi/QtWorks
2) 프로젝트명 : LayoutExample
3) 생성할 클래스 : MainWindow (디폴트값 그대로...)
2. 화면구성
2.1. 구성요소 생성
1) 화면구성은 버튼을 하나 끌어와서 놓는다.
2) 놓여진 버튼을 클릭후 화면 우측의 속성에서 minimumSize와 MaximumSize에서 Width와 Height를 각각 40으로 설정한다. 그리고 이름을 pbNum1로 만들자.
3) 만들어진 pbNum1 을 클릭하고 복사하기(Ctrl+C) 해서 버퍼에 넣고, 붙혀넣기(Ctrl+v)를 15번 눌러 총 16개의 버튼을 만든다.
4) 각 버튼의 이름을 pbNum0~9, pbApbA~F까지 설정한 다음, 버튼을 더블클릭하여 지정된 이름에 맞는 숫자 또는 영문자를 기록한다.
완료된 상태는 아래와 같다. 특별히 버튼의 위치는 신경쓰지 않아도 된다.
3. 레이아웃 설정하기
3.1. Vertical Layout
우측의 레이아웃 항목에서 Vertical Layout을 끌어다 놓고, 1번, 2번, 3번을 넣으면 아래와 같이 버튼이 배치되는 것을 볼수 있다. 결과는 아래와 같다.
1) 1~3번 버튼이 수직으로 배치된다.
2) 화면 우측의 구성에서 Vertical 레이아웃이 추가되고 그 아래에 pNum1~3까지의 버튼이 포함됨을 알수 있다.
3) 중앙의 Vertical Layout을 클릭하여 움직이면 버튼 1~3이 같이 포함되어 움직이는 것을 확인할 수 있다.
3.2. Horizontal Layout
다음은 수평 레이아웃에 대해서 설정해보자. Horizontal Layout을 끌어놓고 버튼 4~6번을 해당 레이아웃에 넣어보자.
1) 4~6의 버튼이 수평으로 배치된다
2) 화면 우측의 구성에서 새로생성된 horizontal 레이아웃 아래에 푸쉬버튼 pnNum4~6이 포함됨을 알수있다.
3.3. Grid Layout
앞서 진행한 것과 같이 드래그하여 Grid Layout을 끌어다 놓고, 3x2 형태로 배치해보자.
3.4. Form Layout
마지막으로 Form Layout을 확인해보자. 이번에는 Form Layout이다. 레이아웃 이름에서도 확인할 수 있듯, 특정 폼을 구성하는 형태로 사용된다. 이번에는 버튼 C~F4개와 LineEdit를 포함하여 구성하면 아래와 같이 구성할 수 있다.
3.5. 중첩 레이아웃
위의 레이아웃은 중첩해서 사용이 가능하다. 예를들면 앞서 만든 4개의 레이아웃을 다시 Grid Layout에 넣으면 다음과 같이 표시할 수 있다.
폼에 대해서 간단하게 설명하였는데, 앞서 이야기 한것과 같이 이러한 Layout을 설정하게 되면, 화면 변화에 따른 UI의 변화적용에 이로울 수 있다. 사실 GUI 배치할 때 중복적인 배치나 특정형태의 배치가 필요한경우 나쁘지 않게 사용할 수 있을것 같다.
마지막으로 대부분 고정해상도의 프로그램만 작성하다보니, 오히려 Group Box를 더 선호한다. 그룹박스는 Layout과 다르게 그룹박스내에 GUI 구성요소를 자유롭게 배치할 수 있다. 게다가 라인을 그려주는데 깔끔하게 나와서 주로 사용된다.
다만 아쉬운것은 QT버전에 따라서 윗쪽 라인 중간에 그룹 텍스트가 표시되기도 하고, 아래의 그림과 같이 라인 윗쪽에 그룹 텍스트가 표시된다. 그나마 다행인 것은 라즈비안 이전 버전에서는 디자인화면에서는 라인이 보이지 않는 문제도 있었는데 그 문제는 없다는것만해도 만족한다.
다음은 기본 버튼에 대해서 알아보도록 하겠다.
최근댓글