Main Content

自動リフロー機能でサイズを変更するアプリの作成

アプリを開く

この例では、自動的にアプリのコンテンツを拡大、縮小、リフローすることでサイズ変更に応答する自動リフロー機能を備えたアプリを作成する方法について説明します。自動リフロー機能は、解像度や画面サイズが異なる複数の環境で共有するアプリで使用します。自動リフロー機能を使用すれば、アプリは各アプリ ユーザーの画面サイズに合わせてアプリのコンテンツのサイズを変更したり、リフローしたりできます。アプリでの自動リフロー機能の詳細については、自動リフロー機能付きのアプリを参照してください。

アプリの自動リフロー動作

このアプリでは、コントロールは左側の固定されたパネルにあります。リフローする右側のパネルには、可視化とデータ テーブルが含まれた 2 つのタブがあります。このパネルのアプリのコンテンツはアプリ ウィンドウのサイズに基づいてサイズ変更され、リフローします。たとえば、アプリ ウィンドウの幅を縮小すると、右側のパネルがサイズ変更に合わせて動的に調整され、固定された左側のパネルの下に移動します。

自動リフロー機能付きのアプリの作成

まず、App Designer スタート ページから、自動リフロー機能を備えた新しい 2 パネル アプリを作成します。App Designer は 2 つのパネルを作成します。左側のパネルは固定され、右側のパネルはリフローします。次に [設計ビュー] でコンポーネントをレイアウトします。

  • [コンポーネント ライブラリ] から左側のパネルにコントロールを追加します。左側のパネル内の追加パネルを使用して、関連するコントロールをグループ化します。

  • タブ グループ内の可視化用の座標軸とデータ テーブルを右側のパネルに追加します。アプリ ウィンドウのサイズを調整すると、このリフロー パネル内のコンポーネントのレイアウトが自動的に調整されます。

アプリをレイアウトした後、[コード ビュー] でユーザー入力に応答するようにアプリをプログラムします。ユーザー入力に基づいて座標軸とテーブルを更新するコールバック関数を作成する方法の詳細については、App Designer のコールバックを参照してください。完全にコード化されたアプリを探索し、アプリ内で自動リフロー機能がどのように動作するのかを確認するには、App Designer でこの例を起動します。

参考

関数

プロパティ

関連するトピック