이 페이지의 최신 내용은 아직 번역되지 않았습니다. 최신 내용은 영문으로 볼 수 있습니다.

프로그래밍 방식으로 UI 레이아웃 설정하기

특정 속성값을 설정하여 구성요소의 크기와 위치를 조정하고 그룹화된 구성요소의 앞-뒤 순서를 관리할 수 있습니다. 여기에서는 이러한 속성을 사용하여 원하는 레이아웃을 얻는 방법을 설명합니다. 또한 SizeChangedFcn 콜백을 사용하여 UI의 크기 조정 동작을 제어하는 방법도 설명합니다.

구성요소 배치 및 크기 조정

UI 레이아웃은 하나의 Figure와 Figure 내에 배치하는 하나 이상의 구성요소로 구성됩니다. 각 구성요소를 정확히 배치하고 크기 조정하려면 특정 속성을 설정하고 Figure의 내부 경계와 외부 경계가 서로 어떻게 관련되어 있는지를 이해해야 합니다.

바깥쪽 경계와 그리기 가능 영역의 위치와 크기

UI 구성요소를 포함하는 Figure 내부의 영역을 그리기 가능 영역이라고 합니다. Figure 테두리, 제목 표시줄, 메뉴 모음, 도구 모음은 그리기 가능 영역에서 제외됩니다. Figure의 Position 속성을 요소를 4개 가진 행 벡터로 설정하여 그리기 가능 영역의 위치와 크기를 제어할 수 있습니다. 이 벡터의 처음 두 개 요소는 위치를 지정합니다. 마지막 두 개 요소는 크기를 지정합니다. 기본적으로 Figure의 Position 값은 픽셀 단위입니다.

다음 명령은 Figure를 생성하고 Position 값을 설정합니다. 그리기 가능 영역의 왼쪽 가장자리는 화면 왼쪽에서 258픽셀 떨어진 곳에 위치합니다. 아래쪽 가장자리는 화면의 하단에서 위로 132픽셀 떨어진 곳에 위치합니다. Figure의 크기는 560x420 픽셀(너비x높이)입니다.

f = figure('Position',[258 132 560 420]);

OuterPosition 속성을 사용하여 Figure의 바깥쪽 경계를 쿼리하거나 변경할 수 있습니다. Figure의 바깥쪽 경계로 둘러싸인 영역에는 Figure 테두리, 제목 표시줄, 메뉴 모음, 도구 모음이 포함됩니다. Position 속성처럼 OuterPosition은 요소를 4개 가진 행 벡터입니다.

f.OuterPosition
ans =

   250   124   576   512
이 Figure의 왼쪽 외부 가장자리는 화면 왼쪽에서 250픽셀 떨어진 곳에 위치합니다. 하단 외부 가장자리는 화면의 하단에서 위로 124픽셀 떨어진 곳에 위치합니다. Figure의 바깥쪽 경계로 둘러싸인 면적은 576픽셀(너비) x 512픽셀(높이)입니다.

Position 또는 OuterPosition을 명시적으로 변경하면 다른 속성도 변경됩니다. 예를 들어, 다음은 f의 현재 Position 값입니다.

f.Position
ans =

   258   132   560   420
OuterPosition을 변경하면 Position이 변경됩니다.
f.OuterPosition = [250 250 490 340];
f.Position
ans =

   258   258   474   248

uicontrol, uitable, uipanel과 같은 다른 UI 구성요소에는 Position 속성이 있으며 사용자는 이를 사용하여 위치와 크기를 설정할 수 있습니다.

측정 단위

Position 속성과 연결된 디폴트 단위는 배치하는 구성요소에 따라 달라집니다. 하지만 사용자는 Units 속성을 변경하여 직접 단위를 선택해 UI의 레이아웃을 설정할 수 있습니다. inches, centimeters, normalized, points, pixels, characters 등 6가지 측정 단위 중에서 선택할 수 있습니다.

가장 예측 가능한 결과를 얻으려면 Position 앞에 항상 Units를 지정하십시오.

f = figure('Units','inches','Position',[4 3 6 5]);

선택하는 단위에 따라 UI의 모양과 크기 조정 동작이 달라질 수 있습니다.

  • 사용자가 Figure 크기를 조정할 때 UI 구성요소의 크기가 Figure와 비례하여 조정되게 하려면 구성요소의 Units 속성을 'normalized'로 설정하십시오.

  • Units 속성이 'inches', 'centimeters', 'points', 'pixels' 또는 'characters'로 설정된 경우 UI 구성요소의 크기는 Figure 내에서 비례하여 크기 조정되지 않습니다.

  • 크로스 플랫폼 UI를 개발하는 경우, 모든 플랫폼 간의 레이아웃이 일관되도록 Units 속성을 'points' 또는 'characters'로 설정하십시오.

