• 追加された行はこの色です。
  • 削除された行はこの色です。
---
category: swing
folder: BrickLayout
title: GridBagLayoutを使ってレンガ状に配置
tags: [GridBagLayout, LayoutManager]
author: aterai
pubdate: 2009-03-09T14:08:29+09:00
description: GridBagLayoutを使ってコンポーネントをレンガ状に配置します。
image: https://lh5.googleusercontent.com/_9Z4BYR88imo/TQTIOzg1doI/AAAAAAAAASc/V_SwABvAldE/s800/BrickLayout.png
---
* 概要 [#summary]
`GridBagLayout`を使ってコンポーネントをレンガ状に配置します。[https://community.oracle.com/thread/1357310 Swing - GridBagLayout to create a board]を参考にしています。

#download(https://lh5.googleusercontent.com/_9Z4BYR88imo/TQTIOzg1doI/AAAAAAAAASc/V_SwABvAldE/s800/BrickLayout.png)

* サンプルコード [#sourcecode]
#code(link){{
JPanel panel = new JPanel(new GridBagLayout());
panel.setBorder(BorderFactory.createTitledBorder("Brick Layout"));
GridBagConstraints c = new GridBagConstraints();
c.fill = GridBagConstraints.HORIZONTAL;
c.gridy = GridBagConstraints.RELATIVE;
for (int y = 0; y < YSIZE; y++) {
  ////c.gridy = GridBagConstraints.RELATIVE; //c.gridy = y;
  //int d = y & 0b1; //= y % 2 == 0 ? 0 : 1; //start x offset
  //if (d == 1) {
  //  c.gridwidth = 1;
  //  c.gridx = 0;
  //  panel.add(new JButton("a"), c);
  //}
  c.gridx = y & 0b1; //start x offset
  // // c.gridy = GridBagConstraints.RELATIVE; // c.gridy = y;
  // int d = y & 0b1; // = y % 2 == 0 ? 0 : 1; // start x offset
  // if (d == 1) {
  //   c.gridwidth = 1;
  //   c.gridx = 0;
  //   panel.add(new JButton("a"), c);
  // }
  c.gridx = y & 0b1; // start x offset
  c.gridwidth = WIDTH;
  for (int x = 0; x < XSIZE; x++) {
    panel.add(new JButton(" "), c);
    c.gridx += WIDTH;
  }
  //if (d == 0) {
  //  c.gridwidth = 1;
  //  panel.add(new JButton("c"), c);
  //}
  // if (d == 0) {
  //   c.gridwidth = 1;
  //   panel.add(new JButton("c"), c);
  // }
}
//GridBagLayout to create a board
//https://community.oracle.com/thread/1357310
//<dummy-row>
// GridBagLayout to create a board
// https://community.oracle.com/thread/1357310
// <guide-row>
c.gridwidth = 1;
//c.gridy = GridBagConstraints.REMAINDER;
// c.gridy = GridBagConstraints.REMAINDER;
for (c.gridx = 0; c.gridx <= WIDTH * XSIZE; c.gridx++) {
  panel.add(Box.createHorizontalStrut(24), c);
}
//</dummy-row>
// </guide-row>
}}

* 解説 [#explanation]
上記のサンプルでは、`GridBagLayout`を使って、`JButton`をレンガ状に配置します。互い違いに二列ずつ占めるようにボタンを配置していますが、`<dummy-row>`が無い場合、うまくレンガ状にはなりません。
上記のサンプルでは、`GridBagLayout`を使って`JButton`をレンガ状に配置します。互い違いに`2`列ずつ占めるようにボタンを配置していますが、`<guide-row>`が無い場合正しくレンガ状にはなりません。

以下、[https://community.oracle.com/thread/1357310 Swing - GridBagLayout to create a board]のDarryl.Burkeさんの投稿を引用

 A column (or row) in a GridBagLayout is not well defined unless there is at least one component which occupies only that column (or row). All your rows have components spanning 2 columns.

列の基準となる行は、どこでも(先頭でも最後でも)構わないようです。
列の基準となるガイド行は、どこでも(先頭でも最後でも)構わないようです。

----
- 同様に、ダミーの幅を持つ行を作成して、キーボード風に配列
-- [http://stackoverflow.com/questions/24622279/laying-out-a-keyboard-in-swing java - Laying out a keyboard in Swing - Stack Overflow]
- 同様に指定した幅、かつ高さ`0`のセルで構成されたガイド行を作成して`JButton`をキーボード風に配置するサンプル
-- [[GridBagLayoutを使ってJButtonをキーボード状に配置する>Swing/KeyboardLayout]]に移動

#code{{
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class KeyboardTest {
  private static final String[][] keys = {
    {"`", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0", "-", "=", "Backspace"},
    {"Tab", "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "[", "]", "\\", ""},
    {"Caps", "A", "S", "D", "F", "G", "H", "J", "K", "L", ";", "'", "Enter", ""},
    {"Shift", "Z", "X", "C", "V", "B", "N", "M", ",", ".", "/", "", "\u2191"},
    {" ", " ", " ", "", "                         ", " ", "\u2190", "\u2193", "\u2192"}
  };
  public JComponent makeUI() {
    JPanel keyboard = new JPanel(new GridBagLayout());
    keyboard.setBorder(BorderFactory.createEmptyBorder(10, 10, 10, 10));

    GridBagConstraints c = new GridBagConstraints();
    c.weightx = 1d;
    c.weighty = 1d;
    c.fill = GridBagConstraints.BOTH;
    c.gridheight = 1;
    c.gridx = 0;

    c.gridy = 50;
    for (int i = 0; i < keys[0].length * 2; i++) {
      c.gridx = i;
      keyboard.add(Box.createHorizontalStrut(24));
    }

    for (int row = 0; row < keys.length; row++) {
      c.gridx = 0;
      c.gridy = row;
      for (int col = 0; col < keys[row].length; col++) {
        String key = keys[row][col];
        int l = key.length();
        c.gridwidth = l > 10 ? 14 :
                      l > 4  ?  4 :
                      l > 1  ?  3 :
                      l == 1 ?  2 : 1;
        if (l > 2) {
          keyboard.add(new JButton(key), c);
        } else if (key.trim().length() == 0) {
          keyboard.add(Box.createHorizontalStrut(24), c);
        } else {
          keyboard.add(new KeyButton(key), c);
        }
        c.gridx += c.gridwidth;
      }
    }
    return keyboard;
  }
  public static void main(String[] args) {
    EventQueue.invokeLater(new Runnable() {
      @Override public void run() {
        createAndShowGUI();
      }
    });
  }
  public static void createAndShowGUI() {
    JFrame f = new JFrame("Keyboard");
    f.setDefaultCloseOperation(WindowConstants.EXIT_ON_CLOSE);
    f.getContentPane().add(new KeyboardTest().makeUI());
    f.setResizable(false);
    f.pack();
    f.setLocationRelativeTo(null);
    f.setVisible(true);
  }
}

class KeyButton extends JButton {
  public KeyButton(String str) {
    super(str);
  }
  @Override public Dimension getPreferredSize() {
    return new Dimension(48, 48);
  }
}
}}

* 参考リンク [#reference]
- [https://community.oracle.com/thread/1357310 Swing - GridBagLayout to create a board]
- [[GridBagLayoutを使ってJButtonをキーボード状に配置する>Swing/KeyboardLayout]]

* コメント [#comment]
#comment
#comment