プログラミングによるアプリのレイアウト

アプリは、Figure と、Figure の内部に配置する 1 つ以上の UI コンポーネントとで構成されます。MATLAB^® のアプリ作成ツールには、アプリのレイアウトをプログラムにより管理するためのさまざまなオプションが用意されています。たとえば、Figure とそのコンポーネントのサイズや位置を指定したり、別のコンポーネントを基準にしてコンポーネントを配置したり、前から後ろへのコンポーネント順序を指定するコードを作成したりできます。

Figure のサイズと位置の管理

Figure はすべてのアプリで最上位のコンテナーとして機能します。関数 uifigure を使用して、アプリ作成用に構成された Figure を作成します。

Figure の Position プロパティを設定して、アプリ ユーザーのディスプレイにおける Figure のサイズと位置を更新します。Position を次の形式の 4 要素ベクトルとして指定します。

[left bottom width height]

ベクトルの各要素は距離 (ピクセル単位) を表します。これには、Figure の境界線とタイトル バーは含まれません。次の表で、各要素について説明します。

要素	説明
left	プライマリ ディスプレイの左端から Figure ウィンドウの内側左端までの距離
bottom	プライマリ ディスプレイの下端から Figure ウィンドウの内側下端までの距離
width	Figure の内側の右端と左端の間の距離
height	Figure の内側の上端と下端の間の距離

たとえば、以下のコードでは、プライマリ ディスプレイの下端から 100 ピクセル、左端から 200 ピクセル、幅が 400 ピクセル、高さが 300 ピクセルの Figure ウィンドウを作成します。これには、Figure の境界線とタイトル バーは含まれません。

fig = uifigure;
fig.Position = [100 200 400 300];

ユーザーのディスプレイ サイズに関係なく、アプリ ユーザーの画面上の特定の位置に Figure ウィンドウを配置するには、関数 movegui を使用します。Figure および表示位置を指定します。たとえば、以下のコードでは、Figure ウィンドウがアプリ ユーザーのプライマリ ディスプレイの中央に移動します。

movegui(fig,'center');

UI コンポーネントのレイアウト

アプリの外観を設計するには、Figure ウィンドウ内の UI コンポーネントのサイズと位置を設定します。次のいずれかの手法を使用して、コンポーネントをレイアウトします。

• グリッド レイアウト マネージャーの使用 — UI コンポーネントを別のコンポーネントを基準にして配置し、アプリでコンポーネントのサイズ変更を管理できるようにします。ほとんどのアプリ作成には、この手法が推奨されます。

• Position プロパティの指定 — 初期のアプリ レイアウトでコンポーネントを手動で配置します。この手法は、グリッド レイアウト マネージャーのオプションにはない、カスタムのサイズ変更動作を指定する場合に便利です。

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

グリッド レイアウト マネージャーは、UI コンポーネントを行および列でレイアウトできるコンテナーです。関数 uigridlayout を使用してアプリのグリッド レイアウト マネージャーを作成し、メインの Figure ウィンドウをグリッド レイアウト マネージャーの親にします。GridLayout オブジェクトのプロパティを設定して、グリッドのサイズと構成を管理できます。グリッド レイアウト マネージャーをコンポーネントの親にしてコンポーネントをグリッドに追加し、各コンポーネントの行と列の Layout プロパティを設定することで行と列を指定します。

たとえば、グリッド レイアウト マネージャーを使用して、ボタン、スピナー、およびテキスト エリアを含むアプリをレイアウトします。ボタンは固定サイズにしますが、他のコンポーネントは水平方向の余白に合わせて広がるようにします。また、垂直方向の余白に合わせて拡張できる空の行をコンポーネントの上下に追加して、コンポーネントを垂直方向に中央揃えにします。

これを行うには、[4 2] を 2 番目の入力として uigridlayout に渡すことで、4 行および 2 列のグリッドを作成します。

fig = uifigure;
fig.Position(3:4) = [300 300];
gl = uigridlayout(fig,[4 2]);

次に、UI コンポーネントを作成し、グリッド レイアウト マネージャーをそれらの親にします。Layout.Row プロパティと Layout.Column プロパティを使用してコンポーネントをレイアウトします。

ボタンとスピナーを 2 行目に追加して、隣り合わせに配置します。

btn = uibutton(gl);
btn.Layout.Row = 2;
btn.Layout.Column = 1;

spn = uispinner(gl);
spn.Layout.Row = 2;
spn.Layout.Column = 2;

テキスト エリアを 3 行目に追加して、下に配置します。テキスト エリアの Layout.Column プロパティを [1 2] に設定して、グリッドの 1 列目と 2 列目の両方にまたがるようにテキスト エリアをレイアウトします。

ta = uitextarea(gl);
ta.Layout.Row = 3;
ta.Layout.Column = [1 2];

