Main Content

앱 작성 컴포넌트

앱 디자이너 및 UI Figure는 완전한 기능을 갖춘 현대적 애플리케이션을 설계하는 데 사용할 수 있는 여러 다양한 컴포넌트를 지원합니다. 아래 표에는 사용할 수 있는 컴포넌트가 나열되어 있습니다.

  • 일반 컴포넌트 — 버튼, 슬라이더, 드롭다운 목록, 트리 등의 상호 작용에 응답하는 컴포넌트를 포함합니다.

  • 좌표축 — 데이터 시각화 및 탐색을 위한 플롯을 생성하기 위한 좌표축을 포함합니다.

  • 컨테이너 및 Figure 툴 — 컴포넌트를 그룹화하는 데 사용할 수 있는 패널 및 탭과 메뉴 모음을 포함합니다.

  • 계측 컴포넌트 — 상태를 시각화하는데 사용할 수 있는 계기판 및 램프와 입력 파라미터 선택에 사용할 수 있는 노브 및 스위치를 포함합니다.

  • 확장 가능 컴포넌트 — 사용자가 작성하는 사용자 지정 UI 컴포넌트를 포함합니다. 위젯 또는 데이터 시각화와 같은 내용을 표시하기 위해 타사 라이브러리와 상호 작용합니다.

  • 툴박스 컴포넌트 — 툴박스로 작성된 UI 컴포넌트를 포함합니다. 추가적인 툴박스 라이선스 및 설치가 필요합니다.

모든 컴포넌트는 프로그래밍 방식으로 사용 가능합니다. 또한 대부분의 UI 컴포넌트는 앱 디자이너 컴포넌트 라이브러리에서 캔버스로 끌어서 놓을 수 있습니다. 앱 디자이너로 만든 앱에 컴포넌트 라이브러리에서 사용할 수 없거나 실행 중인 앱에 동적으로 추가하려는 컴포넌트를 추가하려면 프로그래밍 방식으로 UI 컴포넌트를 앱 디자이너에 추가하기 항목을 참조하십시오.

앱 디자이너에서 그래픽스 함수를 호출하면 일반적으로 MATLAB® 명령줄에서 사용하는 것과는 워크플로가 약간 다릅니다. 앱 디자이너에서 그래픽스 함수를 호출하는 방법에 대한 자세한 내용은 앱 디자이너에서 그래픽스 표시하기 항목을 참조하십시오.

일반 컴포넌트

컴포넌트 정보예제
Button 속성

Push button with a bar chart icon to the left of the label "Plot Data"

CheckBox 속성

A cleared check box labeled "Remove Outliers" and a selected check box beneath it labeled "Add Trendline"

ColorPicker Properties

Color picker component. The color picker is expanded and shows a set of standard colors and recent colors and a preview of the selected color.

DatePicker 속성

An expanded date picker that displays drop-down menus for month and year, and the calendar for your selection. It also has icons that switch the calendar view to the previous month, the current date, or the next month.

DropDown 속성

Two drop-down components. The top drop-down is editable and collapsed. The bottom drop-down component is not editable. It is expanded and shows items "Red", "Green", and "Blue".

NumericEditField Properties

Numeric edit field that shows the number 12. The edit field label is "Sample Size".

EditField 속성

A text edit field for entering a name displays "Cleve"

Hyperlink Properties

A hyperlink with the display text "MathWorks home page" and a tooltip that displays the URL of the MathWorks website.

Image Properties

An image component showing the MathWorks L-shaped Membrane logo

Label 속성

Label that says "Select an Option" in bold font

ListBox 속성

List box with three items: "Red", "Green", and "Blue"

ButtonGroup Properties
RadioButton Properties

Button group labeled "Select a Color" with three vertically stacked radio buttons. From top to bottom, the radio buttons are labeled "Red", "Green", and "Blue".

Slider 속성

Two slider components, both with limits ranging from zero to 100. The slider on the left is in a horizontal orientation. Its value is set to 40. The slider on the right is in a vertical orientation and its value is set to 75.

RangeSlider Properties

Two range slider components, both with limits ranging from zero to 100. The slider on the left is in a horizontal orientation with a range of values between 20 and 60. The slider on the right is in a vertical orientation with a range of values between 10 and 90.

Spinner Properties

Spinner component with its value set to zero

StateButton 속성

Two state buttons stacked vertically. The top button is labeled "Start". It is light gray in color. The bottom button labeled "Stop" is a darker gray.

Table 속성

A table UI component that shows three columns: "LastName", "Age", and "Smoker". The table is sorted by last name in ascending order. The first two cells in the "Age" column are greater than 40 and appear in blue bold font. The third cell in the "Smoker" column shows a selected check box and the background color of the cell is yellow.

TextArea 속성

Text area with the text "This sample might be an outlier"

ButtonGroup Properties
ToggleButton Properties

