18 スライダ
この章では、JavaFXアプリケーションでスライダを使用して、数値の範囲を表示し、対話的に操作する方法について説明します。
Slider
コントロールはトラックとドラッグ可能なサムで構成されます。また、範囲の数値を示すティック・マークとティック・ラベルも組み込むことができます。図18-1に、一般的なスライダとその主な要素を示します。
スライダの作成
図18-1に示すスライダを作成する例18-1のコード・フラグメントを確認してください。
例18-1 スライダの作成
Slider slider = new Slider(); slider.setMin(0); slider.setMax(100); slider.setValue(40); slider.setShowTickLabels(true); slider.setShowTickMarks(true); slider.setMajorTickUnit(50); slider.setMinorTickCount(5); slider.setBlockIncrement(10);
setMin
メソッドとsetMax
メソッドは、それぞれスライダで表す最小と最大の数値を定義します。setValue
メソッドはスライダの現在の値を指定しますが、この値は常に最大値より小さく、最小値より大きくなります。このメソッドを使用して、アプリケーションを開始したときのサムの位置を定義します。
setShowTickMarks
およびsetShowTickLabels
の2つのブール・メソッドは、スライダの外観を定義します。例18-1では、マークとラベルが有効化されています。また、主ティック・マークの間の距離の単位は50に設定され、2つの主ティックの間にある副ティックの数は5に指定されます。setSnapToTicks
メソッドをtrue
に割り当てると、スライダの値をティック・マークに位置合せできます。
setBlockIncrement
メソッドは、ユーザーがトラックをクリックしたときにサムが移動する距離を定義します。例18-1では、この値は10であり、ユーザーがトラックをクリックするたびにクリック位置から10の単位で進みます。
グラフィカル・アプリケーションでのスライダの使用
ここで図18-2を確認します。このアプリケーションでは、3つのスライダを使用して画像の特性のレンダリングを編集します。それぞれのスライダは、不透明度レベル、セピア調の値、スケーリング係数などの特定のビジュアル特性を調整します。
例18-2に、このアプリケーションのソース・コードを示します。
例18-2 スライダのサンプル
import javafx.application.Application; import javafx.beans.value.ObservableValue; import javafx.geometry.Insets; import javafx.scene.Group; import javafx.scene.Scene; import javafx.scene.control.Label; import javafx.scene.control.Slider; import javafx.scene.effect.SepiaTone; import javafx.scene.image.Image; import javafx.scene.image.ImageView; import javafx.scene.layout.GridPane; import javafx.scene.paint.Color; import javafx.stage.Stage; public class SliderSample extends Application { final Slider opacityLevel = new Slider(0, 1, 1); final Slider sepiaTone = new Slider(0, 1, 1); final Slider scaling = new Slider (0.5, 1, 1); final Image image = new Image(getClass().getResourceAsStream( "cappuccino.jpg") ); final Label opacityCaption = new Label("Opacity Level:"); final Label sepiaCaption = new Label("Sepia Tone:"); final Label scalingCaption = new Label("Scaling Factor:"); final Label opacityValue = new Label( Double.toString(opacityLevel.getValue())); final Label sepiaValue = new Label( Double.toString(sepiaTone.getValue())); final Label scalingValue = new Label( Double.toString(scaling.getValue())); final static Color textColor = Color.BLACK; final static SepiaTone sepiaEffect = new SepiaTone(); @Override public void start(Stage stage) { Group root = new Group(); Scene scene = new Scene(root, 600, 400); stage.setScene(scene); stage.setTitle("Slider Sample"); GridPane grid = new GridPane(); grid.setPadding(new Insets(10, 10, 10, 10)); grid.setVgap(10); grid.setHgap(70); final ImageView cappuccino = new ImageView (image); cappuccino.setEffect(sepiaEffect); GridPane.setConstraints(cappuccino, 0, 0); GridPane.setColumnSpan(cappuccino, 3); grid.getChildren().add(cappuccino); scene.setRoot(grid); opacityCaption.setTextFill(textColor); GridPane.setConstraints(opacityCaption, 0, 1); grid.getChildren().add(opacityCaption); opacityLevel.valueProperty().addListener(( ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> { cappuccino.setOpacity(new_val.doubleValue()); opacityValue.setText(String.format("%.2f", new_val)); }); GridPane.setConstraints(opacityLevel, 1, 1); grid.getChildren().add(opacityLevel); opacityValue.setTextFill(textColor); GridPane.setConstraints(opacityValue, 2, 1); grid.getChildren().add(opacityValue); sepiaCaption.setTextFill(textColor); GridPane.setConstraints(sepiaCaption, 0, 2); grid.getChildren().add(sepiaCaption); sepiaTone.valueProperty().addListener(( ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> { sepiaEffect.setLevel(new_val.doubleValue()); sepiaValue.setText(String.format("%.2f", new_val)); }); GridPane.setConstraints(sepiaTone, 1, 2); grid.getChildren().add(sepiaTone); sepiaValue.setTextFill(textColor); GridPane.setConstraints(sepiaValue, 2, 2); grid.getChildren().add(sepiaValue); scalingCaption.setTextFill(textColor); GridPane.setConstraints(scalingCaption, 0, 3); grid.getChildren().add(scalingCaption); scaling.valueProperty().addListener(( ObservableValue<? extends Number> ov, Number old_val, Number new_val) -> { cappuccino.setScaleX(new_val.doubleValue()); cappuccino.setScaleY(new_val.doubleValue()); scalingValue.setText(String.format("%.2f", new_val)); }); GridPane.setConstraints(scaling, 1, 3); grid.getChildren().add(scaling); scalingValue.setTextFill(textColor); GridPane.setConstraints(scalingValue, 2, 3); grid.getChildren().add(scalingValue); stage.show(); } public static void main(String[] args) { launch(args); } }
ImageView
オブジェクトの不透明度プロパティは、最初のスライダ、opacityLevelの値に応じて変化します。SepiaTone
効果のレベルは、sepiaToneスライダの値を変更すると変化します。3番目のスライダは、setScaleX
メソッドとsetScaleY
メソッドにスライダの現在の値を渡して画像のスケーリング係数を定義します。
例18-3では、Slider
クラスのgetValue
メソッドから返されたdouble値をString
に変換するメソッドを示します。これは小数点以下2桁の浮動小数点としてスライダの値をレンダリングするフォーマットにも適用されます。
次のステップでは、スライダのルック・アンド・フィールを拡張して、視覚効果またはCSSスタイルをスライダに適用します。
関連APIドキュメント