Main Content

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

uitreenode

ツリー ノード コンポーネントの作成

説明

node = uitreenode は新しい Figure ウィンドウ内にあるツリーの内部でツリー ノード UI コンポーネントを作成し、TreeNode オブジェクトを返します。MATLAB® は関数 uifigure を呼び出して Figure を作成します。

node = uitreenode(parent) は、指定した親コンテナーにツリー ノードを作成します。親コンテナーは Tree または TreeNode オブジェクトです。

node = uitreenode(parent,sibling) は、指定した親コンテナーに、指定した兄弟ノードの後にツリー ノードを作成します。

node = uitreenode(parent,sibling,location) は、ツリー ノードを作成し、兄弟ノードの後または前に配置します。location'after' または 'before' として指定します。

node = uitreenode(___,Name,Value) は 1 つ以上の Name,Value のペアの引数を使用して、TreeNode のプロパティ値を指定します。前述の構文のいずれかを使用する場合に、Name,Value を引数の最後の組として指定します。

すべて折りたたむ

[Sample Data] という名前の親ノードと Sample 1 という名前の子ノードを含むツリーを作成します。ツリーを展開すると、両方のノードが表示されます。

fig = uifigure;
t = uitree(fig);
parent = uitreenode(t,'Text','Sample Data');
child = uitreenode(parent,'Text','Sample 1');
expand(t)

Tree with two nodes.

スポーツ別にグループ分けされたアスリート名を表示するアプリを作成します。アプリ ユーザーが名前をクリックすると、MATLAB はそのアスリートに関するデータを表示します。

ツリー、入れ子にされたツリー ノードのセット、およびツリーのコールバック関数を作成するための次のコマンドを含む mytreeapp.m というプログラム ファイルを作成します。SelectionChangedFcn プロパティは、ユーザーがツリーのノードをクリックしたときに実行する関数を指定します。

function mytreeapp
    fig = uifigure;
    t = uitree(fig,'Position',[20 20 150 150]);

    % Assign callback in response to node selection
    t.SelectionChangedFcn = @nodechange;

    % First level nodes
    category1 = uitreenode(t,'Text','Runners','NodeData',[]);
    category2 = uitreenode(t,'Text','Cyclists','NodeData',[]);

    % Second level nodes.
    % Node data is age (y), height (m), weight (kg)
    p1 = uitreenode(category1,'Text','Joe','NodeData',[40 1.67 58] );
    p2 = uitreenode(category1,'Text','Linda','NodeData',[49 1.83 90]);
    p3 = uitreenode(category2,'Text','Rajeev','NodeData',[25 1.47 53]);
    p4 = uitreenode(category2,'Text','Anne','NodeData',[88 1.92 100]);

    % Expand the tree
    expand(t);
    
    % Create the function for the SelectionChangedFcn callback
    % When the function is executed, it displays the data of the selected item
    function nodechange(src,event)
        node = event.SelectedNodes;
        display(node.NodeData);
    end
end

ユーザーが mytreeapp を実行してツリーのノードをクリックすると、MATLAB はそのノードの NodeData を表示します。

table のデータに基づいてノードを追加するツリーを作成します。

UI コンポーネントを保持するグリッド レイアウト マネージャーをもつ Figure を作成します。電力会社の停電に関するサンプル データを読み込み、データを表示するテーブル UI コンポーネントを作成します。次にツリーを作成して、停電した地域および原因をリストするノードを保持します。

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

T = readtable('outages.csv');
T = T(1:20,{'Region','OutageTime','Loss','Cause'});
tbl = uitable(gl,'Data',T);

tr = uitree(gl);

ツリーに表示する table 変数を指定します。これらの変数それぞれに対して、テキストが変数名である最上位ノードを作成します。変数に対する table エントリを categorical 配列に変換し、カテゴリのリストを names として返すことにより、関連するデータを抽出します。次に、カテゴリをループします。各要素に対して、適切な親ノードの下でツリーにノードを追加します。

vars = {'Region','Cause'};

for k1 = 1:length(vars)
    var = vars{k1};
    varnode = uitreenode(tr,'Text',var);
    rows = T{:,var};
    names = categories(categorical(rows));
         
    for k2 = 1:length(names)
        text = names{k2};
        uitreenode(varnode,'Text',text);
    end
end

ツリーを展開すると、すべてのノードが表示されます。

expand(tr)

Figure window with a table and a tree. The table contains outage sample data, and the tree contains a node for each region and cause in the table data.

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

