このページの内容は最新ではありません。最新版の英語を参照するには、ここをクリックします。

プログラムによるアプリのサイズ変更動作の管理

既定では、関数 uifigure を使用して作成されたアプリはサイズ変更可能です。アプリ ユーザーが実行時にウィンドウのサイズを変更すると、コンポーネントの位置とサイズが自動的に変更されます。

アプリのサイズ変更をより柔軟に行う場合は、次のいずれかの方法を使用します。

• グリッド レイアウト マネージャーの使用 — コンポーネントをグリッドに追加し、グリッドの行と列をどのようにサイズ変更するのかを指定します。

• サイズ変更動作を管理するコードの記述 — UI コンポーネントのサイズを変更する SizeChangedFcn コールバックを記述します。Figure ウィンドウのサイズが変更されるごとにコールバックが実行されます。

• 特定のコンポーネントのサイズ変更の無効化 — アプリ内の特定のコンテナーの AutoResizeChildren プロパティを指定します。

• アプリのサイズ変更の完全な無効化 — Figure の Resize プロパティを 'off' に設定します。

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

グリッド レイアウト マネージャーは、UI コンポーネントをグリッドでレイアウトできるコンテナーです。グリッド レイアウト マネージャーを構成して、グリッド内のコンポーネントの初期レイアウトとサイズ変更動作を指定できます。

関数 uigridlayout を呼び出し、最初の引数として Figure を指定することで、UI Figure ウィンドウにグリッド レイアウト マネージャーを作成します。グリッド レイアウト マネージャーの RowHeight プロパティと ColumnWidth プロパティを設定して、アプリ ユーザーが Figure ウィンドウのサイズを変更したときの各行および各列の動作を指定します。RowHeight および ColumnWidth は、行または列ごとに 1 つの値をもつ cell 配列として指定します。行の高さおよび列の幅には、次の 3 つの異なるタイプがあります。

• 適合サイズ — 'fit' を指定します。自動的に内容が収まるように行の高さまたは列の幅が固定されます。アプリのサイズが変更されても、次元は変更されません。

• 固定サイズ — ピクセル単位で数値を指定します。行の高さまたは列の幅は、指定されたピクセル数で固定されます。アプリのサイズが変更されても、次元は変更されません。

• 可変サイズ — 文字 'x' と組み合わされた数値を指定します (たとえば、'1x')。可変の高さの行は、固定の高さの行によって使用されずに残っている縦方向のスペースを埋めます。可変の幅の列は、固定の幅の行によって使用されずに残っている横方向のスペースを埋めます。文字 'x' と組み合わせる数値は、残りのスペースを分割するための重みです。ここで、スペースの量はこの数値に比例したものになります。たとえば、ある行の幅が '2x' で別の行の幅が '1x' の場合、アプリのサイズが変更されたときに最初の行が 2 番目の行の 2 倍に拡大または縮小されます。

たとえば、次のコードでは 4 つの行を含むグリッド レイアウト マネージャーを作成しています。1 番目の行の高さをその内容が収まるようにサイズ設定し、2 番目の行を 200 ピクセルに固定し、最後の 2 行で残りの縦方向のスペースを不均等に共有します。3 番目の行は、4 番目の行の 2 倍のスペースを使用します。

fig = uifigure;
gl = uigridlayout(fig,[4 1]);
gl.RowHeight = {'fit',200,'2x','1x'};

グリッド レイアウト マネージャーを使用したアプリのレイアウトの詳細については、プログラミングによるアプリのレイアウトを参照してください。

例: グリッド レイアウト マネージャーを使用したサイズ変更可能なアプリ

この例では、グリッド レイアウト マネージャーを構成してアプリのサイズ変更動作を指定する方法を示します。アプリには、ドロップダウン、リスト ボックス、データを含むテーブルが含まれています。3 行 2 列のグリッド レイアウトを使用して UI Figure ウィンドウを作成します。次に、UI コンポーネントを作成し、Layout.Row プロパティおよび Layout.Column プロパティを指定してグリッド レイアウトに追加します。

fig = uifigure;
gl = uigridlayout(fig,[3 2]);

dd = uidropdown(gl);
dd.Layout.Row = 1;
dd.Layout.Column = 1;

lb = uilistbox(gl);
lb.Layout.Row = 2;
lb.Layout.Column = 1;

tbl = uitable(gl);
tbl.Data = rand(100);
tbl.Layout.Row = [1 3];
tbl.Layout.Column = 2;

グリッド レイアウト マネージャーの RowHeight プロパティと ColumnWidth プロパティを設定して、アプリのレイアウトとサイズ変更の動作を構成します。

• 最初の行には 'fit' を指定します。これにより、ドロップダウンの高さに合うように行の高さが自動的に調整されます。

