addStyle

UI コンポーネントにスタイルを追加

R2019b 以降

構文

addStyle(tbl,s)

addStyle(tbl,s,tableTarget,tableIndex)

addStyle(tr,s)

addStyle(tr,s,treeTarget,treeIndex)

addStyle(lb,s)

addStyle(lb,s,listBoxTarget,listBoxIndex)

addStyle(dd,s)

addStyle(dd,s,dropDownTarget,dropDownIndex)

説明

テーブル

addStyle(tbl,s) は、指定されたテーブル UI コンポーネントに関数 uistyle で作成されたスタイルを追加します。スタイルはテーブル全体に適用されます。テーブルは、関数 uifigure で作成された Figure またはその子コンテナーのうちの 1 つを親としなければなりません。

addStyle(tbl,s,tableTarget,tableIndex) は、特定の行、列、またはセルにスタイルを追加します。たとえば、addStyle(tbl,s,"column",3) は、指定されたテーブルの 3 番目の列にスタイルを追加します。

ツリー

R2022a 以降

addStyle(tr,s) は、指定されたツリー UI コンポーネントに関数 uistyle で作成されたスタイルを追加します。スタイルはツリー全体に適用されます。

addStyle(tr,s,treeTarget,treeIndex) は、特定のノード、サブツリー、またはツリー レベルにスタイルを追加します。たとえば、addStyle(tr,s,"level",1) は、指定されたツリーの最上位のノードにスタイルを追加します。

リスト ボックス

R2023a 以降

addStyle(lb,s) は、指定されたリスト ボックス UI コンポーネントに関数 uistyle で作成されたスタイルを追加します。スタイルはリスト ボックスのすべての項目に適用されます。

addStyle(lb,s,listBoxTarget,listBoxIndex) は、リスト ボックスの特定の項目にスタイルを追加します。たとえば、addStyle(lb,s,"item",3) は、指定されたリスト ボックスの 3 番目の項目にスタイルを追加します。

ドロップダウン

R2023a 以降

addStyle(dd,s) は、指定されたドロップダウン UI コンポーネントに関数 uistyle で作成されたスタイルを追加します。スタイルはドロップダウン コンポーネントのすべての項目に適用されます。

addStyle(dd,s,dropDownTarget,dropDownIndex) は、ドロップダウン コンポーネントの特定の項目にスタイルを追加します。たとえば、addStyle(dd,s,"item",3) は、指定されたドロップダウン コンポーネントの 3 番目の項目にスタイルを追加します。

例

テーブル列の色の変更

スタイルを作成し、それをテーブルに適用することで、テーブル列内のセルの背景色を変更します。

テーブル UI コンポーネントをもつ Figure を作成し、テーブルに数値データを入力します。

fig = uifigure;
fig.Position = [500 500 520 220];
uit = uitable(fig);
uit.Data = rand(5);
uit.Position = [20 30 480 135];

次に、特定の背景色をもつスタイルを作成し、関数 addStyle を使用してそのスタイルをテーブルの 2 番目の列に追加します。

s = uistyle('BackgroundColor','red');
addStyle(uit,s,'column',2)

データに基づくテーブル セルの色の変更

テーブル UI コンポーネント内の欠損値を含むセルのスタイルを設定します。この例では、NaN 値をもつセルに黄色の背景色スタイルを追加します。

津波のサンプル データを table 配列としてワークスペースに読み取ります。次に、データを表示するテーブル UI コンポーネントを作成します。

tdata = readtable('tsunamis.xlsx');
vars = {'Year','Month','Day','Hour', ...
        'MaxHeight','Cause','EarthquakeMagnitude'};
tdata = tdata(1:100,vars);

fig = uifigure('Position',[500 500 750 350]);
uit = uitable(fig);
uit.Position = [20 20 710 310];
uit.Data = tdata;
uit.RowName = 'numbered';

関数 ismissing を使用して、欠損値を含むテーブル要素の logical 配列を取得します。NaN 値をもつ要素の行と列の添字を見つけます。最後に、黄色の背景色スタイルを作成し、テーブル UI コンポーネントの NaN 値を含むセルに追加します。

styleIndices = ismissing(tdata);
[row,col] = find(styleIndices);

