Main Content

uidropdown

드롭다운 컴포넌트 생성

설명

dd = uidropdown은 새 Figure 창에 드롭다운 컴포넌트를 만들고 DropDown 객체를 반환합니다. MATLAB®uifigure 함수를 호출하여 Figure를 만듭니다.

예제

dd = uidropdown(parent)는 지정된 부모 컨테이너에 드롭다운 컴포넌트를 만듭니다. 부모 컨테이너는 uifigure 함수를 사용하여 만든 Figure 객체이거나 그 자식 컨테이너 중 하나일 수 있습니다.

예제

dd = uidropdown(___,Name,Value)는 하나 이상의 이름-값 인수를 사용하여 DropDown 속성을 지정합니다. 예를 들어, uidropdown("Editable","on")은 입력이 가능한 드롭다운 컴포넌트를 만듭니다. 위에 열거된 구문에 나와 있는 입력 인수를 조합하여 이 옵션과 함께 사용하십시오.

예제

모두 축소

디폴트 항목을 가지는 드롭다운 컴포넌트를 만듭니다.

fig = uifigure;
dd = uidropdown(fig);

Figure contains an object of type uidropdown.

컴포넌트의 아무 곳이나 클릭하여 드롭다운 목록을 엽니다.

UI figure with a drop-down component. The drop-down has four options, labeled "Option 1" through "Option 4".

UI Figure에 편집 가능한 드롭다운 컴포넌트를 만듭니다. 사용자는 드롭다운 화살표를 클릭하여 기존 항목에서 선택하거나, 컴포넌트를 클릭하여 항목 자체의 값을 텍스트로 입력할 수 있습니다.

fig = uifigure;
dd = uidropdown(fig,"Editable","on");

Figure contains an object of type uidropdown.

UI Figure에 드롭다운 컴포넌트를 만들고 항목을 지정합니다.

fig = uifigure;
dd = uidropdown(fig,"Items",["Red","Yellow","Blue","Green"]);

UI figure with a drop-down component. The value of the drop-down component is "Red".

선택한 항목과 관련된 값을 결정합니다. ItemsData 속성이 비어 있는 경우(디폴트 값) 드롭다운 컴포넌트 Value 속성은 Items 속성에 표시되는 대로 선택한 항목의 이름을 저장합니다.

value = dd.Value
value =

    'Red'

ItemsData 속성을 지정하여 각 드롭다운 컴포넌트 항목과 16진수 색 코드를 연결합니다.

dd.ItemsData = ["#F00" "#FF0" "#00F" "#0F0"];

ItemsData가 비어 있지 않은 경우 드롭다운 컴포넌트 Value 속성은 선택한 항목과 관련된 데이터를 저장합니다.

value = dd.Value
value =

    "#F00"

R2023a 이후

세 개의 항목이 있는 드롭다운 UI 컴포넌트를 만듭니다.

fig = uifigure;
dd = uidropdown(fig,"Items",["Good","Fair","Poor"]);

세 개의 배경색 스타일을 만듭니다.

s1 = uistyle("BackgroundColor","#77AC30");
s2 = uistyle("BackgroundColor","#EDB120");
s3 = uistyle("BackgroundColor","#F77A8F");

드롭다운 컴포넌트 항목에 스타일을 추가하여 해당 배경색을 변경합니다.

addStyle(dd,s1,"item",1);
addStyle(dd,s2,"item",2);
addStyle(dd,s3,"item",3);

항목 배경색이 업데이트되고, 컴포넌트의 모양에 선택한 항목의 스타일이 반영됩니다. 이 스타일은 사용자가 항목을 가리킬 때 표시되는 색은 변경하지 않습니다.

Drop-down UI component with three items. Each item has a different background color: The "Good" item is green, the "Fair" item is yellow, and the "Poor" item is red. The "Fair" item is selected and appears at the top of the component as yellow. The mouse cursor is pointing to the "Fair" item in the list, so that item is highlighted in blue.

앱 사용자가 드롭다운 목록에서 선택할 때 플로팅된 선의 색을 변경하는 앱을 만듭니다.

