最新のリリースでは、このページがまだ翻訳されていません。 このページの最新版は英語でご覧になれます。

グリッド レイアウト マネージャーの使用

メモ

グリッド レイアウト マネージャーは、関数 uifigure を使用して作成されたアプリ専用です。

グリッド レイアウト マネージャーを使用してアプリを設計する場合は、非表示のグリッドの行と列にコンポーネントを配置します。グリッド レイアウトを使用することは簡単ですが、グリッド、その親コンテナー、およびグリッドで管理するコンポーネントの関係を理解することが重要です。

グリッドを作成すると、常にアプリ ウィンドウまたはコンテナー全体にわたって配置されます。親コンテナーの空間を適切に分割するように、行と列を構成しなければなりません。

行と列を構成するには、グリッドの RowHeightColumnWidth のプロパティを指定します。各プロパティの値を cell 配列として指定します。cell 配列の長さは、行または列の数を制御します。たとえば、3 つの行を持つグリッドを作成するには、RowHeight プロパティを 1 行 3 列の cell 配列として指定します。各 cell 配列の値は、行または列ごとのサイズを制御します。

サイズには次の 2 種類があります。

  • ピクセル単位の固定サイズ — 番号を指定します。行または列のサイズは、指定したピクセル数で固定されます。親コンテナーのサイズが変更されても、サイズは変わりません。

  • 可変サイズ — 'x' 文字と組み合わせた数値を指定します (たとえば、'1x')。親コンテナーのサイズを変更すると、行または列が拡大または縮小されます。可変サイズの行と列は、固定された行または列が使用しない残りの領域を埋めます。'x' 文字とペアにする数値は、すべての可変サイズの行または列で、残りの空間を分割するための重みです。

たとえば、このコードは、2 行 3 列のグリッドを作成します。最初の行は 25 ピクセルの高さで固定され、2 番目の行の高さは可変です。最初の 2 つの列の幅は 100 ピクセルで、最後の列の幅は可変です。

f = uifigure;
g = uigridlayout(f);
g.RowHeight = {25,'1x'};
g.ColumnWidth = {100,100,'1x'};

グリッドは非表示ですが、この図では空白がどのように分配されるかを示すために線が引かれています。

グリッドの特定の行と列にコンポーネントを配置するには、以下を行わなければなりません。

  • グリッドをコンポーネントの親として指定します。

  • コンポーネントの Layout プロパティを設定して、ターゲットの行と列を指定します。

たとえば、このコードでは、既定のサイズ (2 つの '1x' 行と 2 つの '1x' 列) を持つグリッドが作成されます。次に、そのグリッドの最初の行の 2 列目にリストボックスを配置します。

g = uigridlayout;
list = uilistbox(g);
list.Layout.Row = 1;
list.Layout.Column = 2;

この場合も、Figure にグリッド線は表示されません。

コンポーネントを追加し、Layout プロパティを指定しない場合、グリッドによってコンポーネントが既定の場所に配置されます。コンポーネントは、初期状態でグリッドを左から右、上から下に埋めていきます。たとえば、このコードは既定の順序で 4 つのコンポーネントを含む 2 行 2 列のグリッドを作成します。

f = uifigure;
g = uigridlayout(f);
g.RowHeight = {25,'1x'};
g.ColumnWidth = {100,'1x'};
b = uibutton(g,'Text','Open File');
dd = uidropdown(g,'Items',{'Scatter Plot','Line Plot'});
list = uilistbox(g,'Items',{'one','two'});
ax = uiaxes(g);

コンポーネントを追加した後でグリッドを再構成した場合、グリッドはコンポーネントを区分し直しません。たとえば、前の例で 3 番目の列を追加しても、グリッドによってリスト ボックスが最初の行の 3 列目に移動されることはありません。

g.ColumnWidth = {100,'1x','1x'};

レイアウトに変更を加えると、グリッドのサイズが変わる場合があります。たとえば、全部埋まったグリッドにコンポーネントを追加すると、新しいコンポーネントに対応する行が追加されます。

グリッド内のコンポーネント オブジェクトのリストを表示するには、グリッドの Children プロパティをクエリします。リスト内の順序を変更しても、グリッドのレイアウトは変更されません。

例: 実行時の条件に基づいて行を非表示にする

この例では、ドロップダウン メニューのユーザーの選択に基づいて、グリッドの行内のコンポーネントを非表示にする方法を示します。コードでは、次のような高いレベルのタスクを実行します。

  • パネルと座標軸コンポーネントを管理する 1 行 2 列のグリッド grid1 を Figure で作成します。

  • パネル内に 3 行 2 列のグリッド grid2 を作成します。このグリッドは、ドロップダウン メニューのレイアウト、2 つのスピナー、およびそれらのラベルを管理します。

  • ドロップダウン メニューに、findMethodSelected という名前のコールバック関数を作成します。ドロップダウン メニューの値が 'Quartiles' に変更されたとき、コールバックで grid.RowHeight{2}0 に設定することで、grid2 の 2 行目のコンポーネントが非表示になります。

showhide.m というプログラム ファイルを作成します。次に、このコードをファイルに貼り付けて実行します。

function showhide
    
    f = uifigure('Name','Statistical Analysis');
    
    % Create grid1 in the figure
    grid1 = uigridlayout(f);
    grid1.RowHeight = {'1x'};
    grid1.ColumnWidth= {220,'1x'};
    
    % Add a panel and axes
    p = uipanel(grid1);
    ax = uiaxes(grid1);

    % Create grid2 in the panel
    grid2 = uigridlayout(p);
    grid2.RowHeight = {22, 22, 22};
    grid2.ColumnWidth = {80,'1x'};

    % Add method label and drop-down
    findMethodLabel = uilabel(grid2,'Text','Find Method:');
    findMethod = uidropdown(grid2,'Items',{'Moving median','Quartiles'});
    findMethod.ValueChangedFcn = @findMethodSelected;

    % Add window size label and spinner
    winSizeLabel = uilabel(grid2,'Text','Window Size:');
    winSize = uispinner(grid2,'Value',0);

    % Add threshold label and spinner
    thresLabel = uilabel(grid2,'Text','Threshold:');
    thres = uispinner(grid2,'Value',3);

        function findMethodSelected(src,~)
            method = src.Value;

            switch method
            case 'Quartiles'
                % Collapse the second row (hides winSize spinner)
                grid2.RowHeight{2} = 0;
            case 'Moving median'
                % Expand the second row
                grid2.RowHeight{2} = 22;
            end 
        end
end

アプリで [Find Method] メソッドを [Quartiles] に設定すると、[Window Size] のラベルとその横にあるスピナーが非表示になります。

参考

|