CodeZine(コードジン)

特集ページ一覧

Swing再入門 コンポーネントの表示方法のカスタマイズ

第2回 コンポーネントの表示を考える

  • LINEで送る
  • このエントリーをはてなブックマークに追加
2007/09/05 14:00

Swingのコンポーネントは、細かな部分までカスタマイズすることができます。ここでは、ボーダー、テキスト表示、ルックアンドフィールといったことについて、さまざまなカスタマイズ方法を紹介していきましょう。

目次

はじめに

 今回は、コンポーネントの表示について考えてみることにしましょう。Swingのコンポーネントは、AWTのように完成されたものがそのまま表示されるわけではなく、非常に多くの要素によって構成されています。それらを個別に設定していくことで、表示を自由にカスタマイズできます。

 単純に、前景色・背景色、表示フォントといったものを変えるのなら、おそらく誰でもできるでしょう。これらはAWTとほとんど同じですから、迷うことはまずありません。けれど、それだけで終わっていたのでは、ちょっともったいない。もう一歩進んで、「ボーダー」や「ルックアンドフィール」などについても自由に操作できるようになりたいものです。

対象読者

  • Javaの基本機能は一通り覚えた、というビギナーを卒業しかけている人。
  • Swingはマスターした? といわれると、ちょっと自信がない人。
  • これからはクライアントサイドが注目されると信じる人。

ボーダー、変えられますか?

 Swingの利点は、AWTよりもはるかに柔軟であるという点です。AWTのコンポーネントは決まりきった表示しかできませんが、Swingでは自由に表示を変えられます。――と、わかってはいても、実際に「GUIをカスタマイズ」したことありますか? デフォルトのコンポーネントのまま使ったことしかない人が圧倒的ではないでしょうか。

 まずは、ボーダーからです。実際にボーダーを変更してみることにしましょう。

package jp.codezine;

import java.awt.*;
import javax.swing.*;
import javax.swing.border.*;

public class SampleApp extends JFrame {
    private static final long serialVersionUID = 1L;
    
    public SampleApp(){
        this.setSize(new Dimension(200,200));
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        GridLayout layout = new GridLayout(3,1);
        layout.setHgap(5);
        layout.setVgap(5);
        this.setLayout(layout);
        for(int i = 0;i < 3;i++){
            JButton btn = new JButton("button" + i);
            btn.setFont(new Font("Serif",Font.PLAIN,18));
            BevelBorder border = new BevelBorder(BevelBorder.RAISED,
                    new Color(255,200,200),new Color(100,100,200));
            btn.setBorder(border);
            this.add(btn);
        }
    }

    public static void main(String[] args) {
        new SampleApp().setVisible(true);
    }
}
BevelBorderを組み込んだ例。ボタンの輪郭部分が変わっている。
BevelBorderを組み込んだ例。ボタンの輪郭部分が変わっている。
これが通常のボーダー。
これが通常のボーダー。

 これは、BevelBorderというボーダーを作成してJButtonに組み込んだ例です。BevelBorderは、コンポーネントの周辺部のベベル(立体感を出すため斜めに表示された部分)を持ったボーダーです。インスタンス作成時に、凸か凹か、光が当たっている側と当たっていない側の色をそれぞれ設定することができます。作成したボーダーは、そのままコンポーネントにsetBorderで組み込むだけで使えるようになります。

さまざまなボーダーを使ってみる

 ボーダーのクラスは標準でいくつも用意されていますから、それらを使えるようになるだけでもGUIの表現はずいぶんと広がるでしょう。一例として、もう少し違ったボーダーの例を挙げておきましょう。

package jp.codezine;

import java.awt.*;
import javax.swing.*;
import javax.swing.border.*;

public class SampleApp extends JFrame {
    private static final long serialVersionUID = 1L;
    
    public SampleApp(){
        this.setSize(new Dimension(200,200));
        this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        GridLayout layout = new GridLayout(3,1);
        layout.setHgap(5);
        layout.setVgap(5);
        this.setLayout(layout);
        for(int i = 0;i < 3;i++){
            JButton btn = new JButton("button" + i);
            btn.setFont(new Font("Serif",Font.PLAIN,18));
            Border border = new MatteBorder(new Insets(1,5,3,10),
                    new Color(255,100,100));
            btn.setBorder(border);
            this.add(btn);
        }
    }

    public static void main(String[] args) {
        new SampleApp().setVisible(true);
    }
}
MatteBorderで周囲をオレンジに塗りつぶしたボーダーを表示させる。
MatteBorderで周囲をオレンジに塗りつぶしたボーダーを表示させる。

 これは、MatteBorderというボーダーを利用したサンプルです。このMatteBorderは、特定の色で塗りつぶしたボーダーです。作成時に上下左右のボーダー幅を示すInsetsと色を指定することで、コンポーネントの周りを決まった色で縁取ることができます。

 では、「ボーダーをなくしたい」と言うときは? これは「EmptyBorder」というものを利用すれば可能です。このボーダーは、大きさとなるInsetsを指定してnewするだけの非常に単純なものです。

public SampleApp(){
    this.setSize(new Dimension(200,200));
    this.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
    GridLayout layout = new GridLayout(3,1);
    layout.setHgap(5);
    layout.setVgap(5);
    this.setLayout(layout);
    for(int i = 0;i < 3;i++){
        JButton btn = new JButton("button" + i);
        btn.setFont(new Font("Serif",Font.PLAIN,18));
        Border border = new EmptyBorder(new Insets(0,0,100,30));
        btn.setBorder(border);
        this.add(btn);
    }
}
EmptyBorderを使うと、ボーダーのないコンポーネントが表示される。
EmptyBorderを使うと、ボーダーのないコンポーネントが表示される。

 これで、ボーダーのないボタンが作成できます。ちょっと面白いのは、ボーダーがなくなると、表示されるテキストも消えてしまうという点です。表示テキストもボーダーの一部として扱われているのです。

 この他にも、ボーダークラスは用意されていますので、興味ある方は一度調べてみましょう。ボーダーが変わるだけでも、GUIの雰囲気はがらりと変わるものですよ。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

あなたにオススメ

著者プロフィール

  • 掌田 津耶乃(ショウダ ツヤノ)

    三文ライター&三流プログラマ。主にビギナーに向けたプログラミング関連の執筆を中心に活動している。 ※現在、入門ドキュメントサイト「libro」、カード型学習サイト「CARD.tuyano.com」を公開中。またGoogle+プロフィールはこちら。

バックナンバー

連載:Swing再入門
All contents copyright © 2005-2021 Shoeisha Co., Ltd. All rights reserved. ver.1.5