s = uistyle('BackgroundColor','yellow');
addStyle(uit,s,'cell',[row,col])

テーブルへの複数のスタイルの追加

複数のスタイルを作成し、テーブル UI コンポーネントのさまざまな部分に追加します。

テーブル UI コンポーネントを含む Figure を作成し、テーブル内に数値データを表示します。後からセルのスタイルを設定できるように、テーブル内でゼロより小さい値を含む要素の行と列の添字を見つけます。

fig = uifigure;
fig.Position = [500 500 720 230];

uit = uitable(fig);
uit.Data = randi([-20,20],7);
uit.Position = [20 30 680 185];

[row,col] = find(uit.Data < 0);

背景色スタイルを 2 つと、フォントの色と太さを指定するスタイルを 1 つ作成します。シアンの背景色を、列 1、3、5 に追加します。フォントを赤の太字にすることにより、負の値を含むセルを強調します。次に、行 3 および行 4 に緑の背景色のスタイルを追加します。最後に、シアンの背景色のスタイルを再利用して列 7 に追加します。同じタイプの複数のスタイルがセルに追加される場合、最後に追加されるスタイルがセルに表示されます。

s1 = uistyle;
s1.BackgroundColor = 'cyan';
addStyle(uit,s1,'column',[1 3 5])

s2 = uistyle;
s2.FontColor = 'red';
s2.FontWeight = 'bold';
addStyle(uit,s2,'cell',[row,col])

s3 = uistyle;
s3.BackgroundColor = 'green';
addStyle(uit,s3,'row',[3 4])

addStyle(uit,s1,'column',7)

ツリーのレベルの強調表示

簡単なアプリの階層を表示するツリーを作成し、それぞれの階層レベルを強調表示します。

MATLAB^® アプリのコンポーネント階層を表すツリーを作成します。最上位に UI Figure ウィンドウがあります。Figure に UIAxes オブジェクトと Panel コンテナーを含めます。パネルには Button オブジェクトと DropDown オブジェクトがあります。ツリーのすべてのノードを展開して全階層を表示します。

fig = uifigure('Position',[100 100 250 350]);
t = uitree(fig);
fignode = uitreenode(t,'Text','UI Figure');
pnlnode = uitreenode(fignode,'Text','Panel');
axnode = uitreenode(fignode,'Text','UIAxes');
btnnode = uitreenode(pnlnode,'Text','Button');
ddnode = uitreenode(pnlnode,'Text','DropDown');
expand(t,'all')

異なる色調の青を背景色とする 3 つのスタイルを作成して、それぞれのツリー レベルを強調表示します。最も濃い背景をレベル 1 のノード、それよりも薄い背景をレベル 2 のノード、最も薄い背景をレベル 3 のノードに適用します。

s1 = uistyle('BackgroundColor','#3773EB');
s2 = uistyle('BackgroundColor','#78A1F2');
s3 = uistyle('BackgroundColor','#B5CBF8');

addStyle(t,s1,'level',1);
addStyle(t,s2,'level',2);
addStyle(t,s3,'level',3);

ファイル タイプを示すツリー ノードのスタイルの決定

異なるファイル タイプを視覚的に区別できるように、ファイル構造を展示するツリー中のノードのスタイルを決定します。

ツリー UI コンポーネントを作成します。各最上位ノードはフォルダーを表します。各子ノードはそのフォルダー中のファイルを表します。ツリーを展開すると、すべてのノードが表示されます。

fig = uifigure("Position",[300 300 350 400]);
t = uitree(fig);

% Parent nodes
n1 = uitreenode(t,"Text","App 1");
n2 = uitreenode(t,"Text","App 2");
n3 = uitreenode(t,"Text","Images");

% Child nodes
n11 = uitreenode(n1,"Text","myapp1.m");
n21 = uitreenode(n2,"Text","myapp2.m");
n22 = uitreenode(n2,"Text","app2callback.m");
n31 = uitreenode(n3,"Text","peppers.png");

expand(t)

3 つのスタイルを作成します。1 つはフォントの太さが太字、1 つはフォントの角度がイタリック、1 つはアイコンです。

