11 スクロール・ペイン
この章では、JavaFXアプリケーションでスクロール・ペインをビルドする方法について説明します。
スクロール・ペインでは、UI要素をスクロール可能な形で表示します。このコントロールでは、ユーザーはビューポートをパンするか、スクロール・バーを使用してコンテンツをスクロールできます。デフォルト設定のスクロール・ペインと追加したイメージを図11-1に示します。
スクロール・ペインの作成
例11-1に、アプリケーション内でこのスクロール・ペインを作成する方法を示します。
例11-1 スクロール・ペインを使用したイメージの表示
Image roses = new Image(getClass().getResourceAsStream("roses.jpg"));
ScrollPane sp = new ScrollPane();
sp.setContent(new ImageView(roses));
setContentメソッドは、このスクロール・ペインのコンテンツとして使用するノードを定義します。指定できるノードは1つのみです。複数のコンポーネントのあるスクロール・ビューを作成するには、レイアウト・コンテナまたはGroupクラスを使用します。また、setPannableメソッドにtrue値を指定すると、イメージをクリックし、マウス・カーソルを移動してプレビューを表示できます。スクロール・バーの位置もそれに応じて変わります。
スクロール・ペインに対するスクロール・バー・ポリシーの設定
ScrollPaneクラスは、スクロール・バーをいつ表示するか(常に表示、一切表示しない、または必要なときに表示)を決定するポリシーを提供します。setHbarPolicyメソッドおよびsetVbarPolicyメソッドを使用して、水平および垂直スクロール・バーにそれぞれスクロール・バー・ポリシーを指定します。したがって、例11-2では水平スクロール・バーではなく垂直スクロール・バーが表示されます。
例11-2 水平および垂直スクロール・バー・ポリシーの設定
sp.setHbarPolicy(ScrollBarPolicy.NEVER); sp.setVbarPolicy(ScrollBarPolicy.ALWAYS);
この結果、図11-2に示すように、イメージは垂直方向にのみスクロールします。
スクロール・ペインのコンポーネントのサイズ変更
UIインタフェースを設計する際、スクロール・ペインの幅や高さにあわせてコンポーネントのサイズを変更する場合があります。特定の寸法にあわせるには、setFitToWidthメソッドまたはsetFitToHeightメソッドをtrueに設定します。
図11-3に示すスクロール・ペインには、ラジオ・ボタン、テキスト・ボックス、およびパスワード・ボックスが含まれています。コンテンツのサイズは事前定義したスクロール・ペインのサイズを超えており、垂直スクロール・バーが表示されます。ただし、スクロール・ペインに対してsetFitToWidthメソッドがtrueに設定されているため、コンテンツの幅は縮小されており、水平スクロールは表示されません。
デフォルトでは、FIT_TO_WIDTHおよびFIT_TO_HEIGHTプロパティはどちらもfalseであり、サイズ変更可能なコンテンツは元のサイズを保持します。アプリケーションのコードからsetFitToWidthメソッドを削除すると、図11-4に示す出力が表示されます。
ScrollPaneクラスでは、コンテンツの水平方向および垂直方向の現在値、最小値、および最大値を取得し、設定できます。これらをアプリケーションで使用する方法について学習します。
スクロール・ペインのあるサンプル・アプリケーション
例11-3 では、スクロール・ペインを使用してイメージを含む垂直ボックスを表示します。ScrollPaneクラスのVVALUEプロパティによって、現在表示されているイメージが識別され、イメージ・ファイルの名前が表示されます。
例11-3 スクロール・ペインを使用したイメージの表示
import javafx.application.Application;
import javafx.beans.value.ObservableValue;
import javafx.scene.Scene;
import javafx.scene.control.Label;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.Priority;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
public class Main extends Application {
final ScrollPane sp = new ScrollPane();
final Image[] images = new Image[5];
final ImageView[] pics = new ImageView[5];
final VBox vb = new VBox();
final Label fileName = new Label();
final String [] imageNames = new String [] {"fw1.jpg", "fw2.jpg",
"fw3.jpg", "fw4.jpg", "fw5.jpg"};
@Override
public void start(Stage stage) {
VBox box = new VBox();
Scene scene = new Scene(box, 180, 180);
stage.setScene(scene);
stage.setTitle("Scroll Pane");
box.getChildren().addAll(sp, fileName);
VBox.setVgrow(sp, Priority.ALWAYS);
fileName.setLayoutX(30);
fileName.setLayoutY(160);
for (int i = 0; i < 5; i++) {
images[i] = new Image(getClass().getResourceAsStream(imageNames[i]));
pics[i] = new ImageView(images[i]);
pics[i].setFitWidth(100);
pics[i].setPreserveRatio(true);
vb.getChildren().add(pics[i]);
}
sp.setVmax(440);
sp.setPrefSize(115, 150);
sp.setContent(vb);
sp.vvalueProperty().addListener((ObservableValue<? extends Number> ov,
Number old_val, Number new_val) -> {
fileName.setText(imageNames[(new_val.intValue() - 1)/100]);
});
stage.show();
}
public static void main(String[] args) {
launch(args);
}
}
このアプリケーションのコンパイルと実行によって、図11-5に示すウィンドウが作成されます。
垂直スクロール・バーの最大値は、垂直ボックスの高さと同じです。例11-4に示すコード・フラグメントでは、現在表示されているイメージ・ファイルの名前が表示されます。
例11-4 スクロール・ペインの垂直値の変化の追跡
sp.vvalueProperty().addListener((ObservableValue<? extends Number> ov,
Number old_val, Number new_val) -> {
fileName.setText(imageNames[(new_val.intValue() - 1)/100]);
});
ImageViewオブジェクトはイメージの高さを100ピクセルに制限します。そのため、new_val.intValue() - 1を100分割すると、その結果がimageNames配列の現時点でのイメージの索引になります。
また、アプリケーションでは、垂直および水平スクロール・バーの最小値と最大値を変更して、ユーザー・インタフェースを動的に更新できます。
関連APIドキュメント