plotOptions.m이라는 파일에 다음과 같이 앱을 구현하는 함수를 작성합니다.

  • UI Figure와 그리드 레이아웃 관리자를 만들어 앱의 레이아웃을 설정합니다.

  • 그리드 레이아웃 관리자에서 UI 좌표축과 드롭다운 컴포넌트를 만듭니다.

  • 선택한 드롭다운 컴포넌트 항목에 따라 플롯 색을 변경하는 updatePlot이라는 콜백 함수를 작성한 다음, 이 함수를 ValueChangedFcn 콜백 속성에 할당합니다. 콜백에 대한 자세한 내용은 프로그래밍 방식으로 만든 앱에 대한 콜백 만들기 항목을 참조하십시오.

function plotOptions
fig = uifigure;
g = uigridlayout(fig);
g.RowHeight = {'1x','fit','1x'};
g.ColumnWidth = {'1x','fit'};

ax = uiaxes(g);
ax.Layout.Row = [1 3];
ax.Layout.Column = 1;

x = linspace(-2*pi,2*pi);
y = sin(x);
p = plot(ax,x,y,"Color","#F00");

dd = uidropdown(g, ...
    "Items",["Red","Yellow","Blue","Green"], ...
    "ItemsData",["#F00" "#FF0" "#00F" "#0F0"], ...
    "ValueChangedFcn",@(src,event) updatePlot(src,p));
dd.Layout.Row = 2;
dd.Layout.Column = 2;
end

function updatePlot(src,p)
val = src.Value;
p.Color = val;
end

plotOptions 함수를 실행합니다. 드롭다운 목록에서 항목을 선택하여 플롯 색을 변경합니다.

plotOptions

Figure contains an axes object and an object of type uigridlayout. The axes object contains an object of type line.

사용자가 표시할 이미지를 선택할 수 있는 앱을 만듭니다. 앱에 편집 가능한 드롭다운 컴포넌트가 포함되어 있으므로, 사용자가 기존 항목을 선택하거나 자체 값을 직접 입력할 수 있도록 코드를 작성합니다.

imageApp.m이라는 파일에 다음과 같이 앱을 구현하는 함수를 작성합니다.

  • UI Figure와 그리드 레이아웃 관리자를 만들어 앱의 레이아웃을 설정합니다.

  • 그리드 레이아웃 관리자에서 편집 가능한 드롭다운 컴포넌트와 이미지 컴포넌트를 만듭니다.

  • 선택한 드롭다운 컴포넌트 항목에 따라 이미지를 변경하는 updateImage라는 콜백 함수를 작성한 다음, 이 함수를 ValueChangedFcn 콜백 속성에 할당합니다. 콜백 이벤트 데이터를 쿼리하여 기존 항목에서 새 값이 선택되었는지 또는 사용자가 새 값을 입력했는지 확인한 다음, 사용자가 입력한 값의 유효성을 검사합니다. 콜백에 대한 자세한 내용은 프로그래밍 방식으로 만든 앱에 대한 콜백 만들기 항목을 참조하십시오.

function imageApp
fig = uifigure;
g = uigridlayout(fig,[2 3]);
g.RowHeight = {22,'1x'};
g.ColumnWidth = {'1x','fit','1x'};

dd = uidropdown(g, ...
    "Editable","on", ...
    "Items",["peppers.png","street1.jpg"]);
dd.Layout.Row = 1;
dd.Layout.Column = 2;

im = uiimage(g,"ImageSource","peppers.png");
im.Layout.Row = 2;
im.Layout.Column = [1 3];

dd.ValueChangedFcn = @(src,event)updateImage(src,event,im,fig);
end

function updateImage(src,event,im,fig)
val = src.Value;
if event.Edited && ~exist(val,"file")
    im.ImageSource = "";
    uialert(fig,"Enter a file on the MATLAB path","Invalid Image")
else
    im.ImageSource = val;
end
end

imageApp 함수를 실행하고, 기존 항목을 선택하거나 이미지 경로를 입력하여 이미지를 업데이트합니다.

UI figure window with a drop-down list and an image of cars on a street. The drop-down list has the text "street2.jpg" and a cursor.

입력 인수

모두 축소

부모 컨테이너로, uifigure 함수를 사용하여 만든 Figure 객체나 그 자식 컨테이너인 Tab, Panel, ButtonGroup, GridLayout 중 하나로 지정됩니다. 부모 컨테이너를 지정하지 않을 경우 MATLAB은 uifigure 함수를 호출하여 부모 컨테이너 역할을 하는 새 Figure 객체를 만듭니다.

이름-값 인수

