Main Content

このページの翻訳は最新ではありません。ここをクリックして、英語の最新版を参照してください。

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.RowLayout.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.RowLayout.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 にグリッド レイアウト マネージャーを適用する方法を示します。また、テキストベースのコンポーネントのサイズ変更に合わせて行と列が自動調整されるように、グリッド レイアウト マネージャーを構成する方法も示します。

  1. アプリを App Designer で開きます。[設計ビュー] で、グリッド レイアウト マネージャーを Figure にドラッグします。

  2. Figure に追加したグリッド レイアウト マネージャーを右クリックして、コンテキスト メニューから [グリッド レイアウトの構成] を選択します。

  3. ドロップダウン メニューと表を含むグリッドの行と列を 1 つずつ選択し、それらの構成のサイズ変更を [適合] に変更します。終了したら、コンポーネント ブラウザー[インスペクター] タブで、ColumnWidth の値が 12.64x,1.89x,fit,fit,fit,fitRowHeight の値が 1x,fit,1.93x,fit,3.07x,fit であることを確認します。

  4. [コード ビュー] に切り替えます。関数 allchild によって、app.UIFigure 内ではなく app.GridLayout 内のコンポーネントにフォント名とフォント サイズが設定されるよう、それぞれの DropDownValueChanged コールバックを更新します。

  5. 次に、アプリを実行して、コンポーネントのサイズ変更に合わせてグリッドがどのように調整されるかを確認します。

参考

関数

プロパティ