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

uigridlayout

グリッド レイアウト マネージャーの作成

説明

g = uigridlayout は、2 行 2 列のグリッド レイアウトを新しい Figure 内に作成し、GridLayout オブジェクトを返します。MATLAB® は関数 uifigure を呼び出してこの Figure を作成します。

グリッド レイアウトはアプリのレイアウトに有用です。これによって、Figure またはコンテナー全体にわたる不可視のグリッドの行と列に沿って、UI コンポーネントが配置されます。コンポーネントを配置するこの手法は、Position ベクトルにピクセル値を設定するよりも管理が容易です。

g = uigridlayout(parent) は、指定された親コンテナー内にグリッド レイアウトを作成します。親には、関数 uifigure を使用して作成された Figure か、またはその子コンテナーのいずれかを指定できます。

g = uigridlayout(___,sz) は、グリッドのサイズをベクトル sz として指定します。このベクトルの最初の要素は行数で、2 番目の要素は列数です。sz 引数は単独で指定するか、または parent 引数の後に指定します。

g = uigridlayout(___,Name,Value) は 1 つ以上の名前と値のペアの引数を使用して、GridLayout のプロパティ値を指定します。名前と値のペアの引数は、上記いずれかの構文にある他のすべての引数の後に指定します。

すべて折りたたむ

Figure とグリッドを作成します。その後、行の高さと列の幅を設定してグリッドを構成します。ここでは、上の 2 行が 22 ピクセルで固定され一番下の行が可変高となるように、3 行 2 列のグリッドを構成します。左の列の幅を 150 ピクセルに設定し、右の列が可変幅となるように設定します。グリッドは Figure 全体を覆っていますが、グリッドが不可視であるため、Figure は空であるように見えます。

f = uifigure('Position',[100 100 440 320]);
g = uigridlayout(f);
g.RowHeight = {22,22,'1x'};
g.ColumnWidth = {150,'1x'};

ドロップダウンを 2 つ、リスト ボックスを 1 つ、座標軸コンポーネントを 1 つグリッドに追加します。コンポーネントの Layout プロパティで行または列の位置を指定しない場合、既定では左から右および上から下の順にグリッドに配置されていきます。ここでは、Layout プロパティを設定することで、2 番目のドロップダウン (dd2) とリスト ボックス (chanlist) を特定の行と列に動かします。

% Device drop-down
dd1 = uidropdown(g);
dd1.Items = {'Select a device'};

% Range drop-down
dd2 = uidropdown(g);
dd2.Items = {'Select a range'};
dd2.Layout.Row = 2;
dd2.Layout.Column = 1;

% List box
chanlist = uilistbox(g);
chanlist.Items = {'Channel 1','Channel 2','Channel 3'};
chanlist.Layout.Row = 3;
chanlist.Layout.Column = 1;

% Axes
ax = uiaxes(g);

1 番目から 3 番目の行にまたがって垂直方向のスペースを埋めるように、座標軸を設定します。

ax.Layout.Row = [1 3];

Figure のサイズを変更すると、左の列で使用されていないスペースを埋めるように、座標軸の拡大と縮小が行われます。左側のコンポーネントは固定されたままとなりますが、これは、左の列の幅が 150 ピクセルに定義されているためです。

可変幅の列に異なった重みを割り当てると、各列の幅はその重みに比例したものとなります。可変高の行でも、同じ方法でスペースが割り当てられます。

Figure と 2 行 2 列のグリッドを作成します。続いて、行の高さと列の幅を設定します。ここでは、上の行が 40 ピクセルで固定され、下の行は可変高となります。いずれの列も可変幅をもちますが、2 番目の列には最初の列の 2 倍の重みがあります。グリッドは不可視であるため、Figure は空であるように見えます。

f = uifigure('Position',[100 100 437 317]);
g = uigridlayout(f,[2 2]);
g.RowHeight = {40,'1x'};
g.ColumnWidth = {'1x','2x'};

上の行の両列にまたがるラベルを追加します。その後、下の行の各列に座標軸コンポーネントを追加します。

% Add title
title = uilabel(g,'Text','Market Trends');
title.HorizontalAlignment = 'center';
title.FontSize = 24;
title.Layout.Row = 1;
title.Layout.Column = [1,2];

% Add two axes
ax1 = uiaxes(g);
ax2 = uiaxes(g);

左の列の重みは 1 で、右の列の重みは 2 であるため、右側の座標軸は水平方向のスペースを左側の座標軸の 2 倍使用します。Figure のサイズを変更しても、グリッドではこの比率が維持されます。

UI コンポーネントをパネル内に配置する 1 つの方法は、パネル内にグリッドを作成することです。

