2.10 スライダ(JSlider)の使い方

本節では、スライダ(JSlider)の使い方を見ていきます。
スライダには「つまみ」がついており、「つまみ」をマウスでドラッグすることで値を変更することができます。スピナーやスライダは、ユーザにとって直観的でわかりやすい親切なGUI部品です。

 

1.スライダの設置

スライダの設置から始めましょう。「SliderExample」という名前の新規プロジェクトを作成します。

2-10-1

プロジェクトを作成したら、「SimpleFrame」という名前のJFrameフォームを作成します。よくわからない場合は、2.1 ソフトウェアの画面作り(JFrame)とルック・アンド・フィールを参照して下さい。

2-10-2

「パレット」ウィンドウの「Swingコントロール」タブから「スライダ」をクリックし、「JFrame」フォームの上でもう一度クリックして配置します。

2-10-3

スライダを右クリックして[変数名を変更]を選択します。

2-10-4

「slGrayScale」という名前にしました。グレースケール調整(GrayScale)を行うスライダ(sl)という意味です。

2-10-5

スライダを右クリックして[プロパティ]を開きます。[maximum]に「255」、[minimum]に「0」、[value]に「0」を入れます。[maximum]はスライダの最大値、[minimum]はスライダの最小値、[value]はスライダの初期値を意味します。

その他に、次のプロパティを変更することで、スライダの外観等を変更することができます。
[majorTickSpacing]・・・主目盛り間隔の設定
[minorTickSpacing]・・・補助目盛り間隔の設定
[paintLabels]・・・スライダ下にラベルの描画(主目盛り間隔)
[paintTicks]・・・スライダ下に目盛りの描画
[paintTrack]・・・スライダの線の描画

2-10-6

ここでは、上のようにプロパティを設定しました。

2-10-7

また、上図のように結果を出力するためのラベル(JLabel)を設置しましょう。

 

2.機能の実装

機能の実装を行っていきます。スライダから数値を取得するには、「getValue()」メソッドを用います。メソッド名はスピナーのときと同じですが、スライダの場合は扱う対象が整数のみなので、初めから整数型として取得できます。

実際に書いてみましょう。

2-10-8

スライダを右クリックして、[イベント]->[Change]->[stateChanged]と進み、ソース編集画面に移ります。

2-10-9

スライダの状態が変化した際に発生する、「glGrayScaleStateChanged()」という名前のイベントハンドラが生成されます。ここに、スライダの値を取得してラベルに表示する、次の命令を挿入します。

ソースが書けたら、実行してみましょう。

2-10-10

スライダを動かすと、ラベルに現在のスライダの値が表示されます。

次は、数値に合わせて色を変化させてみましょう。2.6 コンボボックス(JComboBox)の使い方で触れた、Colorクラスを次のように利用します。

int型やString型のように、色の情報を持ったColor型があり、上のようにして新しい色を作成することができます。色の作成にはRGB表色系を利用しており、Red成分を0~255、Green成分を0~255、Blue成分を0~255の範囲で指定しています。全てが0であれば黒、全てが255であれば白となり、各成分の数字が等しければその中間、すなわち灰色(グレー)になるわけです。この性質を利用して、ソースコードを記入していきます。

2-10-11

スライダから取得した値を用いてグレーの色を作成し、ラベルの色を設定するソースコードです。

実際に実行してみましょう。

2-10-12

スライダを動かしていくと色がだんだんと薄くなり、

2-10-13

1番端まで持っていくと、真っ白になります。

 

3.スピナーとの連動

スライダは直観的で便利なGUIですが、値の微調整が必要な際には不向きです。例えば現在の値が100で、次は101にしたい、というとき、少し高度なマウステクニックが要求されます(キーボードの矢印キーを押せば済む話なのですが)。こんなときは、数値の表示機能も兼ねたスピナーを設置し、スライダとスピナーを連動させるのがおすすめです。

2-10-14

上図のようにスピナー(JSpinner)を設置しましょう。スピナーのモデルは数値型(整数)で、初期値が「0」、最小値が「0」、最大値が「255」、ステップ・サイズが「1」とします。

2-10-15

スピナーの設置ができたら、スピナーを右クリックして[イベント]->[Change]->[stateChanged]と進みます。

2-10-16

スピナーの状態が変化した際に発生する、「glGrayScaleStateChanged()」という名前のイベントハンドラが生成されるので、次のコードを挿入します。

スピナーやスライダの値を変更する際は、このように「setValue()」メソッドを用います。このようにしてスライダの値が変化したとき、スライダの状態が変化したことになるため、イベントハンドラ「glGrayScaleStateChanged()」が呼び出されます。スライダの操作でスライダの値を際には、スピナーの値をそれに合わせて更新させます。「glGrayScaleStateChanged()」に次のソースコードを挿入します。

このようにして、スピナーとスライダの値を同期させることができます。

2-10-17

実際に実行して、スライダとスピナーが連動していることを確認しましょう。

(2013年11月15日 加納徹)


コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

post date*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)