Toggle button group labeled "Water Temperature (C)". It contains three vertically stacked toggle buttons. From top to bottom the buttons are labeled "0", "40", and "100". The "40" button is a darker gray color.

Tree Properties
TreeNode 속성

A tree with one node called "Samples" that is expanded to show its two nested nodes "Cape Ann" and "Nantucket". Each of these three nodes shows a blue file icon to the left of their label text. The "Cape Ann" node is also expanded to show two nested nodes called "Water Quality" and "Air Quality".

CheckBoxTree Properties
TreeNode 속성

A tree with three parent nodes called "Sedimentary", "Igneous", and "Metamorphic". The node called "Sedimentary" is unchecked and collapsed, the node called "Igneous" is checked and collapsed, and the node called "Metamorphic" is partially checked and expanded to show its nested nodes "Slate" , "Marble", and "Gneiss". Each of the nodes shows a check box to the left of their label text.

좌표축

좌표축 정보예제
UIAxes 속성

A mesh surface plot

Axes 속성
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Two normalized histogram plots in the same axes. A blue histogram is centered near zero and an orange one is centered near one.

GeographicAxes Properties
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Set of geographic axes that uses the 'colorterrain' basemap. A solid red line is plotted between two points: Imperial Beach, California and San Francisco, California. The two end points are marked with red asterisks.

PolarAxes 속성
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Scatter chart in polar coordinates

컨테이너 및 Figure 툴

컨테이너 정보예제

GridLayout Properties

Grid layout manager shown as selected on the App Designer canvas. The cursor is over the configure icon, and a tooltip next to it says "Configure grid layout".

Panel Properties

Empty panel with the label "Data".

TabGroup Properties
Tab Properties

Tab group with two tabs called "Data" and "Plots". The "Data" tab is selected. It is a lighter gray than the "Plots" tab.

Menu 속성

Menu bar with the "File" menu expanded to show three submenus called "Open", "Save", and "Export"

ContextMenu 속성

A context menu for a date picker component. The context menu has two menu items called "Change Format" and "Restore Defaults".

Toolbar Properties
PushTool Properties
ToggleTool Properties

Custom toolbar that, from left to right, shows an orange download icon, a dark gray email icon, and an orange help icon with a vertical separator to the left of it

대화 상자 및 알림

대화 상자 정보예제
uialert
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

An Invalid File dialog box displayed in front of a UI figure. A red octagon icon with a white exclamation point appears to the left of an alert message that says "File not found".

uiconfirm
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

A Confirm Save dialog box with the message "Saving these changes will overwrite previous changes." The options it presents are "Overwrite", "Save as new", and "Cancel".

uiprogressdlg
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

A progress dialog box displayed in front of a UI figure. The message displayed above the progress bar says "Loading your data". A blue progress bar shows that the process is one-third complete.

uisetcolor
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Color picker dialog box that shows the standard colors, recent colors, and preview of the default color which is set to yellow

uigetfile
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

File selection dialog box

uiputfile
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Save to file dialog box

uigetdir
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Folder selection dialog box

uiopen
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Load file into workspace dialog box

uisave
이 객체는 프로그래밍 방식으로만 추가할 수 있습니다.

Save workspace variables dialog box

계측

컴포넌트 정보예제
Gauge Properties

Circular gauge with limits ranging from zero to 100 and a value set to 60

NinetyDegreeGauge Properties

Ninety degree gauge with limits ranging from zero to 100 and a value set to 60

LinearGauge Properties

Linear gauge with limits ranging from zero to 100 and a value set to 60

SemicircularGauge Properties

Semicircular gauge with limits ranging from zero to 100 and a value set to 60

Knob Properties

Knob with limits ranging from zero to 100. The value is set to zero.

DiscreteKnob Properties

Discrete knob with items, "Off", "Low", "Medium", and "High". The knob value is set to "Off."

Lamp 속성

Lamp component with green color

Switch 속성

Slider switch with the slider to the left in the off position

RockerSwitch Properties

Rocker switch oriented vertically. The bottom of the rocker is pressed into the "Off" position.

ToggleSwitch 속성

Toggle switch oriented vertically. The switch is toggled downward into the "Off" position.

확장 가능 컴포넌트

컴포넌트 정보예제

matlab.ui.componentcontainer.ComponentContainer 클래스

matlab.graphics.chartcontainer.ChartContainer 클래스

Component container that combines a custom chart and custom color picker component along with a check box and a spinner.

HTML Properties

Two HTML UI components stacked vertically. The top component shows formatted text and the bottom component shows a web page.

툴박스 컴포넌트

앱 디자이너에서 생성된 앱이나 uifigure 함수로 생성된 앱은 여러 추가 제품의 컴포넌트를 지원합니다. 이러한 컴포넌트를 사용하려면 해당 제품이 설치되어 있고 유효한 라이선스가 있어야 합니다.

관련 항목