dirStyle = uistyle("FontWeight","bold");
mStyle = uistyle("FontAngle","italic");
imgStyle = uistyle("Icon","peppers.png");

太字のスタイルを最上位ノードに適用して、フォルダーを表すノードを区別します。イタリックのスタイルを App 1 ノードおよび App 2 ノードの子に適用して、MATLAB プログラム ファイルを表すノードを区別します。最後に、イメージ ファイルを表すノードにアイコンのスタイルを適用し、イメージのプレビューを表示します。

addStyle(t,dirStyle,"level",1)
addStyle(t,mStyle,"node",[n1.Children;n2.Children])
addStyle(t,imgStyle,"node",n31)

リスト ボックスの項目へのアイコンの追加

R2023a 以降

異なるイメージを表す 3 つの項目を含むリスト ボックスを作成します。

fig = uifigure;
lb = uilistbox(fig,"Items",["Peppers","Nebula","Street"]);

リスト ボックスの項目に対応するアイコンをもつ 3 つのスタイルを作成します。

s1 = uistyle("Icon","peppers.png");
s2 = uistyle("Icon","ngc6543a.jpg");
s3 = uistyle("Icon","street1.jpg");

スタイルをリスト ボックスの項目に追加してアイコンを表示します。

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

ドロップダウン コンポーネントの項目への色の追加

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);

項目の背景色が更新され、選択された項目のスタイルがコンポーネントの外観に反映されます。このスタイルでは、ユーザーが項目をポイントしたときに表示される色は変わりません。

UI コンポーネント間で統一した外観の作成

単一のスタイルをチェック ボックス ツリーおよびテーブル UI コンポーネント両方に追加して、まとまりのあるアプリの外観を作成します。

Figure ウィンドウを作成し、チェック ボックス ツリーおよびテーブルをグリッド レイアウト マネージャーに追加します。両方のコンポーネントに、いくつかのサンプル データを入力します。

fig = uifigure('Position',[300 300 450 330]);
gl = uigridlayout(fig,[1 2]);
gl.ColumnWidth = {'1x','2x'};

tr = uitree(gl,'checkbox');
n1 = uitreenode(tr,'Text','Reptiles');
n11 = uitreenode(n1,'Text','Snake');
n12 = uitreenode(n1,'Text','Dinosaur');
n2 = uitreenode(tr,'Text','Amphibians');
n21 = uitreenode(n2,'Text','Turtle');
expand(tr)

tbl = uitable(gl,'Data',randi(100,[20 3]));

フォント色、フォント名、およびフォントの太さを指定するスタイルを作成します。このスタイルをツリー全体およびテーブル全体の両方に適用します。

s = uistyle('FontColor',[0.1 0.5 0.06], ...
  'FontName','Calibri', ...
  'FontWeight','bold');
addStyle(tr,s)
addStyle(tbl,s)

入力引数

tbl — テーブル コンポーネント

Table オブジェクト

テーブル コンポーネント。関数 uitable で作成された Table オブジェクトとして指定します。コンポーネント オブジェクトは、関数 uifigure で作成された Figure、またはその子コンテナーのうちの 1 つを親としなければなりません。

s — スタイル オブジェクト

Style オブジェクト

関数 uistyle で作成されたスタイル オブジェクト。

tableTarget — テーブル スタイルのターゲット

"table" (既定値) | "row" | "column" | "cell"

テーブル スタイルのターゲット。"table"、"row"、"column"、または "cell" として指定します。この引数は、スタイルを適用するテーブルの部分のタイプを示すために使用します。

例: addStyle(tbl,s,"column",5) は、tbl の 5 番目の列にスタイルを追加します。

例: addStyle(tbl,s,"cell",[3 7]) は、tbl の 3 行 7 列目のテーブル セルにスタイルを追加します。

tableIndex — テーブル スタイルのターゲット インデックス

"" (既定値) | 正の整数 | 正の整数のベクトル | n 行 2 列の正の整数の配列 | ...

テーブル スタイルのターゲット インデックス。以下の表にリストされたいずれかの値として指定します。指定可能な値の型は、tableTarget の値、およびテーブル UI コンポーネントで使用されているデータの型によって異なります。