ツリー 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');
n32 = uitreenode(n3,'Text','corn.tif');

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');
imgStyle = uistyle('FontAngle','italic');
mStyle = uistyle('FontColor','blue');

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

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

Tree UI component. The "App 1", "App 2", and "Images" nodes are bold, the nodes with file names that end in .m are blue, and the image file names are italic.

ツリー コンポーネントに適したアクションのコンテキスト メニューを作成します。コンテキスト メニューをツリー内の最上位のツリー ノードに割り当てます。

UI figure で、4 つの最上位のノードと入れ子ノードのセットを含むツリーを作成します。

fig = uifigure;

tree = uitree(fig,'Position',[20 200 175 100]);

category1 = uitreenode(tree,'Text','Runners');
r1 = uitreenode(category1,'Text','Joe');
r2 = uitreenode(category1,'Text','Linda');

category2 = uitreenode(tree,'Text','Cyclists');
c1 = uitreenode(category2,'Text','Rajeev');

category3 = uitreenode(tree,'Text','Hikers');
h1 = uitreenode(category3,'Text','Jack');

category4 = uitreenode(tree,'Text','Swimmers');
s1 = uitreenode(category4,'Text','Logan');

Tree with four visible nodes: Runners, Cyclists, Hikers, and Swimmers

3 つのメニュー項目を含むコンテキスト メニューを作成します。最後のメニュー項目には、4 つのサブメニューを作成します。

cm = uicontextmenu(fig);
m1 = uimenu(cm,'Text','Expand All');
m2 = uimenu(cm,'Text','Collapse All');
m3 = uimenu(cm,'Text','Scroll To...');

sbm1 = uimenu(m3,'Text','Runners');
sbm2 = uimenu(m3,'Text','Cyclists');
sbm3 = uimenu(m3,'Text','Hikers');
sbm4 = uimenu(m3,'Text','Swimmers');

次に、各ノードの ContextMenu プロパティを ContextMenu オブジェクトに設定し、コンテキスト メニューを最上位のツリー ノードに割り当てます。

category1.ContextMenu = cm;
category2.ContextMenu = cm;
category3.ContextMenu = cm;
category4.ContextMenu = cm;

任意の最上位のツリー ノードを右クリックし、コンテキスト メニューを表示します。

Tree with a context menu. The context menu is associated with the Cyclists node. The "Scroll To" option is highlighted and it has a submenu with the options Runners, Cyclists, Hikers, and Swimmers.

この時点で、コードはまだ終了していません。右クリックするとコンテキスト メニューが表示されますが、メニュー項目を選択しても何も効果はありません。メニュー項目の動作の実装を完了するには、コールバック関数 MenuSelectedFcn を作成します。

入力引数

すべて折りたたむ

親オブジェクト。Tree または TreeNode オブジェクトとして指定します。

兄弟ノード。TreeNode オブジェクトとして指定します。

兄弟ノードを基準とするノードの相対位置。'after' または 'before' として指定します。

名前と値の引数

例: node = uitreenode(t,'Text','Measurements') は、'Measurements' というラベルをもつツリー ノードを作成します。

オプションの Name,Value の引数ペアをコンマ区切りで指定します。Name は引数名で、Value は対応する値です。Name は一重引用符 (' ') で囲まなければなりません。Name1,Value1,...,NameN,ValueN のように、複数の名前と値のペアの引数を指定できます。

ここでは、プロパティの一部を紹介しています。完全な一覧については、TreeNode のプロパティ を参照してください。

ノード テキスト。文字ベクトルまたは string スカラーとして指定します。

アイコンのソースまたはファイル。文字ベクトル、string スカラー、または m x n x 3 のトゥルーカラー イメージ配列として指定します。ファイル名には、MATLAB パス上のイメージ ファイル名、あるいはイメージ ファイルへの絶対パスを指定できます。他のユーザーとアプリを共有する予定の場合は、アプリのパッケージ化を容易にするためにイメージ ファイルを MATLAB パス上に配置します。

サポートされているイメージ形式には、JPEG、PNG、GIF、SVG または m x n x 3 のトゥルーカラー イメージ配列が含まれます。トゥルーカラー イメージ配列の詳細については、イメージの種類を参照してください。

例: 'icon.png' は、MATLAB パス上のアイコン ファイルを指定します。

例: 'C:\Documents\icon.png' は、イメージ ファイルへの絶対パスを指定します。

ノードのデータ。任意の型の配列として指定します。ノードに関連するデータをアプリ コード内で共有するには、NodeData を指定します。

バージョン履歴

R2017b で導入