Main Content

uidropdown

ドロップダウン コンポーネントを作成

説明

dd = uidropdown は、ドロップダウン コンポーネントを新しい Figure ウィンドウ内に作成し、DropDown オブジェクトを返します。MATLAB® は関数 uifigure を呼び出してこの Figure を作成します。

dd = uidropdown(parent) は、指定された親コンテナー内にドロップダウン コンポーネントを作成します。親には、関数 uifigure を使用して作成された Figure オブジェクトか、またはその子コンテナーのいずれかを指定できます。

dd = uidropdown(___,Name,Value) は、1 つ以上の名前と値の引数を使用して、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 以降

3 つの項目を含むドロップダウン UI コンポーネントを作成します。

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

背景色スタイルを 3 つ作成します。

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 オブジェクト、またはその子コンテナー (TabPanelButtonGroup または 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 スカラーとして追加で指定できます。

ドロップダウン項目。文字ベクトルの cell 配列、string 配列、または 1 次元の categorical 配列として指定します。重複する要素を使用できます。ドロップダウン コンポーネントには Items の配列の要素数と同数のオプションが表示されます。このプロパティを categorical 配列として指定した場合、MATLAB はカテゴリの完全なセットではなく、配列内の値を使用します。

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

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

Items プロパティ値の各要素に関連付けるデータ。1 行 n 列の数値配列または 1 行 n 列の cell 配列として指定します。重複する要素を使用できます。

たとえば、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'、もしくは数値または logical 1 (true) または 0 (false) として指定します。'on' の値は true と等価であり、'off'false と等価です。したがって、このプロパティの値を logical 値として使用できます。値は matlab.lang.OnOffSwitchState 型の on/off logical 値として格納されます。

Enable プロパティ値が 'off' である場合、編集可否のプロパティ値が 'on' でもアプリ ユーザーはドロップダウン コンポーネントのテキストを変更できません。

値が変更されたときのコールバック。次の値のいずれかとして指定します。

  • 関数ハンドル。

  • 最初の要素が関数ハンドルである cell 配列。cell 配列内のその後の要素はコールバック関数に渡される引数です。

  • 有効な MATLAB 式を含む文字ベクトル (非推奨)。MATLAB は、この式をベース ワークスペースで評価します。

このコールバック関数は、ドロップダウン リストから別のオプションを選択するときに実行されます。Value プロパティがプログラムにより変更される場合には実行されません。

このコールバック関数は、ユーザーのドロップダウン操作に関する特定の情報にアクセスできます。MATLAB は、この情報を ValueChangedData オブジェクトに格納して、2 番目の引数としてコールバック関数に渡します。App Designer では、引数は event と呼ばれます。ドット表記を使用して、オブジェクトのプロパティをクエリできます。たとえば、event.PreviousValue はドロップダウンの直前の値を返します。ValueChangedData オブジェクトは、文字ベクトルとして指定されているコールバック関数では使用できません。

次の表に、ValueChangedData オブジェクトのプロパティを示します。

プロパティ
Valueアプリ ユーザーによる最新操作の後のドロップダウン コンポーネントの値。
PreviousValueアプリ ユーザーによる最新操作の前のドロップダウン コンポーネントの値。
Edited

ドロップダウン コンポーネントに新しい値を入力した結果としてコールバックが実行されたかどうかを示す logical 値。

  • 0 (false) — アプリ ユーザーがドロップダウン コンポーネント Items プロパティの要素を選択または入力した場合。

  • 1 (true) — アプリ ユーザーがドロップダウン コンポーネントの Items プロパティの要素でない値を入力した場合。

Sourceコールバックを実行するコンポーネント。
EventName'ValueChanged'

コールバックの記述の詳細については、App Designer のコールバックを参照してください。

ドロップダウン メニューを開くときのコールバック。次の値のいずれかとして指定します。

  • 関数ハンドル。

  • 最初の要素が関数ハンドルである cell 配列。cell 配列内のその後の要素はコールバック関数に渡される引数です。

  • 有効な MATLAB 式を含む文字ベクトル (非推奨)。MATLAB は、この式をベース ワークスペースで評価します。

このプロパティは、ユーザーがクリックしてドロップダウン メニューを開いたときに実行するコールバック関数を指定します。このコールバックの使用方法として、ドロップダウン メニューのエントリのリストの動的な更新があります。

このコールバック関数は、ユーザーのドロップダウン操作に関する特定の情報にアクセスできます。MATLAB は、この情報を DropDownOpeningData オブジェクトに格納して、2 番目の引数としてコールバック関数に渡します。App Designer では、引数は event と呼ばれます。ドット表記を使用して、オブジェクトのプロパティをクエリできます。たとえば、event.Source は、ユーザーの操作に応じてコールバックをトリガーする DropDown オブジェクトを返します。DropDownOpeningData オブジェクトは、文字ベクトルとして指定されているコールバック関数では使用できません。

次の表に、DropDownOpeningData オブジェクトのプロパティを示します。

プロパティ
Sourceコールバックを実行するコンポーネント
EventName'DropDownOpening'

コールバックの記述の詳細については、App Designer のコールバックを参照してください。

親を基準にしたドロップダウン コンポーネントの位置とサイズ。ベクトル [left bottom width height] として指定します。次の表で、ベクトルの各要素について説明します。

要素説明
left親コンテナーの内側左端からドロップダウン コンポーネントの外側左端までの距離
bottom親コンテナーの内側下端からドロップダウン コンポーネントの外側下端までの距離
widthドロップダウン コンポーネントの外側の右端と左端の間の距離
heightドロップダウン コンポーネントの外側の上端と下端の間の距離

すべての測定単位はピクセルです。

Position の値の基準は、親コンテナーの "描画可能領域" です。描画可能領域は、コンテナーの境界線の内側にある領域で、メニュー バーやタイトルなどの装飾が占める領域は含まれません。

例: [100 100 100 22]

バージョン履歴

R2016a で導入

すべて展開する