文字列と画像の位置関係を設定

広告

チェックボックスにおいて文字列と画像の位置関係を設定する方法を確認します。デフォルトでは画像の右側に文字列が表示されます。また垂直方向では文字列と画像が中央揃いの位置で表示されます。

画像に対する文字列の水平位置

画像に対する文字列の水平位置を設定するにはJCheckBoxクラスの親クラスであるAbstractButtonクラスで定義されているsetHorizontalTextPositionメソッドを使います。

アイコンに対するテキストの位置 (水平方向) を設定します。 

パラメータ:
  textPosition - 次の値のいずれか。
例外:
  IllegalArgumentException - textPosition が上記の正当な値のどれでもない場合

引数には画像に対する文字列の水平位置を指定します。指定できる値は次の通りです。

JCheckBox.LEFT       左詰
JCheckBox.CENTER     中央
JCheckBox.RIGHT      右詰
JCheckBox.LEADING    左詰
JCheckBox.TRAILING   右詰 (デフォルト)

※各値はjavax.swing.SwingConstantsインターフェースで定義されており、JCheckBoxクラスはSwingConstantsインターフェースを実装したクラスです。

※LEADING(先頭)とTRAILING(末)は利用している言語によって位置が変わります。日本語や英語のように左から右へ文字を表示する場合は LEADINGが左詰でTRAILINGが右詰ですが、右から左へ文字を表示するのが普通の言語の場合にはLEADINGが右詰でTRAILINGが左詰となります。

実際の使い方は次のようになります。

ImageIcon icon = new ImageIcon("./img/sample.png");

JCheckBox checkbox = new JCheckBox("チェックボックス", icon);
checkbox.setHorizontalTextPosition(JCheckBox.CENTER);

JCheckBox.CENTERを設定した場合、画像の上に重なるように文字列が表示されることになります。

画像に対する文字列の垂直位置

画像に対する文字列の垂直位置を設定するにはJCheckBoxクラスの親クラスであるAbstractButtonクラスで定義されているsetVerticalTextPositionメソッドを使います。

アイコンに対するテキストの位置 (垂直方向) を設定します。

パラメータ:
  textPosition - 次の値のいずれか

引数には画像に対する文字列の垂直位置を指定します。指定できる値は次の通りです。

JCheckBox.TOP     上端に合わせる
JCheckBox.CENTER  中央(デフォルト)
JCheckBox.BOTTOM  下端に合わせる

※各値はjavax.swing.SwingConstantsインターフェースで定義されており、JCheckBoxクラスはSwingConstantsインターフェースを実装したクラスです。

実際の使い方は次のようになります。

ImageIcon icon = new ImageIcon("./img/sample.png");

JCheckBox checkbox = new JCheckBox("チェックボックス", icon);
checkbox.setVerticalTextPosition(JCheckBox.TOP);

JCheckBox.TOPを設定した場合は、文字列と画像の上端を合わせるように表示します。画像の上部に文字列が表示されるわけではありません。同じよう世にJCheckBox.BOTTOMを設定した場合は、文字列と画像の下端を合わせるように表示します。

画像と文字列の間隔

画像と文字列の間にどれだけの幅を空けるのかを設定する事も可能です。JCheckBoxクラスの親クラスであるAbstractButtonクラスで定義されているsetIconTextGapメソッドを使います。

アイコンプロパティーとテキストプロパティーが両方とも設定されている場合に、このプロパティー
はそれらの間の距離を定義します。

このプロパティーのデフォルト値は 4 ピクセルです。

パラメータ:
  iconTextGap - アイコンとテキストの距離

引数には文字列と画像の距離をピクセル単位で指定します。デフォルトの値は4ピクセルで、画像と文字列が4ピクセル離れて表示されています。

実際の使い方は次のようになります。

ImageIcon icon = new ImageIcon("./img/sample.png");

JCheckBox checkbox = new JCheckBox("チェックボックス", icon);
checkbox.setIconTextGap(10);

