GUI Designer 빠른 인터페이스 레이아웃 사용 설명서

1. 인터페 이스 레이 아 웃 소개 동일한 창 에서 컨트롤 을 배치 할 때 혼란 이 발생할 수 있으며 , T DF H UI 의 인터페 이스 레이 아 웃 및 네트워크 레이 아 웃 컨트롤 을 통해 인터페 이스 레이 아 웃 을 할 수 있습니다 . 2. 인터페 이스 레이 아 웃 을 수행 하는 방법 2. 1 컨트롤 추가 방법 프로젝트를 열 거나 새로 만들 면 일반적인 컨트롤 모듈 의 버튼 아이 콘 을 클릭 하고 6 개의 버튼 컨트롤 을 추가 하고 버튼 컨트롤 에 텍스트 표시 를 추가 합니다 . 자세한 작업 단계 및 방법은 그림 2. 1 과 같이 버튼 클래 스 사용 설명 서를 참조 하십시오 . 그림 2. 1 컨트롤 추가 2. 2 위 정 렬 을 설정 하는 방법 한 컨트롤 을 선택한 후 C tr l 키 를 누 른 다음 다른 컨트롤 을 선택 하여 여러 컨트롤 을 선택 하거나 마 우 스를 통해 여러 컨트롤 을 직접 선택 합니다 .두 개 이상의 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 위 쪽 정 렬 을 클릭 하여 그림 2. 2 와 같이 가장 위 쪽 컨트롤 을 기준 으로 선택한 컨트롤 을 위 쪽 정 렬 합니다 . 그림 2. 2 위 정 렬 2. 3 아래 쪽 정 렬 을 설정 하는 방법 여러 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 아래 쪽 정 렬 을 클릭 하면 그림 2. 3 과 같이 선택한 컨트롤 을 아래 쪽 정 렬 하여 가장 아래 쪽 을 기준 으로 할 수 있습니다 . 그림 2. 3 아래 쪽 정 렬 2. 4 왼쪽 정 렬 을 설정 하는 방법 여러 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 왼쪽 정 렬 을 클릭 하면 그림 2. 4 에 표시 된 것처럼 선택한 컨트롤 을 왼쪽 정 렬 하여 가장 왼쪽 을 기준 으로 정 렬 합니다 . 그림 2. 4 왼쪽 정 렬 2. 5 오른쪽 정 렬 을 설정 하는 방법 여러 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 오른쪽 정 렬 을 클릭 하면 그림 2. 4 와 같이 선택한 컨트롤 을 오른쪽 정 렬 하여 가장 오른쪽 을 기준 으로 정 렬 합니다 . 그림 2. 5 오른쪽 정 렬 2. 6 평 평 한 수준을 설정 하는 방법 여러 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 수 평 평 형을 클릭 하면 선택한 컨트롤 에 대한 수 평 평 형을 조정 할 수 있으며 양 쪽 컨트롤 은 변경 되지 않으며 중간 컨트롤 의 위치 조 정은 그림 2. 6 과 같이 중간 컨트롤 과 양 쪽 컨트롤 의 수 평 평 형을 달성 합니다 . 그림 2. 6 수 평 평 2. 7 수 평 중심 에 설정 하는 방법 여러 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 수 평 중앙 을 클릭 하면 선택한 컨트롤 에 대한 수 평 중앙 조정 , 선택한 컨트롤 위치를 조정 하여 중간 위치 와 창의 왼쪽 및 왼쪽 위치 의 거 리가 같 도록 조정 할 수 있습니다 . 그림 2. 7 과 같이 표시 됩니다 . 그림 2. 7 중간 수준 2. 8 수 직 등 거 리를 설정 하는 방법 여러 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 수 직 등 거리 를 클릭 하면 선택한 컨트롤 에 대한 수 직 등 거리 조 정을 수행 할 수 있으며 양 쪽 컨트롤 은 변경 되지 않으며 중간 컨트롤 의 위치 조 정은 그림 2. 8 과 같이 중간 컨트롤 과 양 쪽 컨트롤 의 수준 등 거리 입니다 . 그림 2. 8 수 직 등 거리 2. 9 수 직 중심 설정 방법 여러 컨트롤 을 선택 하고 레이 아 웃 모듈 에서 수 직 중앙 을 클릭 하면 선택한 컨트롤 에 대한 수 직 중앙 조 정을 수행 하고 선택한 컨트롤 위치를 조정 하여 중간 위치 와 창의 왼쪽 및 왼쪽 위치 의 거 리가 같 도록 조정 합니다 . 그림 2. 9 와 같이 . 그림 2. 9 수 직 중심 네트워크 레이 아 웃 을 사용하는 방법 네트워크 레이 아 웃 을 추가 하고 컨트롤 을 추가 하면 인터페 이스 레이 아 웃 보다 빠르고 간단 하게 추가 된 컨트롤 을 직접 레이 아 웃 할 수 있습니다 . 3. 1 네트워크 레이 아 웃 을 추가 하는 방법 도구 상 자 에서 컨 테 이너 클래 스 컨트롤 을 클릭 하고 네트워크 레이 아 웃 컨트롤 을 선택 하여 그림 3. 1 과 같이 네트워크 레이 아 웃 컨트롤 을 추가 할 수 있습니다 . 그림 3. 1 네트워크 레이아웃 컨트롤 추가 3. 2 이미지 대체 방법 네트워크 레이아웃 컨트롤을 선택하고 오른쪽 속성 창에서 이미지를 클릭하여 배경의 이미지 대체를 설정하고 그림 3. 2 와 같이 네트워크 레이아웃의 디스플레이를 설정합니다. 그림 3. 2 이미지 대체 3. 3 기타 설정 방법 네트워크 레이아웃 컨트롤을 선택하고 오른쪽 속성 창에서 기타를 클릭하여 그림 3. 3 과 같이 메쉬의 높이의 폭을 설정하고 메쉬의 정렬을 설정합니다. 그림 3. 3 Miscellaneous 설정 3. 3. 1 높은 격자 폭을 설정하는 방법 격자 폭 높이 아래 입력 상자를 선택하고 키보드 또는 "+ "-" 버튼을 통해 격자 폭 높이를 설정할 수 있습니다. 네트워크 레이아웃 컨트롤 설정 격자 폭과 격자 높이는 네트워크 레이아웃 컨트롤을 균등하게 분할합니다. 격자 폭은 2 격자 높이는 2 격자 폭은 네트워크 레이아웃 컨트롤을 4 개의 격자로 분할하고 그림 3. 4 와 같이 4 개의 컨트롤을 추가할 수 있습니다. 그림 3. 4 메쉬 설정 3. 3. 2 메쉬 정렬 설정 방법 그리드의 수평 수직 정렬 아래의 버튼을 클릭하면 중앙, 왼쪽 정렬 및 오른쪽 정렬이 있는 드롭다운 상자가 표시됩니다. 중앙을 선택하면 컨트롤의 수평 수직 정렬이 중앙, 왼쪽 정렬을 선택하면 왼쪽 정렬, 오른쪽 정렬을 선택하면 오른쪽 정렬이 표시됩니다. 그림 3. 5 에 표시된 것처럼. 그림 3. 5 메쉬 정렬