(翻译)第二十一回 JavaFX2.0 滑动条Slider

简介:   原文地址http://download.oracle.com/javafx/2.0/ui_controls/slider.htm     Slider 类呈现一个控件来显示和回应一个范围的数值。

 

原文地址http://download.oracle.com/javafx/2.0/ui_controls/slider.htm

 

 

Slider 类呈现一个控件来显示和回应一个范围的数值。该控件包括一个轨道和一个可以拖动的滑标,也包含刻度和刻度标记来指示数值。Figure 15-1 展示了一个滑动条并指明了其主要元素。

Figure 15-1 Elements of a Slider

Main elements of a slider.
Description of "Figure 15-1 Elements of a Slider"

创建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方法指定了滑动条的当前值,当然必须在最小值和最大值之间。 使用该方法来定义应用启动后滑标的位置。

两个布尔方法 setShowTickMarkssetShowTickLabels 定义了滑动条的视觉外观。在 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风格来改善外观和感觉。

目录
相关文章
|
3月前
QT中 QPlainTextEdit自适应高度的问题(防止出现滚动条)
在QT开发过程中,经常使用到QPlainTextEdit来填入大量的文字,一般我们都会设置QPlainText的固定高度或者默认高度,但是随着文字的增多,就会自动出现滚动条,有时候我们可能需要QPlainText的高度随着自动适应文字的高度(即是说不需要出现滚动条)
76 0
Flutter 121: 图解简易 Slider 滑动条
0 基础学习 Flutter,第一百二十一步:简单学习 Slider 滑动条!
1280 0
Flutter 121: 图解简易 Slider 滑动条
|
4月前
|
C++ UED
C++ Qt开发:Slider滑块条组件
Qt 是一个跨平台C++图形界面开发库,利用Qt可以快速开发跨平台窗体应用程序,在Qt中我们可以通过拖拽的方式将不同组件放到指定的位置,实现图形化开发极大的方便了开发效率,本章将重点介绍`Slider`滑块条组件的常用方法及灵活运用。当涉及到C++ Qt开发中的`Slider`滑块条组件时,你可能会用到`QSlider`类。`QSlider`是一个用于选择整数值的控件,常用于调整范围内的数值,如音量、亮度等。在水平方向上的`Slider`通常被称为水平滑块(Horizontal Slider),而在垂直方向上的Slider被称为垂直滑块(Vertical Slider)。
35 0
|
Swift
SwiftUI极简教程32:使用Shape形状和Animation动画创建一个圆形进度条
SwiftUI极简教程32:使用Shape形状和Animation动画创建一个圆形进度条
630 0
SwiftUI极简教程32:使用Shape形状和Animation动画创建一个圆形进度条
|
自然语言处理
Qt-QML-Slider-滑块-Style
感觉滑块这个东西,可以算是一个基本模块了,在我的项目中也有这个模块,今天我将学一下一下滑块的使用以及美化工作。
328 0
Qt-QML-Slider-滑块-Style
|
前端开发
[译] 用 Flutter 打造一个圆形滑块(Slider)
大多数情况下你并不会需要它。但想象一下:如果你想要用户选定一个时间段,或者只是想要一个比直线形状更有趣一点的常规滑块的场景时,就可以使用圆形滑块。
2445 0
|
前端开发 Java Android开发
Android源码解析--Material Design之水波纹点击效果RippleEffect使用
版权声明:本文为博主原创文章,转载请标明出处。 https://blog.csdn.net/lyhhj/article/details/48505041 Android5.0已经出了好久了,但是目前市场上的App好像没有多少用5.0上面的一些效果,依旧延续着之前的控件使用,但是既然新的东西已经出来了,就必定会淘汰旧的不好的,所以我们要与时俱进。
1042 0
|
Windows
DevExpress学习03——label控件的背景色问题
今天使用了DevExpress的labelControl,发现拖放上去,其背景色和主窗体的背景一样,非常不谐调,把BackColor设置为透明也不行(Windows中的Label可以)。 没有办法,我用颜色拾取器,拾取到上方面板颜色是RGB(80,80,80),于是将labelControl背景色改为RGB(80,80,80)颜色就统一了。
1332 0
|
前端开发
(翻译)JavaFX2.0网格布局窗格GridPane
public class GridPane extends Pane   GridPane将其孩子结点灵活地放置在行列网格中。若设置了边框和边缘(border and/or padding),它的内容只能在这些间隙内部。
1055 0