<Java> MigLayoutの扱い方
部活向けドキュメント
MigLayoutは文字列による指定でレイアウトを変更する、少し変わったレイアウトマネージャです。
初見は複雑に見えますが、それぞれ文字列の意味さえわかってしまえばとても柔軟にレイアウトを組むことができます。
自身も使って間もないですが、その便利さに他のレイアウトマネージャが不要になるぐらいです。
では、実際に見て行きましょう。
＜＜参考資料＞＞
MigLayout (MiGLayout 3.7.4 API)
八角研究所 : Java の MiGLayout で超簡単にGUIアプリを作る方法
＜＜目次＞＞
コンストラクタ
MigLayout()
レイアウトの設定を特にせずインスタンスを生成
MigLayout(String layoutConstraints,
String colConstraints,
String rowConstraints)
上から、レイアウトの設定、列の設定、行の設定でインスタンスを生成
これらの設定については後述
これだけではもちろんわからないので、実際に例示しながら見て行きましょう。
複数段にコンポーネントを配置（改行）する
// import省略 public class TestFrame extends JFrame { public TestFrame() { JPanel panel = new JPanel(); // レイアウトの設定なしでインスタンス生成 MigLayout layout = new MigLayout("", "", ""); // パネルにレイアウトのインスタンスを設定 panel.setLayout(layout); // パネルにコンポーネントを追加していく panel.add(new JButton("1A"), ""); panel.add(new JButton("1B"), ""); panel.add(new JButton("1C"), "wrap"); // wrapで改行する panel.add(new JButton("2A"), ""); panel.add(new JButton("2B"), ""); panel.add(new JButton("2C"), ""); panel.add(new JButton("2D"), "wrap"); // 改行 panel.add(new JButton("3A"), ""); // 自身(TestFrame)にパネルを追加する this.add(panel); } public static void main(String[] args) { TestFrame testFrame = new TestFrame(); testFrame.setSize(400, 300); // 画面の中央に表示させる testFrame.setLocationRelativeTo(null); testFrame.setVisible(true); } }
表示例
MigLayoutでは、FlowLayoutのようにコンテナ(JPanel)の上からコンポーネントが追加されます。
ここでは、panel.addするときに、"wrap"という文字列を記述することによって、コンポーネントが改行されて追加されました。
このように、特定の文字列を記述することにより、レイアウトの変更ができます。
セルの結合・セルいっぱいにコンポーネントを表示
上記のプログラムを一部書き換えます。
public TestFrame() {
// 〜省略〜
panel.add(new JButton("2D"), "wrap"); // 改行
// ↓書き換える↓------------------
panel.add(new JButton("3A"), "span, grow");
// -------------------------------
this.add(panel);
}
表示例
"span"は、セルを連結を指定します。
"grow"は、セルいっぱいにコンポーネントを表示します。
と、いきなりセルという言葉が出てきてちょっと混乱しちゃいますね。
実際セルがどのような状態をしているのかは、WindowBuilderを使っていれば視覚的に分かると思います。
上記の画像を見ると、ボタンひとつひとつにセルが割り当てられているのがわかります。
そのうち、"span, grow"を指定した"3A"のボタンは、セルを端まで連結した上に、コンポーネントをセル全体に広げていますね。
補足
"span"の後ろに整数を加えることによって、連結するセルの数を指定することができます。
また、"wrap"の後ろにも整数を加えることによって、行間の幅を指定することができます。
// 行間を100pxに設定
panel.add(new JButton("2D"), "wrap 100");
// セルを2つ連結する
panel.add(new JButton("3A"), "span 2, grow");
表示例
コンポーネントの大きさを調整する
コンポーネントの大きさを指定するには、"height","width"を使います。
// 〜省略〜
panel.add(new JButton("1A"), "height 100"); // 高さを100pxに指定
panel.add(new JButton("1B"), "width 200"); // 幅を200pxに指定
panel.add(new JButton("1C"), "wrap");
panel.add(new JButton("2A"), "h 100"); // このように
panel.add(new JButton("2B"), "w 200"); // 省略も可能
// 〜省略〜
表示例
セルのサイズを調整する
public TestFrame() {
setSize(600, 400);
JPanel panel = new JPanel();
MigLayout layout = new MigLayout(
"wrap 3", // 全体的なレイアウト設定(layoutConstraints)
"[200][200][200]", // 列のセル指定(colConstraints)
"[100][100][100]" // 行のセル指定(rowConstraints)
);
// パネルにレイアウトのインスタンスを設定
panel.setLayout(layout);
// パネルにコンポーネントを追加していく
panel.add(new JButton("1A"), "");
panel.add(new JButton("1B"), "");
panel.add(new JButton("1C"), "");
panel.add(new JButton("2A"), "");
panel.add(new JButton("2B"), "");
panel.add(new JButton("2C"), "");
panel.add(new JButton("3A"), "");
panel.add(new JButton("3A"), "");
panel.add(new JButton("3A"), "");
// 自身(TestFrame)にパネルを追加する
this.add(panel);
}
表示例
コンストラクタにもある、
- layoutConstraints
- colConstraints
- rowConstraints
layoutConstraintsで"wrap 3"を指定しています。
ここでは、3回addするごとに自動的に"wrap"が付加されることを意味します。
colConstraintsでは、中括弧の中に数字を指定しています。
ここでは、列の幅（横の長さ）を200pxに設定しています。
同じく、rowConstraintsも行の幅を100pxに設定しています。
セル内のコンポーネントの位置指定
panel.add(new JButton("1A"), "top, left"); panel.add(new JButton("1B"), "t, center"); panel.add(new JButton("1C"), "t, right");
panel.add(new JButton("2A"), "l"); panel.add(new JButton("2B"), "c"); panel.add(new JButton("2C"), "r");
panel.add(new JButton("3A"), "bottom, left"); panel.add(new JButton("3A"), "b, c"); panel.add(new JButton("3A"), "b, r");
横位置を、
- left（左揃え）
- center（中央揃え）
- right（右揃え）
縦位置を、
- top（上揃え）
- center（中央揃え）
- bottom（下揃え）
それぞれ、頭文字の省略形で書くことも可能です。
表示例
