原文地址http://download.oracle.com/javafx/2.0/ui_controls/slider.htm
Slider 类呈现一个控件来显示和回应一个范围的数值。该控件包括一个轨道和一个可以拖动的滑标,也包含刻度和刻度标记来指示数值。Figure 15-1 展示了一个滑动条并指明了其主要元素。
创建Slider
花点时间看下 Example 15-1 中的代码,它产生了一个Figure 15-1 展示的滑动条。
Example 15-1 Creating a Slider
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 定义了滑动条的视觉外观。在 Example 15-1 中,刻度和数值显示了。另外,大刻度之间的单元距离设置为50,大刻度直接的小刻度数量定义为5。把 setSnapToTicks方法设为 true 来保持滑标总和刻度对其。
setBlockIncrement方法定义了用户点击轨道时滑标移动的距离。 Example 15-1 中该值是10,就是说当用户点击轨道时,滑标会向点击方向移动10单位。
在图形应用中使用滑动条
现在看一下Figure 15-2。 该应用使用了3个滑动条来白哦几图片的属性。每个滑动条调整一个特定的视觉特点:透明度、褐色调、伸缩比例。
Example 15-2 shows the source code of this application.
Example 15-2 Slider Sample
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
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 Main 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.WHITE;
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");
scene.setFill(Color.BLACK);
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(new ChangeListener<Number>() {
public void changed(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(new ChangeListener<Number>() {
public void changed(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(new ChangeListener<Number>() {
public void changed(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滑动条控制。第三个滑动条定义了放大倍数,调用的是 setScaleX 和 setScaleY 方法。
Example 15-3 中的代码是一个把Slider类的 getValue方法返回的双精度值转换为 String ,也应用了格式来显示滑动条的值:点后两位小数的浮点类型。
Example 15-3 Formatting the Rendered Slider's Value
scalingValue.setText((Double.toString(value)).format("%.2f", value));
下一步就是为它应用视效或CSS风格来改善外观和感觉。