Figure と 1 行 2 列のグリッドを作成します。続いて、列の幅を設定します。ここでは、左の列が 220 ピクセルに固定され、右の列は可変幅となっています。グリッドは不可視であるため、Figure は空であるように見えます。

f = uifigure('Position',[100 100 500 315]);
grid1 = uigridlayout(f,[1 2]);
grid1.ColumnWidth = {220,'1x'};

パネルと座標軸を grid1 に追加します。

p = uipanel(grid1,'Title','Configuration');
ax = uiaxes(grid1);

grid2 という名前のグリッドをパネル内に作成します。続いて、3 つのコンポーネントと 3 つのラベルを grid2 内に配置します。grid2 の左の列によって、ラベルはコンポーネントと揃えて配置されます。各行では 22 ピクセルのみが使用されるため、パネルには 3 番目の行の下に余分なスペースがあります。

% Grid in the panel
grid2 = uigridlayout(p,[3 2]);
grid2.RowHeight = {22,22,22};
grid2.ColumnWidth = {80,'1x'};

% Device label
dlabel = uilabel(grid2);
dlabel.HorizontalAlignment = 'right';
dlabel.Text = 'Device';

% Device drop-down
devicedd = uidropdown(grid2);
devicedd.Items = {'Select a device'};

% Channel label
chlabel = uilabel(grid2);
chlabel.HorizontalAlignment = 'right';
chlabel.Text = 'Channel';

% Channel drop-down
channeldd = uidropdown(grid2);
channeldd.Items = {'Channel 1', 'Channel 2'};

% Rate Label
ratelabel = uilabel(grid2);
ratelabel.HorizontalAlignment = 'right';
ratelabel.Text = 'Rate (scans/s)';

% Rate edit field
ef = uieditfield(grid2, 'numeric');
ef.Value = 50;

Figure のサイズを変更すると、grid1 の左の列で使用されていないスペースを埋めるように、座標軸の拡大と縮小が行われます。列の幅が 220 ピクセルに指定されているため、パネルは固定されたままとなります。

入れ子にされたグリッドによって、コンポーネントのサブセットを管理することができます。この場合は 3 つのグリッドがあり、1 つ目は Figure 全体を覆うグリッド、2 つ目はコンポーネントの垂直スタックを管理するグリッド、3 つ目は垂直スタックの下部で横に並ぶ 2 つのボタンを管理するグリッドです。

Figure と 1 行 2 列のグリッドを作成します。続いて、列の幅を設定します。ここでは、左の列が 150 ピクセルに固定され、右の列は可変幅となっています。グリッドは不可視であるため、Figure は空であるように見えます。

f = uifigure('Position',[100 100 500 315]);
grid1 = uigridlayout(f,[1 2]);
grid1.ColumnWidth = {150,'1x'};

grid2 という名前の 4 行 1 列のグリッドを、grid1 の最初の列内に作成します。その後、座標軸コンポーネントを grid1 の 2 番目の列に追加します。

grid2 = uigridlayout(grid1,[4 1]);
grid2.RowHeight = {22,22,22,44};

ax = uiaxes(grid1);

3 つのドロップダウンを、grid2 の最初の 3 つの行に追加します。

% Routes drop-down
ddRoutes = uidropdown(grid2);
ddRoutes.Items = {'Route 1', 'Route 2'};

% Direction drop-down
ddDirection = uidropdown(grid2);
ddDirection.Items = {'Inbound', 'Outbound'};

% Time drop-down
ddTime = uidropdown(grid2);
ddTime.Items = {'Morning', 'Afternoon'};

grid3 という名前の 1 行 2 列のグリッドを、grid2 の最後の行内に作成します。その後、2 つのボタンを grid3 に追加します。grid3 の左端と右端でパディングを削除し、ボタンがドロップダウンの左端と右端に揃うようにします。

grid3 = uigridlayout(grid2,[1 2]);
grid3.Padding = [0 10 0 10];
b1 = uibutton(grid3,'Text','Start');
b2 = uibutton(grid3,'Text','Stop');

Figure のサイズを変更すると、grid1 の左の列で使用されていないスペースを埋めるように、座標軸の拡大と縮小が行われます。左側のコンポーネントは固定されたままとなりますが、これは、左の列の幅が 150 ピクセルに定義されているためです。

ピクセル座標または位置名を指定して、スクロール可能なグリッド レイアウトの子コンポーネントを表示します。

5 行 2 列のグリッド レイアウトを作成し、グリッドの Scrollable プロパティを 'on' に設定します。その後、ラベル、テーブル、パネルをグリッドに追加します。パネルの Scrollable プロパティを 'off' に設定し、チャートをパネルに追加します。

uf = uifigure('Position',[782 497 435 311]);
g = uigridlayout(uf,'Scrollable','on');
g.RowHeight = {22,40,22,22,400};
g.ColumnWidth = {400,400};