• 2 番目の行には高さ 80 ピクセルを指定します。これにより、アプリのサイズが変更されても、リスト ボックスの高さは固定されたままです。

• 3 番目の行には高さ '1x' を指定します。これにより、残っている縦方向のスペースが埋められます。

• 最初の列に幅 '1x'、2 番目の列に幅 '2x' を指定します。これにより、すべてのコンポーネントが横方向にサイズ変更され、テーブルが常に他のコンポーネントの 2 倍の横方向のスペースを占有するようになります。

gl.RowHeight = {'fit',80,'1x'};
gl.ColumnWidth = {'1x','2x'};

ウィンドウの隅のいずれかをドラッグして Figure ウィンドウのサイズを変更します。UI コンポーネントが、グリッド レイアウトの仕様に従ってサイズ変更されます。

サイズ変更動作を管理するコードの記述

グリッド レイアウト マネージャーでサポートされていないサイズ変更動作を提供する場合は、SizeChangedFcn コールバックを使用したアプリのレイアウトの管理を検討してください。たとえば、以下を行う場合にこの方法を使用します。

• 定義する最小サイズまでまたは最大サイズまで、コンポーネントのサイズを変更する。

• 非線形のサイズ変更動作を実装する。

この方法でサイズ変更動作を指定するには、次の手順に従います。

1. アプリ内の各コンテナーにコールバック関数を記述して、ウィンドウ サイズの変更時にその子のレイアウトを管理します。

2. 各コンテナーの AutoResizeChildren プロパティを 'off' に設定します。

3. 各コンテナーの SizeChangedFcn プロパティを、適切なコールバック関数へのハンドルに設定します。

最も正確な結果が得られるように、各コンテナーのすべてのレイアウトのコードを SizeChangedFcn コールバックの内側に配置することをお勧めします。

SizeChangedFcn コールバックは、次のいずれかが生じると実行されます。

• コンテナーが初めて表示された。

• コンテナーがサイズ変更中に表示された。

• コンテナーがサイズ変更後に初めて表示された。これは、コンテナーが非表示の間にサイズが変更され、その後表示された場合に発生します。

ヒント

SizeChangedFcn が使用する変数がすべて定義されるまで、コンテナーの表示を遅延させることをお勧めします。これにより、SizeChangedFcn コールバックがエラーを返すのを防ぐことができます。コンテナーの表示を遅延させるには、Visible プロパティを 'off' に設定します。SizeChangedFcn コールバックが使用する変数を定義した後で、Visible プロパティを 'on' に設定します。

例: SizeChangedFcn を使用したサイズ変更可能なアプリ

この例では、カスタムのサイズ変更ロジックを使用してボタン グループ内のトグル ボタンのサイズを管理し、座標軸セットの縦横比を固定するアプリを作成する方法を示します。現在のフォルダー内に sizeChangedApp.m という名前のファイルを作成し、ファイルの先頭で main 関数 sizeChangedApp を定義します。

createComponents という名前の補助関数を記述して Figure および UI コンポーネントを作成し、その UI コンポーネントを Figure の UserData に保存します。これにより、Figure のコールバック関数 SizeChangedFcn 内でアプリのデータにアクセスできます。アプリのデータの共有の詳細については、コールバック間のデータ共有を参照してください。

アプリの main 関数で関数 createComponents を呼び出してから、Figure ウィンドウを表示します。

function sizeChangedApp
  fig = createComponents;
  fig.Visible = 'on';
end

% Create UI components
function fig = createComponents
  fig = uifigure('Visible','off', ...
    'AutoResizeChildren','off', ...
    'SizeChangedFcn',@figResize);
  btngrp = uibuttongroup(fig, ...
      'AutoResizeChildren','off', ...
      'SizeChangedFcn',@bgResize);
  btn1 = uitogglebutton(btngrp);
  btn2 = uitogglebutton(btngrp);
  ax = uiaxes(fig);
  
  % Store components
  fig.UserData = struct(...
    'ButtonGroup',btngrp, ...
    'Button1',btn1, ...
    'Button2',btn2, ...
    'Axes',ax);
end

次に、Figure ウィンドウに対して 1 つのサイズ変更関数 SizeChangedFcn を記述し、ボタン グループに対してもう 1 つのサイズ変更関数を記述します。各関数により、その直下の子のサイズ変更動作を管理します。

Figure ウィンドウでは、figResize という名前のコールバックを記述して、ユーザーがウィンドウのサイズを変更するたびに ButtonGroup および Axes オブジェクトの位置とサイズを管理します。

• Figure の左半分全体にまたがるようにボタン グループを配置します。

