0061 - Layout, Tab, Buddy (레이아웃, 탭, 버디)

참고 영상

GUI 응용프로그램을 작성하면서 프로그램 제어에 사용되는 컨트롤을 일일이 위치를 맞추는 것은 비효율적입니다. 자동으로 이를 맞춰주는 방법을 알아 봅니다.

1. 프로젝트 생성

QT Widgets 응용프로그램을 작성합니다.

Choose a template

Projects : Application / Qt Widgets Application

QT Widgets Application

Name: 006_MyGui

Create in : D:\Work (작업 공간에 따라 다른 곳을 지정하시면 됩니다.)

Kit Selection 은 기존의 내용을 그대로 따라 가시면 됩니다.

Desktop Qt 5.5.0 MinGW 32bit

Class Information 에서는 간단하게 응용프로그램을 작성하기 위해 Bass class 를 QWidget 으로 선택합니다.

Project Management 는 그대로 두고 Finish 를 입력합니다.

2. Build 를 눌러서 정상적으로 응용프로그램이 만들어 지는지 확인합니다.

3. 버튼, 라벨 컨트롤 추가

Forms 에 있는 widget.ui 를 더블 클릭하여 QT 디자이너를 엽니다.

화면에 표시될 컨트롤을 Drag & Drop (드래그 앤 드롭) 방식으로 끌어서 놓습니다.

Line Edit

Push Button (OK, Cancel)

Label (Name : )

Horizontal Spacer

참고로 Text 컨트롤 (Text Edit, Plain Text Edit) 은 여러줄을 가정하고 작성되는 것이므로 한줄을 목적으로 크기를 작게해서 생성하면 스크롤바가 생기게 되어 있습니다.

4. Build 하여 응용 프로그램이 만들어지는지 확인합니다.

생성은 되지만, 화면을 확대하거나 축소하는 등의 동작을 하면 컨트롤이 상대적으로 늘어나거나 위치가 변경되지 않는 것을 볼 수 있습니다.

5. 레이아웃 (Layout) 컨트롤 추가

가로나 세로로 정렬되서 표시되길 원하는 컨트롤들을 드래그로 동작으로 선택한 뒤 아래의 선택 사항을 따릅니다.

1) 좌우로 일정한 간격을 두면서 수평으로 배치하고 싶다면 Layout Horizontally 를 선택합니다.

Line Edit 과 Label 두 개의 컨트롤을 선택한 후 Layout Horizontally 를 선택합니다.

Push Button 두개의 컨트롤과 이 Spacer 를 선택한 후 Layout Horizontally 를 선택합니다.

2) 위아래 일정한 간격을 두면서 수직으로 배치하고 싶다면 Layout Vertically 를 선택합니다.

Label 과 Line Edit 을 묶은 Layout 과, Horizontal Spacer 와 Push Button 컨트롤 2개를 묶은 Layout 을 선택하여 Layout Vertically 를 선택합니다.

3) 이 상태에서에서는 정렬이 완료 되었지만, 아직 대화창의 배경크기가 변경되면 반영이 되지 않는 상태입니다. 창 크기를 줄인 뒤 대화 창 배경을 선택합니다. 이 때 테두리에 파란 점이 표시 되는지 확인합니다.

이후 Layout Vertically 또는 Horizontally 를 선택합니다.

이 상태에서 실행을 하면 창의 크기가 변경되면 자동으로 컨트롤들의 크기도 변경 됩니다.

작성된 레이아웃은 삭제(Delete) 시 그룹 처럼 하위 컨트롤들도 삭제가 되므로 삭제를 하지 않고 Break Layout 을 선택하여 레이아웃만을 제거할 수 있습니다.

6. 버디 (Buddy) 지정

버디는 입력할 수 있는 부분은 없지만 포커스가 맞춰지면 자동으로 관련된 컨트롤로 포커스가 자동으로 전달되는 관계를 말합니다. 위 예제에서 라벨 컨트롤인 Name: 에 Focus 가 간다면 오른쪽 Line Edit 쪽으로 가게끔 하는 방법을 알아 봅시다.

1) 라벨 (Label) 에 Keyboard Focus 를 받을 수 있게 이름을 수정

Name: 을 저장하고 있는 라벨(Label) 컨트롤의 Property Editor (속성 편집기) 을 열어서 text 값에 원하는 바로가는 Key (Alt Key) 조합 앞에 & 값을 넣습니다.

위 경우 Alt + N 을 누르면 자동으로 Focus 가 가게끔 되어 있습니다.

2) 버디 관계 지정

시그널 앤 슬롯 (Signals & Slots) 관계 처럼 라벨 컨트롤이 라인 텍스트 컨트롤과 버디 관계임을 추가할 수 있습니다.

라벨 컨트롤을 드래그 하여 빨간 화살표를 나타낸 후 라인 에딧 컨트롤으로 보내서 놓으면 관계가 만들어 집니다.

& 글자는 라벨에 버디관계가 지정되어 있지 않으면 Name 의 N 에 밑줄이 아니고 & 이 그대로 표시됩니다.

만들어진 관계는 파란색 화살표로 나오게 됩니다.

3) Build 시 OK 를 누른 뒤 Alt + N 을 누르면 Name 에 N 에 밑줄이 표시되면서 자동으로 라인 컨트롤로 가게 됨을 볼 수 있습니다.

7. 탭 순서 (지정)

Tab 을 누르면 포커스가 이동이 되는 순서를 지정할 수 있습니다.

Edit Tab Order 를 누른 뒤 클릭하여 숫자를 변경하는 방식으로 순서를 바꿀 수 있습니다.

8. 추가

시그널 앤 슬롯을 추가하여 OK 인 경우 accept 시그널을 Cancel 인 경우 close 시그널을 추가합니다.

accept 시그널은 QWidget 에는 제공되지 않으므로 QDialog 가 아니면 보이지 않을 수 있습니다.

작업 파일 : 006_MyGui.zip