私はScroll-and Tilepanes atmの周りを頭で囲んでいます。汚れたハックなしで解決できない問題が発生しました。ScrollPaneでTilePaneを使用したレスポンシブなUIデザイン
私は8つのタイルを持つ水平タイルパネルを持っていて、4つのタイルを持つ2つのタイルを持つように設定しました。 そのTilePane私はHBoxに入れました。なぜなら、私がStackPaneに配置すると、タイルペインのサイズが伸びて、私の列が無効になるからです。 prefColumns/Rowsを設定すると、実際の列数/行数を設定しようとするのではなく、TilePaneのサイズが再計算されるというのはちょっと変わったことです。
とにかく、HBoxを直接ScrollPaneに配置すると、2行目のタイルが途切れてもスクロールバーが表示されないため、HBoxを直接ScrollPaneに配置することはできません。私がScrollPaneに入れたStackpaneでそのHBoxを再び設定することは、そのトリックを行います。ウィンドウの幅をあまり小さくするまで、タイルペインはタイルを新たに配置しなければならず、3つ以上の行が表示されます。
は、ここで基本的なプログラムの開発です：
public class Main extends Application {
@Override
public void start(Stage stage) {
TilePane tilePane = new TilePane();
tilePane.setPadding(new Insets(5));
tilePane.setVgap(4);
tilePane.setHgap(4);
tilePane.setPrefColumns(4);
tilePane.setStyle("-fx-background-color: lightblue;");
HBox tiles[] = new HBox[8];
for (int i = 0; i < 8; i++) {
tiles[i] = new HBox(new Label("This is node #" + i));
tiles[i].setStyle("-fx-border-color: black;");
tiles[i].setPadding(new Insets(50));
tilePane.getChildren().add(tiles[i]);
}
HBox hbox = new HBox();
hbox.setAlignment(Pos.CENTER);
hbox.setStyle("-fx-background-color: blue;");
hbox.getChildren().add(tilePane);
StackPane stack = new StackPane();
stack.getChildren().add(hbox);
ScrollPane sp = new ScrollPane();
sp.setFitToHeight(true);
sp.setFitToWidth(true);
sp.setContent(stack);
stage.setScene(new Scene(sp, 800, 600));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
私は私の希望の動作を実現するために管理し、本当に汚いハックのそのより。 TilePaneを含むHBoxの高さと幅にリスナーを追加し、幅が小さくなって列が削除され、新しい行が追加されたために高さが変更されたと仮定しました。それを可能にするために、私はVBoxにHBoxを入れて、ScrollPaneの高さを増やさないようにしました。幅については、別の列を表示するスペースがある場合（最大4）、単純に計算します。ここで
は変更されている：
public class Main extends Application {
private boolean notFirstPassHeight;
private boolean notFirstPassWidth;
@Override
public void start(Stage stage) {
TilePane tilePane = new TilePane();
tilePane.setPadding(new Insets(5));
tilePane.setVgap(4);
tilePane.setHgap(4);
tilePane.setPrefColumns(4);
tilePane.setStyle("-fx-background-color: lightblue;");
// I took the value from ScenicView
tilePane.prefTileWidthProperty().set(182);
HBox tiles[] = new HBox[8];
for (int i = 0; i < 8; i++) {
tiles[i] = new HBox(new Label("This is node #" + i));
tiles[i].setStyle("-fx-border-color: black;");
tiles[i].setPadding(new Insets(50));
tilePane.getChildren().add(tiles[i]);
}
ScrollPane sp = new ScrollPane();
sp.setFitToHeight(true);
sp.setFitToWidth(true);
StackPane stack = new StackPane();
VBox vbox = new VBox();
vbox.setStyle("-fx-background-color: red");
HBox hbox = new HBox();
hbox.setAlignment(Pos.CENTER);
hbox.setStyle("-fx-background-color: blue;");
hbox.getChildren().add(tilePane);
notFirstPassHeight = false;
notFirstPassWidth = false;
hbox.heightProperty().addListener((observable, oldValue, newValue) -> {
if (oldValue.doubleValue() < newValue.doubleValue() && notFirstPassHeight) {
tilePane.setPrefColumns(tilePane.getPrefColumns() - 1);
stack.requestLayout();
}
notFirstPassHeight = true;
});
hbox.widthProperty().addListener((observable, oldValue, newValue) -> {
if (oldValue.doubleValue() < newValue.doubleValue() && notFirstPassWidth && tilePane.getPrefColumns() <= 3
&& (newValue.doubleValue()/(tilePane.getPrefColumns() + 1)) > tilePane.getPrefTileWidth()) {
tilePane.setPrefColumns(tilePane.getPrefColumns() + 1);
stack.requestLayout();
}
notFirstPassWidth = true;
});
vbox.getChildren().add(hbox);
stack.getChildren().add(vbox);
sp.setContent(stack);
stage.setScene(new Scene(sp, 800, 600));
stage.show();
}
public static void main(String[] args) {
launch();
}
}
しかし、このアプローチはTilepaneのタイルの幅1.Know
に私を必要とします。
2.私の計算が正確であるように、タイル間のパディングとギャップを考慮してください。これは私の例では行いません。
あなたが私に尋ねると、それはまったく良いアプローチではありません。そのような基本的なことのためのプロセスが複雑すぎる。 ScrollPaneでTilePanesを使用して、完全なサイズ変更と目的の動作を達成するためのより簡単な方法が必要です。
「ダーティハック」（2番目）の例で機能するようにしたいと考えています。私はフルスクリーンでそれを持っていると言うと2行ala 4列を持って、アプリケーションが動的に行を追加し、幅が小さくなると、列を減らすようにサイズが変更された場合。基本的には、アプリケーションの高さを優先して縦方向のスクロールバーを表示し、サイズ変更の余地がなくなったらスクロールバーのみを表示するようにします（1列まで）。私は自分自身を説明することができればと思っています.2番目の例は、私がしたいことをしています。 – 404KnowledgeNotFound
ああ、OK、 'GridPane'はあなたが望むものではありません。私に実験をさせてください... –