• 正方形の縦横比、および Figure の右半分の中心の位置を維持するように座標軸を配置します。

  • axdim でピクセル数を指定して、Axes オブジェクトの幅と高さが同じになるように設定します。axdim の値は、Figure の右半分を完全に埋める値です。ただし、座標軸の各サイズで 10 ピクセルの余白をもたせ、また座標軸が正方形のままになるという制約に従います。コマンド axdim = max(axdim,0) により、座標軸の大きさが負にならないようにします。

  • 座標軸が Figure の右半分内の横方向の中心に配置されるように、座標軸の左端 axleft を設定します。

  • 座標軸が Figure 内の縦方向の中心に配置されるように、座標軸の下端 axbottom を設定します。

function figResize(src,event)
  % Get UserData to access components
  data = src.UserData;
  
  % Get figure size
  figwidth = src.Position(3);
  figheight = src.Position(4);
  
  % Resize button group
  data.ButtonGroup.Position = [1 1 figwidth/2 figheight];
  
  % Resize axes
  axdim = min(figwidth/2,figheight) - 20;
  axdim = max(axdim,0);
  axleft = figwidth/2 + (figwidth/2-axdim)/2;
  axbottom = (figheight-axdim)/2;
  data.Axes.Position = [axleft axbottom axdim axdim];
end

ボタン グループでは、bgResize という名前のコールバックを記述して、ToggleButton オブジェクトの位置とサイズを管理します。このコールバックは、ButtonGroup オブジェクトのサイズが変更されるたびに実行されます。このサイズの変更は、ユーザーが Figure ウィンドウのサイズを変更するたびに生じます。この関数では、ButtonGroup オブジェクトのサイズを基準として 2 つのトグル ボタンを相対的に配置します。

• 各トグル ボタンの左端 btnleft と幅 btnwidth を設定し、左右の両側でボタンの端とコンテナーの端の間に 20 ピクセルのスペースが確保されるようにします。

• 各トグル ボタンの高さ btnheight をボタン グループの高さの 6 分の 1 に設定します。

• 上のボタンの上側のスペースおよび下のボタンの下側のスペースがボタン グループの高さの 4 分の 1 になるように、各トグル ボタンの下端 btn1bottom および btn2bottom を設定します。

以下にアプリのコードを示します。

function bgResize(src,event)
  % Get UserData to access components
  fig = ancestor(src,'figure','toplevel');
  data = fig.UserData;
  
  % Get button group size
  bgwidth = src.Position(3);
  bgheight = src.Position(4);
  
  % Resize button group
  btnleft = 20;
  btn1bottom = bgheight/4;
  btn2bottom = (7/12)*bgheight;
  btnwidth = bgwidth-40;
  btnheight = bgheight/6;
  data.Button1.Position = [btnleft btn1bottom btnwidth btnheight];
  data.Button2.Position = [btnleft btn2bottom btnwidth btnheight];
end

アプリを実行してから、Figure ウィンドウのサイズを変更します。アプリ内のコンポーネントのサイズが Figure ウィンドウのサイズを基準として変更されます。

sizeChangedApp

特定のコンポーネントのサイズ変更の無効化

AutoResizeChildren プロパティは、グリッド レイアウト マネージャーも SizeChangedFcn コールバックも使用せずにアプリの自動サイズ変更動作を制御します。UI Figure、パネル、またはタブなどのすべてのアプリ コンテナーに AutoResizeChildren プロパティがあります。このプロパティは既定では 'on' に設定されています。コンテナーで AutoResizeChildren が 'on' に設定されている場合、アプリ ユーザーが Figure ウィンドウのサイズを変更すると、アプリはそのコンテナーの子のサイズを自動的に変更します。このプロパティを使用して、特定のコンポーネントのサイズ変更を選択的にオフにするには、次のようにします。

• 自動サイズ変更を完全にオフにするには、メイン Figure ウィンドウの AutoResizeChildren を 'off' に設定します。

• 特定のコンポーネントの自動サイズ変更をオフにするには、該当するコンポーネントの親を、AutoResizeChildren が 'off' に設定されているコンテナーに設定します。

親コンテナーとそのいずれかの子の AutoResizeChildren プロパティを変更する場合は、まず親コンテナーの値を設定してから、子コンテナーの値を設定します。

アプリのサイズ変更の完全な無効化

Figure ウィンドウの Resize プロパティは、アプリ ユーザーがウィンドウを対話的にサイズ変更できるかどうかを制御します。Resize の既定値は 'on' です。アプリのレイアウトや動作で一貫したウィンドウ サイズが重要な場合は、Resize を 'off' に設定することを検討してください。

参考

uifigure | uigridlayout

関連するトピック

• プログラムで作成したアプリ用のコールバックの作成
• プログラミングによるアプリのレイアウト
• App Designer でのサイズ変更可能アプリの管理