グリッド レイアウトを使用したアプリ コンポーネントの位置とサイズの管理

このアプリでは、アプリがサイズ変更される際に、グリッド レイアウト マネージャーを使用してアプリ コンポーネントの配置とサイズ変更を制御する方法を示します。グリッド レイアウト マネージャーを使用すると、各コンポーネントのピクセル位置を設定することなく、アプリ コンポーネントのレイアウトを簡単に管理できます。また、グリッド レイアウトにより、サイズ変更動作の柔軟性が向上します。グリッド レイアウト マネージャーの使用の詳細については、App Designer でのグリッド レイアウト マネージャーの使用を参照してください。

グリッド レイアウトでのコンポーネントの動作

このアプリでは、左側のパネルの UI コンポーネントがパルスのパラメーターを制御します。アプリ ウィンドウのサイズに関係なく一貫したエクスペリエンスを提供するために、コントロールはグリッド レイアウト マネージャーを使用してレイアウトされています。グリッド レイアウトは、アプリのサイズが変更されたときのコントロールの配置を管理します。右側のパネルにはデータ可視化用の座標軸が含まれています。これにより、ユーザーがパルスのパラメーターを変更すると、それに応じてプロットが更新されます。グリッド レイアウト内のコンポーネントがサイズ変更にどのように反応するのかを確認するために、アプリ ウィンドウの幅を小さくします。グリッド レイアウト内の各コンポーネントは、アプリ ウィンドウの縮小に合わせて一貫したサイズ比を維持します。

グリッド レイアウトを使用したアプリの作成

[設計ビュー] でグリッド レイアウト マネージャーを追加して構成してから、構成されたレイアウトに UI コンポーネントを追加します。

1. App Designer スタート ページから、自動リフロー機能を備えた新しい 2 パネル アプリを作成します。

2. 左側のパネルにグリッド レイアウトを追加します。App Designer は、アプリ ウィンドウ全体、または配置したコンテナー (ここでは、左側のパネル) にグリッド レイアウトを適用します。

3. グリッドの行と列の数を調整します。グリッド レイアウトを右クリックして、コンテキスト メニューから [グリッド レイアウトの構成] を選択します。行または列を選択することで、[構成のサイズ変更] メニューで行と列を追加および削除できます。この例では、グリッド レイアウトを 7 行 4 列になるように配置します。

4. [構成のサイズ変更] メニューで ColumnWidth プロパティと RowHeight プロパティを設定します。この例では、ノブを含む列の ColumnWidth を "1x" に設定して、アプリのサイズ変更に応じて列が調整されスペースを埋めるようにします。この重み付けされた幅により、ノブの幅が同じになり、グリッド内のスペースを均等に分かち合うようになります。編集フィールドを含む行の RowHeight プロパティを "fit" に設定して、行が自動的に調整されスペースに収まるようにします。

5. [コンポーネント ブラウザー] でグリッド レイアウトの追加プロパティを指定します。ColumnSpacing と RowSpacing の値を編集して列と行の間隔を変更し、Padding プロパティでグリッドの外周の間隔を調整します。これらのプロパティの詳細については、GridLayout のプロパティを参照してください。

6. UI コンポーネントを [コンポーネント ライブラリ] からグリッド レイアウト内の対応する場所にドラッグして、グリッドに追加します。

グリッド レイアウトを使用してアプリをレイアウトした後、[コード ビュー] でユーザー入力に応答するようにアプリをプログラムします。コールバックと、ユーザー入力に基づいてプロットを更新する方法の詳細については、App Designer のコールバックを参照してください。App Designer で例を起動してアプリを実行し、アプリ ウィンドウのサイズ変更に応じてグリッド レイアウトがコンポーネントの位置とサイズをどのように調整するのかを確認します。

参考

関数

• uigridlayout

プロパティ

• GridLayout のプロパティ | UIAxes のプロパティ

関連するトピック

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