グリッド レイアウト マネージャーを作成すると、既定では、各行の高さおよび各列の幅は同じになります。グリッド レイアウト マネージャーの RowHeight プロパティと ColumnWidth プロパティを設定して、UI コンポーネントのサイズと位置を変更します。

2 行目の高さは、その内容に合わせて自動的に拡張されるように設定し、3 行目の高さは、100 ピクセルに固定されるように設定します。1 行目と 4 行目の高さを '1x' に設定します。このように指定すると、最上行と最下行は同じ高さになり、残りの垂直方向のスペースに合わせて拡張されるため、コンポーネントは必ず Figure ウィンドウの中心に配置されます。

gl.RowHeight = {'1x','fit',100,'1x'};

1 列目の幅は、その内容に合わせて自動的に拡大縮小されるように設定します。これにより、ボタンの幅がテキストの長さに合わせてサイズ変更されます。2 列目の幅を '1x' に設定して、残りの水平方向のスペースを埋めます。

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

グリッド レイアウト マネージャーを使用するもう 1 つのメリットとして、ColumnWidth プロパティと RowHeight プロパティを使用すると、アプリ ユーザーが Figure ウィンドウのサイズを変更したときにアプリ内で UI コンポーネントのサイズがどのように変わるかを管理できます。詳細については、プログラムによるアプリのサイズ変更動作の管理を参照してください。

Position プロパティの指定

UI コンポーネントをアプリに手動で配置することもできます。すべての UI コンポーネントには Position プロパティがあります。このプロパティを使用して、Figure ウィンドウにおけるコンポーネントのサイズと位置を制御します。Position の値を [left bottom width height] 形式の 4 要素ベクトルとして指定します。

たとえば、Position プロパティを使用して、ボタン、スピナー、およびテキスト エリアを含むアプリをレイアウトするとします。ボタンとスピナーは、Figure 下端からの距離もそれらの高さも互いに同じになるように指定して、水平方向に揃えます。テキスト エリアをボタンとスライダーの下に配置し、その幅を上にある 2 つのコンポーネントの幅に合わせて設定します。

fig = uifigure;
fig.Position(3:4) = [300 300];

btn = uibutton(fig);
btn.Position = [10 195 45 22];

spn = uispinner(fig);
spn.Position = [65 195 225 22];

ta = uitextarea(fig);
ta.Position = [10 85 280 100];

UI コンポーネントの位置は、コンポーネントの直接の親を基準に計算されます。たとえば、パネル内にラベルを作成する場合、Label オブジェクトの位置ベクトルにおける left と bottom の値は、Figure ウィンドウではなく、パネルの左端と下端からの距離を示します。

前から後ろへのコンポーネント順序の変更

UI コンポーネントの "重なり順序" によって、アプリ内のどのコンポーネントが、オーバーラップしている他のコンポーネントより前に表示されるかが決まりす。コンポーネントの既定の重なり順序は次のとおりです。

• UI コンポーネントとコンテナーは、作成された順序で表示されます。新しいコンポーネントは、既存のコンポーネントの前に表示されます。

• axes オブジェクトとその他のグラフィックス オブジェクトは、UI コンポーネントとコンテナーの背後に表示されます。

この既定の順序が適用されないのは、タブ グループ内のタブの場合です。タブ グループ内で最初に作成されたタブは、他のタブの上に表示されます。

たとえば、次のコードでは、Figure 内でオーバーラップしている 3 つのイメージを作成します。最初に作成されるイメージは一番下にあり、最後に作成されるイメージは一番上に表示されます。

fig = uifigure;
fig.Position = [100 100 350 300];

peppers = uiimage(fig);
peppers.ImageSource = "peppers.png";

street = uiimage(fig);
street.ImageSource = "street1.jpg";
street.Position(1:2) = [130 150];

nebula = uiimage(fig);
nebula.ImageSource = "ngc6543a.jpg";
nebula.Position(1:2) = [150 80];

アプリの重なり順序を変更するには、関数 uistack を使用します。たとえば、イメージの重なり順序を並べ替えて、ストリートのイメージを前面にします。

uistack(street,"top")

重なり順序にはいくつかの制限があります。axes オブジェクトとその他のグラフィックス オブジェクトは、任意の順序で重なり合わせることができます。ただし、axes オブジェクトとその他のグラフィックス オブジェクトは常に UI コンポーネントとコンテナーの背後に表示されます。

この制限を回避するには、個々のコンテナーをグラフィックス オブジェクトの親にします。そうすれば、これらのコンテナーを任意の順序で重ねることができます。コンテナーをグラフィックス オブジェクトの親にするには、グラフィックス オブジェクトの Parent プロパティをそのコンテナーに設定します。たとえば、パネルを Axes オブジェクトの親にするには、Axes の Parent プロパティをパネルにします。

関連するトピック

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