Main Content

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

uitree

ツリーまたはチェック ボックス ツリー コンポーネントの作成

説明

t = uitree は、標準ツリーを新しい Figure ウィンドウ内に作成し、Tree オブジェクトを返します。MATLAB® は関数 uifigure を呼び出してこの Figure を作成します。

t = uitree(style) は指定されたスタイルのツリーを作成します。標準ツリーではなく、チェック ボックス ツリーを作成するには、style'checkbox' に指定します。

t = uitree(parent) は、指定した親コンテナーに標準ツリーを作成します。親には、関数 uifigure を使用して作成された Figure か、またはその子コンテナーのいずれかを指定できます。

t = uitree(parent,style) は、指定された親コンテナー内に指定されたスタイルのツリーを作成します。

t = uitree(___,Name,Value) は、1 つ以上の 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.

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

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

Check box tree with two nodes.

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

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

スポーツ別にグループ分けされたアスリート名を表示するアプリを作成します。アプリ ユーザーが名前をクリックすると、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 を表示します。

食品カテゴリ別にグループ分けされた食料品店リストを表示するアプリを作成します。アプリ ユーザーは個々の項目または食品カテゴリ全体をオンにすることができ、MATLAB はオンにされた項目の合計重量を表示します。

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

function mycheckboxtreeapp
    fig = uifigure;
    cbt = uitree(fig,'checkbox','Position',[20 20 150 150]);
    
    % Assign callbacks in response to node check and selection
    cbt.CheckedNodesChangedFcn = @checkchange;
    cbt.SelectionChangedFcn = @selectchange;
    
    % First level nodes
    category1 = uitreenode(cbt,'Text','Vegetables','NodeData',[]);
    category2 = uitreenode(cbt,'Text','Fruits','NodeData',[]);

    % Second level nodes.
    % Node data is the weight of the food item (in grams)
    p1 = uitreenode(category1,'Text','Cucumber','NodeData',400);
    p2 = uitreenode(category1,'Text','Carrot','NodeData',65);
    p3 = uitreenode(category2,'Text','Apple','NodeData',183);
    p4 = uitreenode(category2,'Text','Banana','NodeData',120);

    % Expand the tree
    expand(cbt);
    
    % Create the function for the CheckedNodesChangedFcn callback
    % When this function is executed, it displays the total weight
    % of all checked items
    function checkchange(src,event)
        nodes = event.LeafCheckedNodes;
        if ~isempty(nodes)
            data = [nodes.NodeData];
            display(sum(data));
        end
    end

    % Create the function for the SelectedNodesChangedFcn callback
    % When this function is executed, it displays the name
    % of the selected item
    function selectchange(src,event)
        node = event.SelectedNodes;
        display(node.Text);
    end
end

ユーザーが mycheckboxtreeapp を実行してツリーのノードをオンまたはオフにすると、MATLAB は、2 次レベルのオンになったすべてのノードの重量の合計 (NodeData に保存されている) を表示します。ユーザーがツリーのノードを選択すると、MATLAB はそのノードのテキストを表示します。

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 コンポーネントを作成する場合、親ノードを展開した後に初めて子ノードを作成することで、応答性に優れたエクスペリエンスをアプリ ユーザーに提供できます。

この手法には以下の利点があります。

  • アプリはコンポーネントを表示する前に最上位のツリー ノードのみを作成するため、アプリの開始時間が改善されます。

  • アプリはユーザーが表示させるノードのみを作成するため、1 つのセッションですべてのノードにアクセスする必要がない場合、読み込み時間全体が改善されます。

親ノードを展開したときに子ノードを作成するには、ツリーに対して NodeExpandedFcn コールバックを記述し、コールバック関数でノードを作成します。