lbl = uilabel(g,'Text','Tsunamis');
lbl.Layout.Row = 2;
lbl.Layout.Column = [1,2];
lbl.HorizontalAlignment = 'center';
lbl.FontSize = 28;

tsunamis = readtable('tsunamis.xlsx');
tsunamis.Cause = categorical(tsunamis.Cause);
t = uitable(g,'Data',tsunamis);
t.Layout.Row = [3,5];
t.Layout.Column = 2;

p = uipanel(g);
p.Scrollable = 'off';
p.Layout.Row = [3,5];
p.Layout.Column = 1;
gb = geobubble(p,tsunamis.Latitude,tsunamis.Longitude,...
    tsunamis.MaxHeight,tsunamis.Cause);

グリッド内の位置にスクロールします。

scroll(g,100,-30);

次に、位置名を使用して、グリッドの右下の隅にスクロールします。

scroll(g,'bottom','right');

入力引数

すべて折りたたむ

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

グリッドのサイズ。2 要素ベクトルとして指定します。最初の要素は行数、2 番目の要素は列数です。どちらの値も 0 より大きくなければなりません。RowHeight プロパティまたは ColumnWidth プロパティを設定せずにこの引数を指定すると、MATLAB は行の高さと列の幅を '1x' に自動設定します。

名前と値のペアの引数

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

例: uigridlayout('RowHeight',{100,100}) は、高さが 100 ピクセルの 2 つの行を含むグリッドを作成します。

メモ

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

列幅。数値、あるいは文字 'x' と組み合わされた数値のいずれかを含む cell 配列として指定します。値の任意の組み合わせを指定できます。cell 配列内の要素数が、グリッド内の列数を制御します。たとえば、4 列のグリッドを作成するには、1 行 4 列の cell 配列を指定します。

列幅には 2 つの異なったタイプがあります。

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

  • 可変幅 — 文字 'x' と組み合わされた数値を指定します (たとえば、'1x')。親コンテナーのサイズが変更されると、列幅は拡大または縮小します。可変幅の列は、固定幅の列によって使用されずに残っている横方向のスペースを埋めます。文字 'x' と組み合わせる数値は、残りのスペースをすべての可変幅の列間で分割するための重みです。グリッドに可変幅の列が 1 つしかない場合は、数値とは無関係に残りのスペースがすべて使用されます。同じ数値を使用する可変幅の列が複数ある場合は、スペースが等しく共有されます。それ以外の場合、スペースの量は数値に比例します。

たとえば、{100,'2x','1x'} は最初の列に対し 100 ピクセルを指定し、後の 2 つの列が残りの横方向のスペースを共有します。2 番目の列は、3 番目の列の 2 倍のスペースを使用します。

レイアウトの一部の特性を変更すると、このプロパティの値に影響が及ぶ場合があります。たとえば、完全に入力されたグリッドに対してさらにコンポーネントを追加した場合、グリッドのサイズは、新たなコンポーネントを収容するように変更されます。また、コンポーネントを含む列を削除しようとしても、それらのコンポーネントがその列の外に移されるまで ColumnWidth プロパティは変更されません。

行の高さ。数値、あるいは文字 'x' と組み合わされた数値のいずれかを含む cell 配列として指定します。値の任意の組み合わせを指定できます。cell 配列内の要素数が、グリッド内の行数を制御します。たとえば、4 行をもつグリッドを作成するには、1 行 4 列の cell 配列を指定します。

行の高さには、2 つの異なったタイプがあります。

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

  • 可変の高さ — 文字 'x' と組み合わされた数値を指定します (たとえば、'1x')。親コンテナーのサイズが変更されると、行は拡大または縮小します。可変の高さの行は、固定の高さの行によって使用されずに残っている縦方向のスペースを埋めます。文字 'x' と組み合わせる数値は、残りのスペースをすべての可変高の行間で分割するための重みです。グリッドに可変の高さの行が 1 つしかない場合は、数値とは無関係に残りのスペースがすべて使用されます。同じ数値を使用する可変の高さの行が複数ある場合は、スペースが等分されます。それ以外の場合、スペースの量は数値に比例します。

たとえば、{100,'2x','1x'} は最初の行に対し 100 ピクセルを指定し、後の 2 つの行に残りの縦方向のスペースが配分されます。2 番目の行は、3 番目の行の 2 倍のスペースを使用します。

レイアウトの一部の特性を変更すると、このプロパティの値に影響が及ぶ場合があります。たとえば、完全に入力されたグリッドに対してさらにコンポーネントを追加した場合、グリッドのサイズは、新たなコンポーネントを収容するように変更されます。また、コンポーネントを含む行を削除しようとしても、それらのコンポーネントがその行の外に移されるまで RowHeight プロパティは変更されません。

ヒント

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

R2018b で導入