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

グリッドレイアウトマネージャーでは、UI コンポーネントのピクセル位置を Position ベクトルで設定することなく、アプリをレイアウトする方法が提供されます。サイズ変更可能なアプリの場合、グリッドレイアウトマネージャーは App Designer の自動サイズ変更動作よりも高い柔軟性を提供します。また、SizeChangedFcn コールバック関数をコード化するよりも、構成が簡単です。

グリッドレイアウトマネージャーの追加と構成

App Designer では、グリッドレイアウトマネージャーを空のアプリまたは Figure 内の空のコンテナーコンポーネントに追加できます。

グリッドレイアウトマネージャーを使用するには、グリッドレイアウトを [コンポーネントライブラリ] からキャンバスへとドラッグします。あるいは、Figure またはコンテナーを右クリックし、コンテキストメニューから [グリッドレイアウトを適用] を選択します。グリッドレイアウトマネージャーは、その配置されるアプリウィンドウまたはコンテナー全体をカバーします。App Designer キャンバス上でアクティブに構成しない限り、これは非表示となります。

グリッドレイアウトマネージャーを構成するには、[設計ビュー] で、追加先の領域をクリックしてグリッドレイアウトにフォーカスを移動します。次に、グリッドレイアウトマネージャーの左上隅からボタンを選択するか、またはグリッドレイアウトを右クリックして [グリッドレイアウトの構成] を選択します。その後、行または列を選択し、[構成のサイズ変更] メニューで [適合]、[重み付け]、または [固定] を指定します。これらのオプションの詳細については、GridLayout のプロパティを参照してください。また、行や列の追加や削除もできます。

Grid layout manager resize configuration options. A row is selected, and there are options to add or remove rows, and to specify the row height as fit, weighted, or fixed.

ピクセルベースの位置からグリッドレイアウトマネージャーへのコンポーネントの変換

UI Figure またはコンテナー内のコンポーネントを、ピクセルベースの配置からグリッドレイアウトマネージャーに変換できます。グリッドレイアウトマネージャーを、コンポーネントが含まれる UI Figure またはコンテナーに適用すると、そのコンポーネントはグリッドレイアウトマネージャーに追加され、その Position ベクトルはグリッド内の場所を指定する Layout.Row と Layout.Column の値に置き換えられます。コンポーネントの階層も、[コンポーネントブラウザー] 内で更新されます。

Two images of the Component Browser with some components. On the left, the components are listed under app.UIFigure. On the right, the components are listed under app.GridLayout.

グリッドレイアウトマネージャーは、他のコンテナーコンポーネントとは異なったプロパティをサポートします。場合によってはコールバックコードを更新する必要がありますが、それは、コードがこうしたタイプのプロパティを設定する場合や、グリッドレイアウトによって管理されると利用できないコンポーネントプロパティをコードが設定する場合です。コールバックまたはその他の動作が予想どおりに機能しない場合は、次の表に挙げられているようなコードパターンを探してください。

現象または警告	説明	推奨アクション
`警告: 'GridLayout' の成分について 'Position'、'InnerPosition'、または 'OuterPosition' を設定できません。`	グリッドレイアウトマネージャーでは `Position` プロパティをコンポーネントに設定できません。	コンポーネントのグリッド位置を指定するには、適切な `Row` 値と `Column` 値を使って `Layout` プロパティを設定します。
`エラーmatlab.ui.container.GridLayout/set` `FontSize プロパティが GridLayout クラスにありません。`	他のコンテナーコンポーネントに設定したプロパティが、グリッドレイアウトマネージャーではサポートされていない可能性があります。	コードを更新して、対象とするコンテナーにプロパティが設定されるようにします。
コンテナーに割り当てられているコンテキストメニューが、実行中のアプリで開きません。	コンテナーに追加したグリッドレイアウトマネージャーが、コンテナー全体に広がります。そのため、クリックイベントがコンテナー上ではなくグリッド上で発生します。	コンテキストメニューを再度グリッドレイアウトに割り当てます。

グリッドレイアウトマネージャーからピクセルベースの位置へのコンポーネントの変換

R2022a 以降では、アプリからグリッドレイアウトマネージャーを削除し、グリッド内のコンポーネントを変換してピクセルベースの配置を使用することもできます。コンテナーからグリッドレイアウトマネージャーを削除するには、キャンバス内でコンテナーを右クリックし、[グリッドレイアウトの削除] を選択します。

コンポーネントが含まれているグリッドレイアウトマネージャーを UI Figure またはコンテナーから削除すると、グリッドレイアウトマネージャーが削除され、元々グリッドレイアウトマネージャーが含まれていたコンテナーにコンポーネントが追加されます。グリッド内のコンポーネントの場所を指定していた Layout.Row と Layout.Column の値は Position ベクトルに置き換えられます。コンポーネントの階層も、[コンポーネントブラウザー] 内で更新されます。

Two images of the Component Browser with some components. On the left, the components are listed under app.GridLayout. On the right, the components are listed under app.UIFigure.

場合によってはコールバックコードを更新する必要がありますが、それは、削除したグリッドレイアウトマネージャーのプロパティが設定されている場合です。

例: グリッドレイアウトマネージャーをピクセルベースの位置の代わりに使用するようコンポーネントを変換

アプリを開く

このアプリでは、既にコンポーネントの備わっているアプリの Figure にグリッドレイアウトマネージャーを適用する方法を示します。また、テキストベースのコンポーネントのサイズ変更に合わせて行と列が自動調整されるように、グリッドレイアウトマネージャーを構成する方法も示します。

アプリを App Designer で開きます。[設計ビュー] で、グリッドレイアウトマネージャーを Figure にドラッグします。
Figure に追加したグリッドレイアウトマネージャーを右クリックして、コンテキストメニューから [グリッドレイアウトの構成] を選択します。
ドロップダウンメニューと表を含むグリッドの行と列を 1 つずつ選択し、それらの構成のサイズ変更を [適合] に変更します。終了したら、コンポーネントブラウザーの [インスペクター] タブで、ColumnWidth の値が 12.64x,1.89x,fit,fit,fit,fit、RowHeight の値が 1x,fit,1.93x,fit,3.07x,fit であることを確認します。
[コードビュー] に切り替えます。関数 allchild によって、app.UIFigure 内ではなく app.GridLayout 内のコンポーネントにフォント名とフォントサイズが設定されるよう、それぞれの DropDownValueChanged コールバックを更新します。
次に、アプリを実行して、コンポーネントのサイズ変更に合わせてグリッドがどのように調整されるかを確認します。