Main Content

このページの翻訳は最新ではありません。ここをクリックして、英語の最新版を参照してください。

addStyle

テーブルまたはツリー UI コンポーネントへのスタイルの追加

R2019b 以降

ページ内をすべて折りたたむ

構文

addStyle(tbl,s)
addStyle(tbl,s,tableTarget,tableIndex)
addStyle(tr,s)
addStyle(tr,s,treeTarget,treeIndex)

説明

テーブル

例

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

例

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

ツリー

例

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

例

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

例

すべて折りたたむ

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

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

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

Table UI component with some random data.

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

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

Table UI component. The cells in the second column have a red background

テーブル 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])

Table UI component with tsunami data. Table cells that have NaN values are highlighted in yellow.

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

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

Tree that displays the hierarchy of a simple app.

異なる色調の青を背景色とする 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);

Tree that displays the hierarchy of a simple app, with different levels colored in different shades of blue.

複数のスタイルを作成し、テーブル 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)

Table UI component with 7 columns and 7 rows. The negative-valued data is displayed in bold red text. Cells in rows 3 and 4 and between columns 1 and 6 are green. The remaining cells in columns 1, 3, and 5 are cyan. All of the cells in column 7 are cyan.

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

ツリー 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)

Tree with three top-level nodes with text "App 1", "App 2", and "Images", and nested nodes with file names.

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)

Tree UI component. The "App 1", "App 2", and "Images" nodes are bold, the nodes with file names that end in .m are italic, and the image file name has an icon of the image to its left.

単一のスタイルをチェック ボックス ツリーおよびテーブル 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]));

UI figure window with a check box tree and a table.

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

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

UI figure window with a tree and a table. Both components use a bold, green Calibri font.

入力引数

すべて折りたたむ

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

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

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

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

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

スタイルのターゲット インデックス。以下の表にリストされたいずれかの値として指定します。指定可能な値の型は、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'

空の文字ベクトル。

''

テーブル全体にスタイルを追加します。

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

tableTargetサポートされている tableIndex の値例
'column'

string スカラー。

対応する変数名をもつ列にスタイルを追加します。

"Torque"

string 配列。

対応する変数名をもつ列にスタイルを追加します。

["Torque" "Mass"]

文字ベクトル。

対応する変数名をもつ列にスタイルを追加します。

'Revenue'

1 次元の文字ベクトルの cell 配列

対応する変数名をもつ列にスタイルを追加します。

{'Year','Expenses','Revenue'}

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

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

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

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

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

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

treeTargetサポートされている treeIndex の値例結果
'node'

TreeNode オブジェクト

node1

指定されたツリー ノードにスタイルを追加します。

TreeNode オブジェクトのベクトル

[node1 node2]

指定されたツリー ノードにスタイルを追加します。

'level'

正の整数

2

対応するインデックスをもつツリー レベルにスタイルを追加します。

正の整数のベクトル

[1 4]

対応するインデックスをもつツリー レベルにスタイルを追加します。

'tree'

空の文字ベクトル

''

ツリー全体にスタイルを追加します。

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

ヒント

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

バージョン履歴

R2019b で導入

すべて展開する

参考

関数

プロパティ

トピック