上記の場合、チェックボックスに表示されるアイコンと文字列の間隔は10ピクセルに設定されます。

サンプルプログラム

では実際に試してみます。

SSample10_1.java

import javax.swing.JFrame;
import javax.swing.JPanel;
import javax.swing.JCheckBox;
import javax.swing.ImageIcon;
import java.awt.Container;
import java.awt.BorderLayout;
import java.awt.Color;

class SSample10_1 extends JFrame{
  public static void main(String args[]){
    SSample10_1 frame = new SSample10_1("タイトル");
    frame.setVisible(true);
  }

  SSample10_1(String title){
    setTitle(title);
    setBounds(100, 100, 300, 250);
    setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);

    ImageIcon icon_nonselect = new ImageIcon("./nonselect.png");
    ImageIcon icon_select = new ImageIcon("./select1.png");

    JCheckBox ckbox1 = new JCheckBox("Orange");
    ckbox1.setHorizontalTextPosition(JCheckBox.LEFT);
    ckbox1.setBackground(Color.WHITE);
    JCheckBox ckbox2 = new JCheckBox("Orange");
    ckbox2.setHorizontalTextPosition(JCheckBox.CENTER);
    ckbox2.setBackground(Color.YELLOW);
    JCheckBox ckbox3 = new JCheckBox("Orange");
    ckbox3.setHorizontalTextPosition(JCheckBox.RIGHT);
    ckbox3.setBackground(Color.PINK);

    JCheckBox ckbox4 = new JCheckBox("Hasami", icon_nonselect);
    ckbox4.setSelectedIcon(icon_select);
    ckbox4.setVerticalTextPosition(JCheckBox.TOP);
    JCheckBox ckbox5 = new JCheckBox("Hasami", icon_nonselect);
    ckbox5.setSelectedIcon(icon_select);
    ckbox5.setVerticalTextPosition(JCheckBox.CENTER);
    JCheckBox ckbox6 = new JCheckBox("Hasami", icon_nonselect);
    ckbox6.setSelectedIcon(icon_select);
    ckbox6.setVerticalTextPosition(JCheckBox.BOTTOM);

    JCheckBox ckbox7 = new JCheckBox("Orange");
    ckbox7.setBackground(Color.WHITE);
    JCheckBox ckbox8 = new JCheckBox("Orange");
    ckbox8.setBackground(Color.YELLOW);
    ckbox8.setIconTextGap(10);
    JCheckBox ckbox9 = new JCheckBox("Orange");
    ckbox9.setIconTextGap(20);
    ckbox9.setBackground(Color.PINK);

    JPanel p1 = new JPanel();
    JPanel p2 = new JPanel();
    JPanel p3 = new JPanel();

    p1.add(ckbox1);
    p1.add(ckbox2);
    p1.add(ckbox3);
    p2.add(ckbox4);
    p2.add(ckbox5);
    p2.add(ckbox6);
    p3.add(ckbox7);
    p3.add(ckbox8);
    p3.add(ckbox9);

    Container contentPane = getContentPane();
    contentPane.add(p1, BorderLayout.NORTH);
    contentPane.add(p2, BorderLayout.CENTER);
    contentPane.add(p3, BorderLayout.SOUTH);
  }
}

ではコンパイルを行った上で実行してみます。

文字列と画像の位置関係を設定

画像の表示」で記載した通り、チェックボックスの小さい箱はチェックボックスのデフォルトの画像ですので、個別に画像を指定しない場合はこの小さい箱と表示文字列の位置関係を指定することになります。

上段の3つのチェックボックスは文字列と画像の水平位置を変えて表示しています。中段の3つのチェックボックスは独自の画像を指定した上で文字列と画像の垂直位置を変えて表示しています。下段の3つのチェックボックスは文字列と画像の間の間隔を変えて表示しています。

( Written by Tatsuo Ikura )