10 スクロール・バー
この章では、スクロール・バー・コントロールを使用してスクロール可能なペインを作成する方法について説明します。
ScrollBarクラスでは、アプリケーション内にスクロール可能なペインとビューを作成できます。図10-1は、サム、左右のボタン(または上下のボタン)、およびトラックという、スクロール・バーの3つの領域を示しています。
スクロール・バーの作成
例10-1のコード・フラグメントを確認してください。
setMinメソッドとsetMaxメソッドは、スクロール・バーで表す最小値と最大値を定義します。ユーザーがサムを移動すると、スクロール・バーの値が変化します。例10-1では、値が50であり、アプリケーションを開始したときにサムがスクロール・バーの中央に位置します。デフォルトでは、スクロール・バーは平行に配置されます。ただし、setOrientationメソッドを使用すると、垂直方向に設定できます。
ユーザーが左右のボタン(または垂直方向の場合は上下のボタン)をクリックすると、ユニット増分の単位でスクロールします。UNIT_INCREMENTプロパティは、ボタンをクリックしたときにスクロール・バーが移動する量を指定します。また、トラック内をブロック増分の単位でクリックできるオプションもあります。BLOCK_INCREMENTプロパティは、バーのトラックをクリックするとスクロール・バーが移動する量を定義します。
アプリケーション内で表示可能な領域を超えるグラフィック・コンテンツをスクロールするには、複数のスクロール・バーからいずれか1つを使用できます。
アプリケーション内でのスクロール・バーの使用
スクロール・バーの動作を確認します。例10-2に示すアプリケーションでは、スクロール可能なシーンを実装してイメージを表示します。このアプリケーションのタスクは、ユーザーがシーンの高さを超える垂直方向のボックスの内容を表示できるようにすることです。
例10-2 複数項目のスクロール
import javafx.application.Application;
import javafx.beans.value.ChangeListener;
import javafx.beans.value.ObservableValue;
import javafx.geometry.Orientation;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.control.ScrollBar;
import javafx.scene.effect.DropShadow;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.VBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class ScrollBarSample extends Application {
final ScrollBar sc = new ScrollBar();
final Image[] images = new Image[5];
final ImageView[] pics = new ImageView[5];
final VBox vb = new VBox();
DropShadow shadow = new DropShadow();
@Override
public void start(Stage stage) {
Group root = new Group();
Scene scene = new Scene(root, 180, 180);
scene.setFill(Color.BLACK);
stage.setScene(scene);
stage.setTitle("Scrollbar");
root.getChildren().addAll(vb, sc);
shadow.setColor(Color.GREY);
shadow.setOffsetX(2);
shadow.setOffsetY(2);
vb.setLayoutX(5);
vb.setSpacing(10);
sc.setLayoutX(scene.getWidth()-sc.getWidth());
sc.setMin(0);
sc.setOrientation(Orientation.VERTICAL);
sc.setPrefHeight(180);
sc.setMax(360);
for (int i = 0; i < 5; i++) {
final Image image = images[i] =
new Image(getClass().getResourceAsStream(
"fw" +(i+1)+ ".jpg")
);
final ImageView pic = pics[i] =
new ImageView(images[i]);
pic.setEffect(shadow);
vb.getChildren().add(pics[i]);
}
sc.valueProperty().addListener((ObservableValue<? extends Number> ov,
Number old_val, Number new_val) -> {
vb.setLayoutY(-new_val.doubleValue());
});
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
コードの1行目では、垂直ボックスにイメージおよびシーンへのスクロール・バーを追加します。
垂直ボックスのY座標は、スクロール・バーのVALUEプロパティが変更されたときに変化するため、例10-3に示すように、サムが移動、またはボタン/トラックがクリックされるたびに垂直ボックスが移動します。
例10-3 垂直ボックスのスクロールの実装
sc.valueProperty().addListener((ObservableValue<? extends Number> ov,
Number old_val, Number new_val) -> {
vb.setLayoutY(-new_val.doubleValue());
});
このアプリケーションのコンパイルと実装によって、図10-2に示す出力が得られます。
このアプリケーションは、ScrollBarクラスの一般的な使用例を示しています。また、このクラスをカスタマイズすると、シーン内のスクロール領域を作成できます。すべてのUIコントロールとノードに関して、スクロール・バーはデフォルト実装から、その外観のスタイルを変更できます。
関連APIドキュメント