tableTarget	サポートされている tableIndex の値	例	結果
"row"	正の整数。	4	対応する行インデックスをもつ行にスタイルを追加します。
	正の整数のベクトル。	[3 8 9 12]	対応する行インデックスをもつ行にスタイルを追加します。
"column"	正の整数。	3	対応する列インデックスをもつ列にスタイルを追加します。
	正の整数のベクトル。	[1 2 7 14]	対応する列インデックスをもつ列にスタイルを追加します。
"cell"	n 行 2 列の正の整数の配列。	[2 4;5 9;13 27]	対応する行と列の添字をもつセルにスタイルを追加します。
"table"	空の string または文字ベクトル。	""	テーブル全体にスタイルを追加します。

基となるデータが table 配列であるテーブル UI コンポーネントでターゲットを "column" として指定する場合、追加のオプションがあります。table 配列の変数名に基づいて特定の列にスタイルを適用する場合は、それらの値を tableIndex で指定します。

tableTarget	サポートされている tableIndex の値	例
"column"	string スカラー 対応する変数名をもつ列にスタイルを追加します。	"Torque"
	string 配列 対応する変数名をもつ列にスタイルを追加します。	["Torque" "Mass"]
	文字ベクトル 対応する変数名をもつ列にスタイルを追加します。	'Revenue'
	1 次元の文字ベクトルの cell 配列 対応する変数名をもつ列にスタイルを追加します。	{'Year','Expenses','Revenue'}

セルの値が特定の条件を満たすかどうかに基づいてセルにスタイルを適用している場合、セルが編集可能なときは、指定した条件を満たすスタイル ターゲット インデックスを関数 CellEditCallback を使用して再計算し、それらの新しいセルを tableIndex として設定したテーブルに新しいスタイルを追加します。

tr — ツリー コンポーネント

Tree オブジェクト

ツリー コンポーネント。関数 uitree で作成された Tree オブジェクトとして指定します。

treeTarget — ツリー スタイルのターゲット

"tree" (既定値) | "node" | "level" | "subtree"

ツリー スタイルのターゲット。"tree"、"node"、"level"、または "subtree" として指定します。この引数は、スタイルを適用するツリーの部分のタイプを示すために使用します。

例: addStyle(tr,s,"level",1) は、tr の最上位のノードにスタイルを追加します。

例: addStyle(tr,s,"node",[n1 n2]) は、ノード n1 と n2 にスタイルを追加します。

例: addStyle(tr,s,"subtree",n) は、ノード n と n のすべての下位ノードにスタイルを追加します。

treeIndex — ツリー スタイルのターゲット インデックス

"" (既定値) | 正の整数 | 正の整数のベクトル | TreeNode オブジェクト | TreeNode オブジェクトのベクトル

ツリー スタイルのターゲット インデックス。以下の表にリストされたいずれかの値として指定します。指定可能な値の型は、treeTarget の値によって異なります。

treeTarget	サポートされている treeIndex の値	例	結果
"node"	TreeNode オブジェクト	node1	指定されたツリー ノードにスタイルを追加します。
	TreeNode オブジェクトのベクトル	[node1 node2]	指定されたツリー ノードにスタイルを追加します。
"level"	正の整数	2	対応するインデックスをもつツリー レベルにスタイルを追加します。
	正の整数のベクトル	[1 4]	対応するインデックスをもつツリー レベルにスタイルを追加します。
"subtree"	TreeNode オブジェクト	node1	指定されたツリー ノードとそのすべての下位ノードにスタイルを追加します。
	TreeNode オブジェクトのベクトル	[node1 node2]	指定されたツリー ノードとそのすべての下位ノードにスタイルを追加します。
"tree"	空の string または文字ベクトル	""	ツリー全体にスタイルを追加します。

ツリー レベルのインデックスはツリー階層内の場所を指定します。レベル 1 のツリー ノードはツリー UI コンポーネントを直接の親とし、レベル 2 のノードはレベル 1 のノードを親とし、以下同様に続きます。

lb — リスト ボックス コンポーネント

ListBox オブジェクト

リスト ボックス コンポーネント。関数 uilistbox で作成された ListBox オブジェクトとして指定します。