간단한 레이아웃의 예제

다음은 좌표축 및 버튼을 포함하는 간단한 앱의 코드입니다. 어떻게 작동하는지 확인하려면 이 코드를 복사해 편집기에 붙여 넣고 실행하십시오.

function myui
   % Add the UI components
   hs = addcomponents;
   
   % Make figure visible after adding components
   hs.fig.Visible = 'on';
   
   function hs = addcomponents
       % add components, save handles in a struct
       hs.fig = figure('Visible','off',...
                  'Resize','off',...
                  'Tag','fig');
       hs.btn = uicontrol(hs.fig,'Position',[10 340 70 30],...
                  'String','Plot Sine',...
                  'Tag','button',...
                  'Callback',@plotsine);
       hs.ax = axes('Parent',hs.fig,...
                 'Position',[0.20 0.13 0.71 0.75],...
                 'Tag','ax');
   end

   function plotsine(hObject,event)
       theta = 0:pi/64:6*pi;
       y = sin(theta);
       plot(hs.ax,theta,y);
   end
end
이 코드는 다음 작업을 수행합니다.

  • 메인 함수 myuiaddcomponents 함수를 호출합니다. addcomponents 함수는 모든 UI 구성요소에 대한 핸들을 포함하는 구조체 hs를 반환합니다.

  • addcomponents 함수는 각각 특정한 Position 값을 갖는 Figure, 좌표축, 버튼을 생성합니다.

    • Figure의 Resize 속성이 'off'임에 주목하십시오. 이 값은 Figure의 크기 조정 기능을 비활성화합니다.

    • Figure의 Visible 속성이 addcomponents 함수 내에서 'off'임을 주목하십시오. 이 값은 addcomponents가 호출하는 함수로 돌아간 후 'on'으로 변경됩니다. 이렇게 하면 MATLAB®이 모든 구성요소를 추가할 때까지 Figure 표시가 지연됩니다. 따라서 결과로 생성되는 UI는 시작 시 깔끔하게 표시됩니다.

  • plotsine 함수는 사용자가 버튼을 클릭하면 좌표축 내에 사인 함수를 플로팅합니다.

크기 조정 가능한 UI에서 레이아웃 관리하기

크기 조정 가능한 UI를 생성하고, 사용자가 창 크기를 조정할 때의 레이아웃을 관리하려면 Figure의 SizeChangedFcn 속성을 콜백 함수에 대한 핸들로 설정하십시오. 콜백 함수를 코딩하여 창 크기가 변경될 때의 레이아웃을 관리할 수 있습니다.

UI에 uipanel 또는 uibuttongroup과 같은 다른 컨테이너가 있는 경우 SizeChangedFcn 속성에 할당하는 개별 콜백 함수에서 컨테이너의 하위(자식) 구성요소의 레이아웃을 관리할 수 있습니다.

SizeChangedFcn 콜백은 다음 상황에서만 실행됩니다.

  • 컨테이너가 처음으로 표시되는 경우.

  • 그리기 가능 영역이 변경되는 동안 컨테이너가 표시되는 경우.

  • 그리기 가능 영역이 변경된 후 컨테이너가 처음으로 표시되는 경우. 이런 상황은 컨테이너가 표시되지 않는 동안 그리기 가능 영역이 변경되고 이 객체가 나중에 표시될 때 발생합니다.

참고

일반적으로, 그리기 가능 영역은 바깥쪽 경계가 변경될 때 이와 동시에 변경됩니다. 그러나, 메뉴 모음이나 도구 모음을 Figure에 추가하거나 제거하면 바깥쪽 경계가 변경되지만 그리기 가능 영역은 일정하게 유지됩니다. 따라서 메뉴 모음이나 도구 모음을 추가하거나 제거할 때 SizeChangedFcn 콜백이 실행되지 않습니다.

이 앱은 간단한 레이아웃의 예제에 정의된 간단한 앱의 크기 조정이 가능한 버전입니다. 다음 코드에는 resizeui라고 하는 Figure의 SizeChangedFcn 콜백이 포함되어 있습니다. resizeui 함수는 사용자가 창의 크기를 조정할 때 버튼 및 좌표축에 대해 새 Position 값을 계산합니다. 버튼은 사용자가 창의 크기를 조정할 때 고정 상태로 표시됩니다. 좌표축은 Figure를 따라 크기가 조정됩니다.