선택적 인수 쌍을 Name1=Value1,...,NameN=ValueN으로 지정합니다. 여기서 Name은 인수 이름이고 Value는 대응값입니다. 이름-값 인수는 다른 인수 뒤에 와야 하지만, 인수 쌍의 순서는 상관없습니다.

예: uidropdown(Items=["Red","Yellow","Blue"])는 드롭다운 컴포넌트에 표시되는 옵션을 지정합니다.

R2021a 이전 릴리스에서는 쉼표를 사용하여 각 이름과 값을 구분하고 Name을 따옴표로 묶으십시오.

예: uidropdown("Items",["Red","Yellow","Blue"])는 드롭다운 컴포넌트에 표시되는 옵션을 지정합니다.

여기에 나와 있는 속성은 사용 가능한 속성의 일부에 불과합니다. 전체 목록을 보려면 DropDown 속성을 참조하십시오.

값으로, Items 또는 ItemsData 배열의 요소로 지정됩니다. 기본적으로 ValueItems의 첫 번째 요소입니다.

ValueItems의 요소로 지정하면 해당 요소와 일치하는 드롭다운 항목이 선택됩니다. ItemsData가 비어 있지 않으면 ValueItemsData의 요소로 설정해야 하며 드롭다운 목록에서 관련 항목이 선택됩니다.

Editable'on'으로 설정된 경우, 추가적으로 Value를 문자형 벡터나 string형 스칼라로 지정할 수 있습니다.

드롭다운 항목으로, 문자형 벡터로 구성된 셀형 배열, string형 배열 또는 1차원 categorical형 배열로 지정됩니다. 중복 요소가 허용됩니다. 드롭다운 컴포넌트는 Items 배열에 있는 요소 수만큼 옵션을 표시합니다. 이 속성을 categorical형 배열로 지정할 경우 MATLAB은 전체 범주 집합이 아닌 배열에 있는 값을 사용합니다.

예: {'Red','Yellow','Blue'}

예: {'1','2','3'}

Items 속성값의 각 요소와 관련된 데이터로, 1×n 숫자형 배열 또는 1×n 셀형 배열로 지정됩니다. 중복 요소가 허용됩니다.

예를 들어, Items 값을 직원 이름으로 설정하면 ItemsData 값을 해당 직원 ID 번호로 설정할 수 있습니다. 앱 사용자에게는 ItemsData 값이 표시되지 않습니다.

ItemsData 값과 Items 값의 배열 요소 수가 일치하지 않으면 다음 중 하나가 발생합니다.

  • ItemsData 값이 비어 있으면 Items 값의 모든 요소가 앱 사용자에게 표시됩니다.

  • ItemsData 값의 요소가 Items 값의 요소보다 많으면 Items 값의 모든 요소가 앱 사용자에게 표시됩니다. 하지만 MATLAB은 ItemsData의 추가 요소를 무시합니다.

  • ItemsData 값이 비어 있지 않지만 Items 값보다 적은 수의 요소가 있으면 앱 사용자에게는 ItemsData 값에 대응하는 요소를 가진 Items 값의 요소만 표시됩니다.

예: {'One','Two','Three'}

예: [10 20 30 40]

드롭다운 컴포넌트의 편집 가능 상태로, 'off' 또는 'on'이나 숫자형 값 또는 논리값 1(true) 또는 0(false)으로 지정됩니다. 값 'on'true와 동일하고 값 'off'false와 동일합니다. 따라서 이 속성의 값을 논리값으로 사용할 수 있습니다. 값은 matlab.lang.OnOffSwitchState 유형의 on/off 논리값으로 저장됩니다.

Enable 속성값이 'off'이면 앱 사용자는 Editable 속성값이 'on'인 경우에도 드롭다운 컴포넌트 텍스트를 변경할 수 없습니다.

값 변경 콜백으로, 다음 값 중 하나로 지정됩니다.

  • 함수 핸들.

  • 첫 번째 요소가 함수 핸들인 셀형 배열. 이 셀형 배열의 그 다음 요소들은 콜백 함수로 전달할 인수입니다.

  • 유효한 MATLAB 표현식이 포함된 문자형 벡터(권장되지 않음). MATLAB은 이 표현식을 기본 작업 공간에서 실행합니다.

이 콜백 함수는 사용자가 드롭다운 목록에서 다른 옵션을 선택할 때 실행됩니다. Value 속성이 프로그래밍 방식으로 변경되는 경우에는 실행되지 않습니다.

