FlexBoxとGridを使ったレスポンシブGUIレイアウト
を使用して、さまざまな画面サイズや方向で動作するレスポンシブGUIレイアウトを構築します。FlexBoxそしてGridクラスである。
レベル：中級
プラットフォーム：Windows, macOS, Linux, iOS, Android
クラス： FlexBox,FlexItem,Grid,GridItem
スタート
このチュートリアルは、以下のような簡単なレイアウトテクニックを理解していることを前提としています。Rectangleクラスで説明されている。Tutorial: Advanced GUI layout techniques.もしまだなら、まずそのチュートリアルを読むべきだ。
このチュートリアルのデモ・プロジェクトのダウンロードはこちらから：PIP|ZIP.プロジェクトを解凍し、最初のヘッダーファイルをProjucerで開く。
このステップにヘルプが必要な場合は、以下を参照してください。Tutorial: Projucer Part 1: Getting started with the Projucer.
デモ・プロジェクト
デモ・プロジェクトでは、次のようなさまざまなレスポンシブ・レイアウトのテクニックを紹介しています。FlexBoxそしてGridオブジェクトは、画面サイズや解像度が変化する場合に使用さ れる。最初にプロジェクトを初期状態で実行すると、次のようになるはずだ：
今のところ、レイアウトは一般的な非レスポンシブ・テクニックを使って画面上にコンポーネントをレイアウトしており、向きの変化には対応していません。私たちはFlexBoxそしてGridこれらの問題を根絶するためのアイテムだ。
FlexBoxとGridレイアウトシステム
についてFlexBoxそしてGridクラスは、CSSウェブ開発で使用されているレスポンシブ ・レイアウトの実践から大きな影響を受けています。以前にレスポンシブ・ウェブサイトをデザインしたことがあれば、このセクションで説明するレイアウト・システムに慣れているはずです。
使用時FlexBoxそのため、まずレイアウトの方向を水平か垂直かを定義する必要がある。この方向を主軸と、その垂直に対をなす横軸.この情報に基づき、以下のプロパティがレイアウトに影響を与える：
- ジャスティフィケーションは、主軸に沿った項目の位置に影響する。
- アライメントは、十字軸に沿ったアイテムの位置に影響する。
- ラッピングは、主軸上のアイテムが横軸上にこぼれることによってオーバーフローした場合に行われる。
コンテナ内のアイテムはFlexItemクラスがあり、その動的なサイズ変更に影響する3つの柔軟なプロパティを持っている：
- フレックス・グロウは、必要であればアイテムを成長させる能力を定義する。
- フレックスシュリンクとは、必要に応じて収縮する機能を定義したものである。
- Flex-basisは、動的なサイズ変更前のアイテムのデフォルトサイズを定義します。
2次元レイアウトシステムとして、Gridの両方で動作する。行軸と列軸である。同様にFlexBox以下のプロパティは、レイアウトに以下のような影響を与える：
- ジャスティフィケーションは、行軸に沿った項目の位置に影響します。
- Alignmentは、列の軸に沿ったアイテムの位置に影響します。
- ラッピングは、行または列の項目がオーバーフローしたときに実行できる。
GridItemオブジェクトはGridそして、そのサイズに影響を与える有用な特性を持っている：
- マージンは、特定の項目に関するギャップを提供できる。
- Spanは、複数のグリッドセルを埋めるために項目を拡張できます。
特定のプロパティがこれらのレイアウト・システムにどのような影響を与えるかがわかったので、デモ・プロジェクトでこれらの変更を実装し始めることができる。
FlexItemオブジェクトとGridItemオブジェクトの使用
のボタンレイアウトを置き換えることから始めよう。RightSidePanel::resized()を使用する方法です。FlexBox:
void resized() override
{
juce::FlexBox fb; // [1]
fb.flexWrap = juce::FlexBox::Wrap::wrap; // [2]
fb.justifyContent = juce::FlexBox::JustifyContent::center; // [3]
fb.alignContent = juce::FlexBox::AlignContent::center; // [4]
for (auto* b : buttons) // [5]
fb.items.add (juce::FlexItem (*b).withMinWidth (50.0f).withMinHeight (50.0f));
fb.performLayout (getLocalBounds()); // [6]
}
- [1]を作成する。FlexBoxオブジェクトがある。
- [2]: オブジェクトがオーバーフローした場合に、オブジェクトを折り返すかどうかを指定できます。
- [3]コンテンツは枠の中央に揃える。
- [4]コンテンツの中央への配置を指定します。
- [5]を反復する。TextButtonコンポーネントとして追加する。FlexItemオブジェクトをFlexBoxオブジェクトになる。そのFlexItemこの場合、ボタンの幅と高さの最小値 を設定します。代わりに、最大幅と最大高さを
withMaxWidth()そしてwithMaxHeight()メソッドをそれぞれ使用する。 - [6]レイアウトロジックはFlexItemオブジェクトの境界を指定する。
performLayout()メソッドを使用する。
左サイドパネルの回転スライダーのレイアウトに関しては、次のように調整する。LeftSidePanel::resized()メソッドを使用する：
void resized() override
{
//==============================================================================
juce::FlexBox knobBox;
knobBox.flexWrap = juce::FlexBox::Wrap::wrap;
knobBox.justifyContent = juce::FlexBox::JustifyContent::spaceBetween; // [1]
for (auto* k : knobs)
knobBox.items.add (juce::FlexItem (*k).withMinHeight (50.0f).withMinWidth (50.0f).withFlex (1)); // [2]
//==============================================================================
juce::FlexBox fb; // [3]
fb.flexDirection = juce::FlexBox::Direction::column;
fb.items.add (juce::FlexItem (knobBox).withFlex (2.5)); // [4]
fb.performLayout (getLocalBounds());
}
- [1]今回は、項目の間隔を広げるために
JustifyContent::spaceBetween財産である。 - [2]ノブは同じようにアイテム配列に追加される。
1.フレックス・グロー・ファクターは、コンテナ内のアイテムが占めるべきスペースの量を決定する。 - [3]もうひとつFlexBoxのコンテナとして機能する。FlexItemオブジェクトで、フレックスレイアウトの主軸は
Direction::column財産である。 - [4]:以前に定義されたFlexBoxとして追加される。FlexItemコンテナへFlexBoxのフレックス・グロース・ファクターを持つ。
2.5.
ネスティングFlexBoxオブジェクトを使用すると、小さなコンポーネントグループをカプセル化することで、複雑なレスポンシブ・レイアウトを簡単に作成できます。
最後に、メインパネルのスライダーはMainPanel::resized()メソッドを使用する：
void resized() override
{
auto isPortrait = getLocalBounds().getHeight() > getLocalBounds().getWidth(); // [1]
juce::FlexBox fb;
fb.flexDirection = isPortrait ? juce::FlexBox::Direction::column // [2]
: juce::FlexBox::Direction::row;
for (auto* s : sliders)
{
s->setSliderStyle (isPortrait ? juce::Slider::SliderStyle::LinearHorizontal // [3]
: juce::Slider::SliderStyle::LinearVertical);
fb.items.add (juce::FlexItem (*s).withFlex (0, 1, isPortrait ? (float) getHeight() / 5.0f // [4]
: (float) getWidth() / 5.0f));
}
fb.performLayout (getLocalBounds());
}
- [1]まず、デバイスの幅と高さをチェックして、縦長か横長かを判断します。
- [2]次に、主軸の向きを決め、プロパティを設定する。
- [3]同様に、デバイスの向きに合わせて適切なスライダーのスタイルを設定します。
- [4]アイテム配列にスライダーを追加する際、それぞれのスライダーが流れる方向に占める割合を決定することで、フレックス・ベースを提供する。
スライダーはデバイスの向きに対応し、それに応じて方向を調整します。
最後に、パネルの全体的なレイアウトシステムもフレックスを使うように変更できる：
void resized() override
{
juce::FlexBox fb;
juce::FlexItem left ((float) getWidth() / 4.0f, (float) getHeight(), leftPanel);
juce::FlexItem right ((float) getWidth() / 4.0f, (float) getHeight(), rightPanel);
juce::FlexItem main ((float) getWidth() / 2.0f, (float) getHeight(), mainPanel);
fb.items.addArray ( { left, main, right } );
fb.performLayout (getLocalBounds());
}
フレックスを使うように新しく修正したコードを実行すると、次のようになるはずだ：
この修正版のソースコードはFlexBoxGridTutorial_02.hファイルにある。
最後の部分のコードをGridクラスを作成します。ここではGridオブジェクトを使って、フレックスと同じようにレイアウト操作を行います：
void resized() override
{
juce::Grid grid;
using Track = juce::Grid::TrackInfo;
using Fr = juce::Grid::Fr;
grid.templateRows = { Track (Fr (1)) };
grid.templateColumns = { Track (Fr (1)), Track (Fr (2)), Track (Fr (1)) };
grid.items = { juce::GridItem (leftPanel), juce::GridItem (mainPanel), juce::GridItem (rightPanel) };
grid.performLayout (getLocalBounds());
}
しかし、フレックス・グロー、フレックス・シュリンク、フレックス・ベースの値を個別に指定するのではなく、フレックス・グロー、フレックス・シュリンク、フレックス・ベースの値を個別に指定する。FlexItemオブジェクトの行数と列数を設定する。Gridオブジェクトを使用する。制約を分数またはピクセルで指定するには_frそして_pxの接尾辞がある。この例では、1行3列のグリッドを定義し、中央の列は他の列の2倍のスペースを取る。
JUCEのピクセルは物理的なピクセルと等価ではありません。内部計算により、画面のDPI解像度に応じてピクセル密度が変換されます。
この修正版のソースコードはFlexBoxGridTutorial_03.hファイルにある。
FlexBoxとGridクラスの長所と短所
レスポンシブ・レイアウトを作成するために、これらのクラスのいずれかを使用できるケースはたくさんあります。しかし、あるレイアウトの制約を解決するために、どちらか一方がより適しており、時には必要でさえあるシナリオもあります。
の利点は以下の通りだ。FlexBoxクラスである：
- 主軸が必要な部品のレイアウトに適している。
- コンテンツの折り返し、方向、配置は簡単に指定できます。
- 十字軸にアライメントが取れていないコンテンツにも対応できる。
の利点は以下の通りである。Gridクラスである：
- 行と列が整列した2Dグリッドタイプのレイアウトに適しています。
- 成分の比率は、分数またはピクセルで指定できます。
- 複数の行または列にまたがるコンテンツに対応できます。
概要
このチュートリアルでは、レスポンシブ・レイアウトをデザインする方法について学びました。FlexBoxそしてGridクラスである。特に
- のレイアウト・ロジックを学んだ。FlexItemそしてGridItemオブジェクトがある。
- オリエンテーションの変更に対応し、それに応じてインタフェースを変更。
- それぞれのクラスの長所と短所について話し合った。