入れ子レイアウトと隠しレイアウト

最終更新日: 2020年9月11日
R8 | R9

縦並びの中に横並び

縦並びのグループ内に、横並びのグループを入れ子にして組み合わせることもできます。
下図では、縦並びの「会社情報」というグループの中に、横並びの隠しレイアウト(赤点線枠)を配置しています。

縦並びレイアウト内の横並びレイアウト

設定方法

横並びと縦並びを組み合わせたレイアウト から続けます。

スクリーンエディタを使った設定

この設定はスクリーンエディタでも行えます。[詳細...]

リポジトリの設定 - 入れ子構造

  1. モデルの編集画面で「レイアウト」>「リポジトリ」>「レイアウト名」タブをクリックして開きます。
    レイアウト名の入力欄に、入れ子の一番外側となるグループ「会社情報」を最初に入力します。
    一番外側のグループを定義
  2. 次に、入れ子の内側のグループを定義します。
    レイアウトの入れ子は「>」文字を使って定義します。
    今回は内側のグループを隠しレイアウトにするため、「>*P1」と入力します。(※)
    グループの中に隠しレイアウトを設定

    ※隠しレイアウトについて

    隠しレイアウトとは、アプリケーション画面上でレイアウト名と四角枠を非表示としたグループのことを指します。[詳細…]
    レイアウト名の先頭にアスタリスク(*)を付与するとそのグループは隠しレイアウトとなります。
    アスタリスク(*)のあとに続くレイアウト名は英数字を使用してください。
    (英数字以外を使用すると正しく動かない可能性があります)
    本マニュアルでは主に 「P」を用います。

  3. モデルの編集画面で「グループ・タブ」タブをクリックして開きます。
    はじめは何も追加されておらず、下図のような状態です。
    「グループ・タブ」の設定
  4. ギアアイコン>新規 をクリックしてグループを追加します。
    「グループ名」選択欄では先程「レイアウト名」タブで設定したグループが選択可能になっています。
    グループの追加
  5. グループの個数分行を追加し、それぞれ「レイアウト名」を選択します。
    今回の例では、次のようになります。
    グループの追加
  6. 次に、レイアウトの詳細設定をします。
    四角で囲まれた縦並びのグループ「会社情報」の中に横並びのグループ「*P1」が入る例です。
    「会社情報」はグループの表示方法を「四角で囲む」、並び方向は「縦↓」を選択します。
    「*P1」は並び方向のみ「横→」を選択します。
    これで設定は完了です。
    縦並びと横並びの設定

横並びの中に縦並び

横並びのグループを作り、その中の隠しレイアウト(赤点線枠)を縦並びとする例です。

横並びと縦並びの組み合わせ

設定方法

  1. 横並びグループ「会社情報」の中に、2つの隠しレイアウト(*P1、*P2)を設定します。
    レイアウト名の設定
  2. 「グループ・タブ」を開きます。
    ギアアイコン>新規 をクリックしてグループの個数分だけ行を追加します。
    行を追加したらそれぞれのグループと隠しレイアウトの並びの設定をします。
    今回の例では、次のようになります。
    縦並びと横並びの設定

隠しレイアウトの混在

下図のように、グループの中に隠しレイアウトとグループを両方配置させることも可能です。

隠しレイアウトの混在

設定方法

  1. グループの中に隠しレイアウトを2つ(*P1、*P2)とグループ1つを設定します。
    今回の例では次のようになります。
    グループの設定
  2. 「グループ・タブ」を開きます。
    ギアアイコン>新規 をクリックしてグループの個数分だけ行を追加します。
    行を追加したらそれぞれのグループと隠しレイアウトの並びの設定をします。
    今回の例では、次のようになります。
    グループの表示方法

グループ同士を横に並べる

下図のようにグループ同士を横に並べたい場合、隠しレイアウトの中にグループを配置することで実現できます。

隠しレイアウトの中にグループを配置

設定方法

  1. 「グループ・タブ」を開きます。
    ギアアイコン>新規 をクリックしてグループの個数分だけ行を追加します。
    行を追加したらそれぞれのグループと隠しレイアウトの並びの設定をします。
    隠しレイアウトの中に2つのグループを並べるため、親要素である*P1の「横並び子要素の表示比率」を50%,50%に指定します。
    これで子要素が1:1の比率で横並びとなります。
    また、隠しレイアウト*P1は四角枠を非表示とするため「グループの表示方法」は空白にします。
    今回の例では、次のようになります。
    グループの表示方法