---
category: swing
folder: BreadcrumbList
title: FlowLayoutでボタンを重ねてパンくずリストを作成する
tags: [FlowLayout, JRadioButton, JPanel, Shape, Icon]
author: aterai
pubdate: 2013-12-02T00:03:12+09:00
description: FlowLayoutの水平間隔をマイナスにして、JRadioButtonを重ねて表示し、パンくずリスト風のコンポーネントを作成します。
image: https://lh5.googleusercontent.com/-aKK_2LaPfVQ/UpsqWSS4lUI/AAAAAAAAB7c/VSzPRuRu3IY/s800/BreadcrumbList.png
hreflang:
    href: https://java-swing-tips.blogspot.com/2013/12/breadcrumb-navigation-with-jradiobutton.html
    lang: en
---
* 概要 [#summary]
`FlowLayout`の水平間隔をマイナスにして、`JRadioButton`を重ねて表示し、パンくずリスト風のコンポーネントを作成します。

#download(https://lh5.googleusercontent.com/-aKK_2LaPfVQ/UpsqWSS4lUI/AAAAAAAAB7c/VSzPRuRu3IY/s800/BreadcrumbList.png)

* サンプルコード [#sourcecode]
#code(link){{
private static JComponent makeBreadcrumbList(int overlap, List<String> list) {
  JPanel p = new JPanel(new FlowLayout(FlowLayout.LEADING, -overlap, 0));
  p.setBorder(BorderFactory.createEmptyBorder(4, overlap + 4, 4, 4));
  p.setOpaque(false);
  ButtonGroup bg = new ButtonGroup();
  for (String title: list) {
    AbstractButton b = makeButton(title, Color.PINK);
    p.add(b);
    bg.add(b);
  }
  return p;
}
}}

* 解説 [#explanation]
上記のサンプルでは、`FlowLayout`の水平間隔にマイナスの値(`px`)を指定して、各コンポーネントがその分重なるように設定しています。このため、左側の`JRadioButton`の下に右側の`JRadioButton`が配置されている状態になっています。各`JRadioButton`自体は重なっていますが、描画とマウスクリックは重ならないように以下の設定を追加しています。

- 描画
-- 矢羽型のアイコンを設定し、このアイコン以外は`setContentAreaFilled(false);`などで透明化
-- 矢羽型のアイコンを設定しこのアイコン以外は`setContentAreaFilled(false);`などで透明化
- マウスクリック
-- `JRadioButton#contains(...)`をオーバーライドして、上記の矢羽図形の外では反応しないよう設定
-- `JRadioButton#contains(...)`をオーバーライドして上記の矢羽図形の外では反応しないよう設定

* 参考リンク [#reference]
- [[JRadioButtonを使ってToggleButtonBarを作成>Swing/ToggleButtonBar]]
- [[JMenuItemの内部にJButtonを配置する>Swing/ButtonsInMenuItem]]
-- 前後のコンポーネントのフチを共通化して(`1px`だけ重ねる)、`JLayer`でそのフォーカスを描画するサンプル
- [[JToggleButtonをFlowLayoutで重ねて表示する>Swing/BackgroundButtonIcon]]
-- 中央揃えではなく、左揃えのボタンを作成するサンプル

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