DropDown
ドロップダウン UI コンポーネント
説明
ドロップダウン UI コンポーネントを使用して、アプリ ユーザーはオプションを選択したり、テキスト入力したりすることができます。DropDown オブジェクトを使用して、ドロップダウン リストの作成後にドロップダウン リストの外観と動作を変更します。
作成
uidropdown 関数を使用してアプリでドロップダウン リストを作成します。
プロパティ
ドロップダウン
項目または項目データのリスト内のコンポーネント値のインデックス。正の整数として指定します。
ほとんどの場合、Value プロパティを使用して、コンポーネント値のクエリと更新を行えます。ただし、ValueIndex プロパティが有用なのは、Items と ItemsData のプロパティが両方とも空ではないときです。この場合、ValueIndex プロパティを使用して、現在の値に対応する Items の要素をクエリできます。
fig = uifigure; dd = uidropdown(fig, ... "Items",["Red","Green","Blue"], ... "ItemsData",["#F00","#0F0","#00F"]); idx = dd.ValueIndex; disp(dd.Items(idx) + ": " + dd.Value)
Red: #F00
ドロップダウン コンポーネントの Editable プロパティが 'on' に設定されている場合、ValueIndex を空の配列 ([]) として指定することもできます。アプリ ユーザーが Items 内の項目に対応しない値をコンポーネントに入力すると、MATLAB は ValueIndex プロパティを空の配列に設定します。ValueIndex を空の配列に設定すると、MATLAB は Value プロパティを '' に設定します。
プレースホルダー テキスト。文字ベクトルまたは string スカラーとして指定します。プレースホルダーは、ドロップダウン項目の短い説明を提示します。プレースホルダー テキストは、ドロップダウン コンポーネントに '' が表示される場合にのみ表示されます。これが当てはまるのは、以下の 2 つの場合です。
Valueプロパティが''に設定されている。Valueプロパティが、対応する項目が''であるItemsDataの要素に設定されている。
たとえば、ItemsData をもたないドロップダウン コンポーネントでプレースホルダーを表示するには、以下のように '' を Items に追加し、Value プロパティを '' に設定します。
fig = uifigure('Position',[100 100 300 200]); dd = uidropdown(fig,'Items',{'','One','Two'}, ... 'Value','', ... 'Placeholder','Options');
フォントと色
フォントの色。RGB 3 成分、16 進数カラー コードまたは表にリストされたオプションのいずれかとして指定します。
RGB 3 成分および 16 進数カラー コードは、カスタム色を指定するのに役立ちます。
RGB 3 成分は、色の赤、緑、青成分の強度を指定する 3 成分の行ベクトルです。強度値は
[0,1]の範囲でなければなりません。たとえば[0.4 0.6 0.7]のようになります。16 進数カラー コードは、ハッシュ記号 (
#) で始まり、3 桁または 6 桁の0からFまでの範囲の 16 進数が続く文字ベクトルまたは string スカラーです。この値は大文字と小文字を区別しません。したがって、カラー コード"#FF8800"、"#ff8800"、"#F80"、および"#f80"は等価です。
あるいは、名前を使用して一部の一般的な色を指定できます。次の表に、名前の付いた色オプション、等価の RGB 3 成分、および 16 進数カラー コードを示します。
| 色名 | 省略名 | RGB 3 成分 | 16 進数カラー コード | 外観 |
|---|---|---|---|---|
"red" | "r" | [1 0 0] | "#FF0000" |
|
"green" | "g" | [0 1 0] | "#00FF00" |
|
"blue" | "b" | [0 0 1] | "#0000FF" |
|
"cyan" | "c" | [0 1 1] | "#00FFFF" |
|
"magenta" | "m" | [1 0 1] | "#FF00FF" |
|
"yellow" | "y" | [1 1 0] | "#FFFF00" |
|
"black" | "k" | [0 0 0] | "#000000" |
|
"white" | "w" | [1 1 1] | "#FFFFFF" |
|
次の表に、ライト テーマとダーク テーマでのプロットの既定のカラー パレットを示します。
| パレット | パレットの色 |
|---|---|
R2025a より前: ほとんどのプロットで、これらの色が既定で使用されます。 |
|
|
|
orderedcolors 関数と rgb2hex 関数を使用すると、これらのパレットの RGB 3 成分および 16 進数カラー コードを取得できます。たとえば、"gem" パレットの RGB 3 成分を取得し、16 進数カラー コードに変換します。
RGB = orderedcolors("gem");
H = rgb2hex(RGB);R2023b より前: RGB = get(groot,"FactoryAxesColorOrder") を使用して、RGB 3 成分を取得します。
R2024a より前: H = compose("#%02X%02X%02X",round(RGB*255)) を使用して、16 進数カラー コードを取得します。
背景色。RGB 3 成分、16 進数カラー コード、または表にリストされた色オプションのいずれかとして指定します。
RGB 3 成分および 16 進数カラー コードは、カスタム色を指定するのに役立ちます。
RGB 3 成分は、色の赤、緑、青成分の強度を指定する 3 成分の行ベクトルです。強度値は
[0,1]の範囲でなければなりません。たとえば[0.4 0.6 0.7]のようになります。16 進数カラー コードは、ハッシュ記号 (
#) で始まり、3 桁または 6 桁の0からFまでの範囲の 16 進数が続く文字ベクトルまたは string スカラーです。この値は大文字と小文字を区別しません。したがって、カラー コード"#FF8800"、"#ff8800"、"#F80"、および"#f80"は等価です。
あるいは、名前を使用して一部の一般的な色を指定できます。次の表に、名前の付いた色オプション、等価の RGB 3 成分、および 16 進数カラー コードを示します。
| 色名 | 省略名 | RGB 3 成分 | 16 進数カラー コード | 外観 |
|---|---|---|---|---|
"red" | "r" | [1 0 0] | "#FF0000" |
|
"green" | "g" | [0 1 0] | "#00FF00" |
|
"blue" | "b" | [0 0 1] | "#0000FF" |
|
"cyan" | "c" | [0 1 1] | "#00FFFF" |
|
"magenta" | "m" | [1 0 1] | "#FF00FF" |
|
"yellow" | "y" | [1 1 0] | "#FFFF00" |
|
"black" | "k" | [0 0 0] | "#000000" |
|
"white" | "w" | [1 1 1] | "#FFFFFF" |
|
次の表に、ライト テーマとダーク テーマでのプロットの既定のカラー パレットを示します。
| パレット | パレットの色 |
|---|---|
R2025a より前: ほとんどのプロットで、これらの色が既定で使用されます。 |
|
|
|
orderedcolors 関数と rgb2hex 関数を使用すると、これらのパレットの RGB 3 成分および 16 進数カラー コードを取得できます。たとえば、"gem" パレットの RGB 3 成分を取得し、16 進数カラー コードに変換します。
RGB = orderedcolors("gem");
H = rgb2hex(RGB);R2023b より前: RGB = get(groot,"FactoryAxesColorOrder") を使用して、RGB 3 成分を取得します。
R2024a より前: H = compose("#%02X%02X%02X",round(RGB*255)) を使用して、16 進数カラー コードを取得します。
この プロパティ は読み取り専用です。
関数 uistyle を使用して作成されて追加されたスタイルの構成。n 行 3 列の table 配列として返されます。table 配列の各行は、ドロップダウン コンポーネントに現在適用されているスタイルに対応します。引き続き追加されたスタイルには、スタイル順序番号 n+1 が付与されます。Target 列と TargetIndex 列は、スタイルが追加されたコンポーネントの部分を示します。Style 列は、スタイルのクラス名を示します。
removeStyle 関数を使用してドロップダウン コンポーネントからスタイルを削除する場合に、このプロパティを使用します。
例: スタイルの削除
まず、2 つのスタイルをドロップダウン コンポーネントに追加します。
fig = uifigure; fig.Position = [100 100 300 250]; dd = uidropdown(fig); s1 = uistyle("FontColor","blue"); s2 = uistyle("FontColor","red"); addStyle(dd,s1,"item",1); addStyle(dd,s2,"item",[2 3 4]);
dd.StyleConfigurations をクエリすると、MATLAB は 2 行 3 列の table 配列を返します。最初に青のフォント スタイルがコンポーネントに追加されたため、青のフォント スタイルの順序番号は 1 になります。レベル スタイルの TargetIndex 値 {[1]} は、そのスタイルがコンポーネントの最初の項目に適用されたことを示します。同様に、2 番目のスタイルがコンポーネントの最後の 3 つの項目に追加されました。
dd.StyleConfigurations
ans =
2×3 table
Target TargetIndex Style
______ ___________ _________________________
1 item {[ 1]} 1×1 matlab.ui.style.Style
2 item {[2 3 4]} 1×1 matlab.ui.style.Style
スタイル順序番号 2 を指定して、ドロップダウン コンポーネントに追加された 2 番目のスタイルを削除します。コンポーネントの外観が更新され、最初のスタイルのみが使用されます。
removeStyle(dd,2)
対話機能
ツールヒント。文字ベクトル、文字ベクトルの cell 配列、string 配列、または 1 次元の categorical 配列として指定します。このプロパティを使用して、実行時にユーザーがポインターをコンポーネントに合わせるとメッセージが表示されるようにします。コンポーネントが無効になっている場合でも、ツールヒントは表示されます。複数行のテキストを表示するには、文字ベクトルの cell 配列または string 配列を指定します。配列の各要素は、テキストの各行になります。このプロパティを categorical 配列として指定した場合、MATLAB はカテゴリの完全なセットではなく、配列内の値を使用します。
コンテキスト メニュー。関数 uicontextmenu を使用して作成された ContextMenu オブジェクトとして指定します。このプロパティは、コンポーネントを右クリックしたときにコンテキスト メニューを表示するために使用します。
位置
ドロップダウン コンポーネントの内部位置とサイズ。[left bottom width height] として指定します。位置の値は、親コンテナーを基準とします。すべての測定単位はピクセルです。このプロパティ値は、ドロップダウン コンポーネントの Position と同一です。
この プロパティ は読み取り専用です。
ドロップダウン コンポーネントの外部位置とサイズ。[left bottom width height] として返されます。位置の値は、親コンテナーを基準とします。すべての測定単位はピクセルです。このプロパティ値は、ドロップダウン コンポーネントの Position と同一です。
レイアウト オプション。GridLayoutOptions オブジェクトとして指定します。このプロパティは、グリッド レイアウト コンテナーの子であるコンポーネントのオプションを指定します。コンポーネントがグリッド レイアウト コンテナーの子ではない場合 (たとえば、Figure またはパネルの子である場合) は、このプロパティは空で、効果はありません。しかし、コンポーネントがグリッド レイアウト コンテナーの子である場合は、GridLayoutOptions オブジェクトの Row プロパティおよび Column プロパティを設定して、グリッドの目的の行と列にコンポーネントを配置することができます。
たとえば、次のコードはドロップダウンを親グリッドの 3 行目の 2 列目に配置します。
g = uigridlayout([4 3]); dd = uidropdown(g); dd.Layout.Row = 3; dd.Layout.Column = 2;
ドロップダウンが複数の行または列にまたがるようにするには、Row または Column プロパティを 2 要素のベクトルとして指定します。たとえば、次のドロップダウンは 2 列目から 3 列目にまたがります。
dd.Layout.Column = [2 3];
コールバック
ドロップダウン メニューを開くときのコールバック。次の値のいずれかとして指定します。
関数ハンドル。
最初の要素が関数ハンドルである cell 配列。cell 配列内のその後の要素はコールバック関数に渡される引数です。
有効な MATLAB 式を含む文字ベクトル (非推奨)。MATLAB は、この式をベース ワークスペースで評価します。
このプロパティは、ユーザーがクリックしてドロップダウン メニューを開いたときに実行するコールバック関数を指定します。このコールバックの使用方法として、ドロップダウン メニューのエントリのリストの動的な更新があります。
このコールバック関数は、ユーザーのドロップダウン操作に関する特定の情報にアクセスできます。MATLAB は、この情報を DropDownOpeningData オブジェクトに格納して、2 番目の引数としてコールバック関数に渡します。App Designer では、引数は event と呼ばれます。ドット表記を使用して、オブジェクトのプロパティをクエリできます。たとえば、event.Source は、ユーザーの操作に応じてコールバックをトリガーする DropDown オブジェクトを返します。DropDownOpeningData オブジェクトは、文字ベクトルとして指定されているコールバック関数では使用できません。
次の表に、DropDownOpeningData オブジェクトのプロパティを示します。
| プロパティ | 値 |
|---|---|
Source | コールバックを実行するコンポーネント |
EventName | 'DropDownOpening' |
コールバックの記述の詳細については、App Designer のコールバックを参照してください。
クリック時のコールバック。次の値のいずれかとして指定します。
関数ハンドル。
最初の要素が関数ハンドルである cell 配列。cell 配列内のその後の要素はコールバック関数に渡される引数です。
有効な MATLAB 式を含む文字ベクトル (非推奨)。MATLAB は、この式をベース ワークスペースで評価します。
このコールバック関数は、ユーザーがドロップダウン コンポーネント内の任意の位置をクリックしたときに実行されます。
このコールバック関数は、ユーザーのドロップダウン コンポーネント操作に関する特定の情報にアクセスできます。MATLAB は、この情報を ClickedData オブジェクトに格納して、2 番目の引数としてコールバック関数に渡します。App Designer では、引数は event と呼ばれます。ドット表記を使用して、オブジェクトのプロパティをクエリできます。たとえば、event.InteractionInformation は、ユーザーがクリックしたドロップダウン コンポーネント内の位置に関する情報を返します。ClickedData オブジェクトは、文字ベクトルとして指定されているコールバック関数では使用できません。
次の表は、ClickedData オブジェクトのプロパティを示しています。
| プロパティ | 値 |
|---|---|
InteractionInformation | アプリ ユーザーがクリックしたコンポーネント内の位置に関する情報。この情報は、次のプロパティをもつオブジェクトとして保存されます。
ドット表記を使用して、オブジェクトのプロパティをクエリできます。たとえば、 |
Source | コールバックを実行するコンポーネント |
EventName | 'Clicked' |
次の表に、ドロップダウン コンポーネントに関連付けられている InteractionInformation オブジェクトのプロパティを示します。
| プロパティ | 値 |
|---|---|
Item | クリックされたドロップダウン コンポーネント項目のインデックス。スカラーとして返されます。 ユーザーがクリックしたドロップダウン コンポーネントの領域が項目に関連付けられていない場合、 |
Location | ドロップダウン コンポーネントの親コンテナーの左下隅を基準とした、ユーザーのクリック位置。
|
ScreenLocation | プライマリ ディスプレイの左下隅を基準とした、ユーザーのクリック位置。
|
コールバックの記述の詳細については、App Designer のコールバックを参照してください。
例: ドロップダウン コンポーネントがクリックされたときにデータを表示
食料品を表す項目と、それぞれのコストを表す項目データをもつドロップダウン コンポーネントを作成します。ユーザーがコンポーネントをクリックしたときに実行される、displayCost という名前の ClickedFcn コールバック関数を指定します。displayCost 関数内で次を行います。
event.InteractionInformationオブジェクトを使用して、ユーザーが項目をクリックしたかどうかに関する情報にアクセスします。ユーザーが項目 (項目に関連付けられていないドロップダウン コンポーネント内の場所ではない) をクリックすると、項目とそのコストがクエリされます。
コマンド ウィンドウで項目とそのコストを表示します。
この例を試すには、次のコードを新しいスクリプトに保存して、実行します。ドロップダウン コンポーネントの項目をクリックして、そのコストを表示します。
fig = uifigure; dd = uidropdown(fig); dd.Items = ["Apple","Banana","Orange"]; dd.ItemsData = [1.2,0.5,1.2]; dd.ClickedFcn = @displayCost; function displayCost(dd,event) idx = event.InteractionInformation.Item; if ~isempty(idx) fruit = dd.Items(idx); cost = dd.ItemsData(idx); disp(fruit + " cost $" + cost) end end
コールバック実行制御
親/子
親コンテナー。Figure オブジェクトまたはその子コンテナー (Tab、Panel、ButtonGroup、GridLayout) のいずれかとして指定します。コンテナーが指定されていない場合、MATLAB は関数 uifigure を呼び出し、親コンテナーとして使用される新しい Figure オブジェクトを作成します。
識別子
この プロパティ は読み取り専用です。
グラフィックス オブジェクトのタイプ。'uidropdown' として返されます。
オブジェクト関数
addStyle | UI コンポーネントにスタイルを追加 |
removeStyle | UI コンポーネントからスタイルを削除 |
focus | UI コンポーネントにフォーカスを移動 |
例
UI Figure 内にドロップダウン コンポーネントを作成し、項目を指定します。
fig = uifigure; dd = uidropdown(fig,"Items",["Red","Yellow","Blue","Green"]);
選択された項目に関連付けられている値を調べます。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);
項目の背景色が更新され、選択された項目のスタイルがコンポーネントの外観に反映されます。このスタイルでは、ユーザーが項目をポイントしたときに表示される色は変わりません。
アプリ ユーザーがドロップダウン リストから選択するとプロットされたラインの色が変わるアプリを作成します。
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
ユーザーが表示するイメージを選択できるアプリを作成します。このアプリには編集可能なドロップダウン コンポーネントが含まれるため、ユーザーによる既存の項目の選択とユーザーによる独自の値の入力を処理するコードを記述します。
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 を実行し、既存の項目を選択するか独自のイメージのパスを入力してイメージを更新します。