たとえば、患者名および病院をツリーで表示するアプリを作成します。現在のフォルダーに patientTreeApp.m という名前のファイルを作成し、patientTreeApp という名前の関数を定義します。関数内で以下の手順を実行します。

  1. サンプルの患者データを読み取り、T という名前の table 変数に保存します。

  2. Figure ウィンドウを作成し、その Figure にツリーを作成します。

  3. ツリーに 2 つの最上位ノードを入力します。これらのノードには、データの病院名および患者名をもつ子が含まれるようになります。

  4. 各最上位ノードに対して、テキスト 'Loading...' をもつ子を 1 つ作成します。この子ノードにより、確実に最上位ノードはアプリ ユーザーが展開できるというオプションをもつようになります。アプリ ユーザーが最初にノードを展開したとき、すぐにフィードバックを提供します。

  5. 関数 createNodes をツリーの NodeExpandedFcn コールバック プロパティに割り当てます。患者の table データを入力として関数に渡します。MATLAB は、アプリ ユーザーがツリーのノードを展開するとき、必ず関数 createNodes を実行します。

function patientTreeApp
    T = readtable('patients');
    
    fig = uifigure;
    tr = uitree(fig,'Position',[20 20 300 300]);
    hospitalnode = uitreenode(tr,'Text','Hospitals');
    namenode = uitreenode(tr,'Text','Patient Names');
    for k = 1:length(tr.Children)
        node = tr.Children(k);
        uitreenode(node,'Text','Loading...');
    end

    tr.NodeExpandedFcn = {@createNodes,T};
end

次に同じファイルで、createNodes コールバック関数を定義します。入力引数 (MATLAB がコールバック関数に渡すコールバック ソースのコンポーネントとイベント データ、および患者データ) を受け入れる関数を定義します。関数内で以下の手順を実行します。

  1. 展開されたノードを parent という名前の変数に格納し、そのノードのすべての子を削除します。

  2. 展開されるノードに応じて、病院名または患者名のどちらかを children という名前の変数に格納します。

  3. children に格納されている名前それぞれに対し、テキストがその名前であるツリー ノードを作成して、展開されたノードの親にします。

function createNodes(src,event,T)
    parent = event.Node;
    delete(parent.Children);
    
    switch parent.Text
        case 'Hospitals'
            children = categories(categorical(T.Location));
        case 'Patient Names'
            children = categories(categorical(T.LastName));
    end

    for k = 1:length(children)
      text = children{k};
      uitreenode(parent,'Text',text);
    end
end

コマンド ラインから関数 patientTreeApp を呼び出して、アプリを実行します。

patientTreeApp

Hospitals ノードおよび Patient Names ノードを展開し、子を生成して表示します。

A tree UI component in a figure. There are two expanded top-level nodes: "Hospitals" and "Patient Names". Each has children listing the relevant names.

入力引数

すべて折りたたむ

ツリーのスタイル。次のいずれかとして指定します。

  • 'tree' — 項目の階層リスト

  • 'checkbox' — 各項目の左側にチェック ボックス付きで示される、チェック可能な項目の階層リスト

親コンテナー。関数 uifigure を使用して作成された Figure オブジェクト、またはその子コンテナー (TabPanelButtonGroup または GridLayout) のいずれかとして指定します。親コンテナーを指定しない場合、MATLAB は関数 uifigure を呼び出し、親コンテナーとして機能する新しい Figure オブジェクトを作成します。

名前と値の引数

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

各タイプの Tree オブジェクトは、異なるプロパティのセットをサポートします。プロパティの完全なリストと各タイプについての説明は、対応するプロパティのページを参照してください。

詳細

すべて折りたたむ

選択されたノード

標準ツリーまたはチェック ボックス ツリーで選択されたノードは、ノード テキストの周囲が青で強調表示されて示されます。アプリ ユーザーは、ノード テキストをクリックしてノードを選択できます。

Multiselect プロパティが 'off' に設定されている標準ツリーとすべてのチェック ボックス ツリーでは、1 つのノードのみ選択できます。標準ツリーで、Multiselect プロパティを 'on' に設定すると、複数のノードを選択できます。

次の図では、Carrot ノードが選択されています。

オンにされたノード

チェック ボックス ツリーでは、オンにされたノードは、ノード テキストの左側にあるオンにされたチェック ボックスで示されます。任意の数のノードをオンにすることができます。アプリ ユーザーは、チェック ボックスをクリックしてノードをオンまたはオフにできます。標準ツリーでは、ノードをオンにできません。

次の図では、Fruits ノード、Apple ノード、Banana ノードがオンになっています。

バージョン履歴

R2017b で導入