이 콜백 함수는 사용자와 드롭다운의 상호 작용에 대한 특정 정보에 액세스할 수 있습니다. MATLAB은 이 정보를 콜백 함수에 대한 두 번째 인수로서 ValueChangedData 객체에 전달합니다. 앱 디자이너에서는 이 인수를 event라고 부릅니다. 점 표기법을 사용하여 객체 속성을 쿼리할 수 있습니다. 예를 들어, event.PreviousValue는 드롭다운의 이전 값을 반환합니다. ValueChangedData 객체는 문자형 벡터로 지정된 콜백 함수에 사용할 수 없습니다.

다음 표에는 ValueChangedData 객체의 속성 목록이 나열되어 있습니다.

속성
Value앱 사용자의 가장 최근 상호 작용 직후의 드롭다운 컴포넌트 값.
PreviousValue앱 사용자의 가장 최근 상호 작용 직전의 드롭다운 컴포넌트 값.
Edited

드롭다운 컴포넌트에 새 값을 입력한 결과로 콜백이 실행되었는지 여부를 나타내는 논리값.

  • 0(false) — 앱 사용자가 드롭다운 컴포넌트의 Items 속성의 요소를 선택했거나 입력했습니다.

  • 1(true) — 앱 사용자가 드롭다운 컴포넌트의 Items 속성의 요소가 아닌 값을 입력했습니다.

Source콜백을 실행하는 컴포넌트.
EventName'ValueChanged'

콜백을 작성하는 방법에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오.

콜백을 여는 드롭다운 메뉴로, 다음 값 중 하나로 지정됩니다.

  • 함수 핸들.

  • 첫 번째 요소가 함수 핸들인 셀형 배열. 이 셀형 배열의 그 다음 요소들은 콜백 함수로 전달할 인수입니다.

  • 유효한 MATLAB 표현식이 포함된 문자형 벡터(권장되지 않음). MATLAB은 이 표현식을 기본 작업 공간에서 실행합니다.

이 속성은 사용자가 드롭다운 메뉴를 클릭하여 열 때 실행하는 콜백 함수를 지정합니다. 이 콜백은 드롭다운 메뉴 안의 항목으로 구성된 목록을 동적으로 업데이트하는 용도로 사용될 수 있습니다.

이 콜백 함수는 사용자와 드롭다운의 상호 작용에 대한 특정 정보에 액세스할 수 있습니다. MATLAB은 이 정보를 콜백 함수에 대한 두 번째 인수로서 DropDownOpeningData 객체에 전달합니다. 앱 디자이너에서는 이 인수를 event라고 부릅니다. 점 표기법을 사용하여 객체 속성을 쿼리할 수 있습니다. 예를 들어, event.Source는 사용자가 이 콜백을 트리거하기 위해 상호 작용하는 DropDown 객체를 반환합니다. DropDownOpeningData 객체는 문자형 벡터로 지정된 콜백 함수에 사용할 수 없습니다.

다음 표에는 DropDownOpeningData 객체의 속성 목록이 나열되어 있습니다.

속성
Source콜백을 실행하는 컴포넌트
EventName'DropDownOpening'

콜백을 작성하는 방법에 대한 자세한 내용은 앱 디자이너에서 콜백 사용하기 항목을 참조하십시오.

부모를 기준으로 한 드롭다운 컴포넌트의 위치 및 크기로, 벡터 [left bottom width height]로 지정됩니다. 다음 표에서는 벡터의 각 요소를 설명합니다.

요소설명
left부모 컨테이너의 왼쪽 내부 가장자리와 드롭다운 컴포넌트의 왼쪽 외부 가장자리 사이의 거리
bottom부모 컨테이너의 내부 하단 가장자리와 드롭다운 컴포넌트의 외부 하단 가장자리 사이의 거리
width드롭다운 컴포넌트의 오른쪽과 왼쪽 외부 가장자리 사이의 거리
height드롭다운 컴포넌트의 상단과 하단 외부 가장자리 사이의 거리

모든 측정값은 픽셀 단위입니다.

Position 값은 부모 컨테이너의 그리기 가능 영역을 기준으로 합니다. 그리기 가능 영역은 컨테이너의 경계 내부 영역이며 장식(예: 메뉴 모음, 제목)이 차지하는 영역은 포함되지 않습니다.

예: [100 100 100 22]

버전 내역

R2016a에 개발됨

모두 확장