listBoxTarget — リスト ボックス スタイルのターゲット

"listbox" (既定値) | "item"

リスト ボックス スタイルのターゲット。"listbox" または "item" として指定します。この引数は、スタイルを適用するリスト ボックスの部分のタイプを示すために使用します。

例: addStyle(lb,s,"item",3) は、lb の 3 番目の項目にスタイルを追加します。

listBoxIndex — リスト ボックス スタイルのターゲット インデックス

"" (既定値) | 正の整数 | 正の整数のベクトル

リスト ボックス スタイルのターゲット インデックス。以下の表にリストされたいずれかの値として指定します。指定可能な値の型は、listBoxTarget の値によって異なります。

listBoxTarget	サポートされている listBoxIndex の値	例	結果
"item"	正の整数	2	対応するインデックスをもつリスト ボックス項目にスタイルを追加します。
	正の整数のベクトル	[1 4]	対応するインデックスをもつリスト ボックス項目にスタイルを追加します。
"listbox"	空の string または文字ベクトル	""	リスト ボックス全体にスタイルを追加します。

dd — ドロップダウン コンポーネント

DropDown オブジェクト

ドロップダウン コンポーネント。関数 uidropdown で作成された DropDown オブジェクトとして指定します。

dropDownTarget — ドロップダウン コンポーネント スタイルのターゲット

"dropdown" (既定値) | "item"

ドロップダウン コンポーネント スタイルのターゲット。"dropdown" または "item" として指定します。この引数は、スタイルを適用するドロップダウン コンポーネントの部分のタイプを示すために使用します。

例: addStyle(dd,s,"item",3) は、dd の 3 番目の項目にスタイルを追加します。

dropDownIndex — ドロップダウン コンポーネント スタイルのターゲット インデックス

"" (既定値) | 正の整数 | 正の整数のベクトル

ドロップダウン コンポーネント スタイルのターゲット インデックス。以下の表にリストされたいずれかの値として指定します。指定可能な値の型は、dropDownTarget の値によって異なります。

dropDownTarget	サポートされている dropDownIndex の値	例	結果
"item"	正の整数	2	対応するインデックスをもつドロップダウン コンポーネント項目にスタイルを追加します。
	正の整数のベクトル	[1 4]	対応するインデックスをもつドロップダウン コンポーネント項目にスタイルを追加します。
"dropdown"	空の string または文字ベクトル	""	ドロップダウン コンポーネント全体にスタイルを追加します。

ヒント

• UI コンポーネントに追加されているスタイルのリストを表示するには、コンポーネントの StyleConfigurations プロパティの値をクエリします。

バージョン履歴

R2019b で導入

R2023a: リスト ボックスおよびドロップダウン UI コンポーネントの項目へのスタイルの追加

リスト ボックスまたはリスト ボックス項目にスタイルを適用するには、関数 addStyle の最初の引数として ListBox オブジェクトを指定します。引数 listBoxTarget と listBoxIndex を使用してターゲットのタイプとインデックスを指定します。

ドロップダウン コンポーネントまたはドロップダウン コンポーネント項目にスタイルを適用するには、関数 addStyle の最初の引数として DropDown オブジェクトを指定します。引数 dropDownTarget と dropDownIndex を使用してターゲットのタイプとインデックスを指定します。

R2022a: ツリー ノードとその下位ノードへのスタイルの追加

ツリー ノードとそのすべての下位ノードにスタイルを適用するには、ツリーのターゲットを 'subtree'、インデックスをサブツリーの最上位ノードとして指定します。

R2021b: ツリー UI コンポーネントのノードとレベルへのスタイルの追加

ツリー、ツリー ノード、またはツリー レベルにスタイルを適用するには、関数 addStyle の最初の引数として Tree オブジェクトを指定します。引数 treeTarget と treeIndex を使用してターゲットのタイプとインデックスを指定します。

参考

関数

• uistyle | removeStyle | uitable | uitree | uilistbox | uidropdown

プロパティ

• Style のプロパティ | Table のプロパティ | Tree のプロパティ | CheckBoxTree のプロパティ | DropDown のプロパティ | ListBox のプロパティ

トピック

• テーブル UI コンポーネントのセルのスタイル設定