function myui
   % Add the UI components
   hs = addcomponents;
   
   % Make figure visible after adding components
   hs.fig.Visible = 'on';
   
   function hs = addcomponents
       % Add components, save handles in a struct
       hs.fig = figure('Visible','off',...
                  'Tag','fig',...
                  'SizeChangedFcn',@resizeui);
       hs.btn = uicontrol(hs.fig,'String',...
                  'Plot Sine',...
                  'Callback',@plotsine,...
                  'Tag','button');
       hs.ax = axes('Parent',hs.fig,...
                  'Units','pixels',...
                  'Tag','ax');
   end

   function plotsine(hObject,event)
       theta = 0:pi/64:6*pi;
       y = sin(theta);
       plot(hs.ax,theta,y);
   end

   function resizeui(hObject,event)
           
       % Get figure width and height
       figwidth = hs.fig.Position(3);
       figheight = hs.fig.Position(4);
       
       % Set button position
       bheight = 30; 
       bwidth = 70;
       bbottomedge = figheight - bheight - 50;
       bleftedge = 10;
       hs.btn.Position = [bleftedge bbottomedge bwidth bheight];
       
       % Set axes position
       axheight = .75*figheight;
       axbottomedge = max(0,figheight - axheight - 30);
       axleftedge = bleftedge + bwidth + 30;
       axwidth = max(0,figwidth - axleftedge - 50);
       hs.ax.Position = [axleftedge axbottomedge axwidth axheight];
   end
end
resizeui 함수는 사용자가 창의 크기를 조정할 때마다 버튼 및 좌표축의 위치와 크기를 설정합니다.

  • 버튼 높이, 너비, 왼쪽 가장자리는 창의 크기가 조정되어도 그대로 유지됩니다.

  • 버튼의 아래쪽 가장자리 bbottomedge는 Figure 상단과 버튼 상단에 사이에 50픽셀의 공간을 둡니다.

  • 좌표축 높이의 값 axheight는 Figure에서 사용 가능한 높이의 75%입니다.

  • 좌표축 아래쪽 가장자리의 값 axbottomedge는 Figure 상단과 좌표축 상단 사이에 30픽셀의 공간을 둡니다. 이 계산에서 max 함수는 이 값을 음이 아닌 값으로 제한합니다.

  • 좌표축 너비의 값 axwidth는 좌표축의 오른쪽과 Figure의 오른쪽 가장자리 사이에 50픽셀의 공간을 둡니다. 이 계산에서 max 함수는 이 값을 음이 아닌 값으로 제한합니다.

모든 레이아웃 코드는 resizeui 함수 내에 있음을 기억하십시오. 가장 정확한 결과가 반환되도록 하려면 SizeChangedFcn 콜백 내에 모든 레이아웃 코드를 넣는 것이 좋습니다.

또한, SizeChangedFcn 콜백이 사용하는 모든 변수가 정의될 때까지 전체 UI 창의 표시를 지연시키는 것이 중요합니다. 이렇게 하면 SizeChangedFcn 콜백에서 오류가 반환되는 것을 방지할 수 있습니다. 창이 표시되는 것을 지연시키려면 Figure의 Visible 속성을 'off'로 설정하십시오. SizeChangedFcn 콜백이 사용하는 모든 변수를 정의한 후에 Visible 속성을 'on'으로 설정하십시오.

그룹화된 구성요소의 쌓임 순서 관리하기

구성요소의 디폴트 앞-뒤 순서, 즉 쌓임 순서는 다음과 같습니다.

  • 좌표축 및 기타 그래픽스 객체는 다른 구성요소 뒤에 나타납니다. UI 구성요소 및 컨테이너(uipanel, uibuttongroup, uitab)는 다른 구성요소 앞에 나타납니다.

  • UI 구성요소 및 컨테이너는 만든 순서대로 나타납니다. 새 구성요소는 기존 구성요소의 앞에 나타납니다.

언제든지 쌓임 순서를 변경할 수 있지만, 몇 가지 제한 사항이 있습니다. 좌표축 및 기타 그래픽스 객체는 서로 간에는 어떠한 순서로든 쌓일 수 있습니다. 그러나, UI 구성요소와 컨테이너 앞에는 좌표축 및 기타 그래픽스 객체를 배치할 수 없습니다. 이들은 항상 UI 구성요소와 컨테이너 뒤에 나타납니다.

그래픽스 객체를 개별 컨테이너로 그룹화하여 이러한 제한 사항에 제약 받지 않을 수 있습니다. 그룹화하면 컨테이너를 원하는 순서로 배치할 수 있습니다. 그래픽스 객체를 컨테이너로 그룹화하려면 Parent 속성을 해당 컨테이너로 설정하십시오. 예를 들어, 좌표축의 Parent 속성을 uipanel로 설정하여 좌표축을 uipanel로 그룹화할 수 있습니다.

uipanel, uibuttongroup 또는 uitab의 Children 속성은 해당 쌓임 순서에 따라 컨테이너 내에 하위(자식) 객체를 나열합니다.

관련 항목