在 JavaFX 中自动拉伸图块的 TilePane
TilePane with automatically stretching tiles in JavaFX
在 JavaFX 中有什么方法可以同时从 TilePane 或 FlowPane 和 GridPane 中获得最佳效果？
这是我想要实现的目标：
首先，我喜欢 GridPane 的想法，我可以在其中设置一个 M×N 网格，该网格在其 parent 容器内自动调整大小，以将 space 平均分为 M 列和 N 行。然后我可以放一些 child 完全填满每个单元格的元素，它们会随着网格一起伸展。这很酷。
但是有一个缺点：我需要通过设置其行号和列号来明确指定每个控件的位置。
然后，有一些布局容器，例如 FlowPane 或 TilePane，当 parent 容器改变其大小时，它们会自动重排它们的 child 元素。当我添加另一个 child 元素时，它会自动附加到列表的末尾，当 space 太少无法容纳另一个元素时，元素列表会在到达容器边缘后自动换行那里。
但这里也有一个缺点：child 元素只能有严格的 pre-defined 大小。它们不会拉伸其 parent 元素。
这是我需要的：
我需要这两个容器中最好的，也就是说，我想要一个 M x N 网格（假设是 4×4），其中每个单元格是 ParentWidth/M x ParentHeight/N 并随着 window，因此它始终是 4×4 单元格，但它们的大小（连同其内容的大小）会相应地拉伸。
但是我不想明确地告诉容器将我添加的每个新 child 放在哪一行和哪一列中。相反，我只想添加它，让容器找出第一个空单元格放入，从左到右填充单元格，如果当前行中没有空单元格，则从上到下填充单元格。
这些预定义容器的属性是否有一些神奇的设置可以让我实现这一目标？还是需要自己写这样的容器？
正是出于您所描述的目的，我创建了 ButtonGridPane 。这是初稿，还有改进的余地，但也许它可以给你一个基本的想法。
public class ButtonGrid extends Pane {
private static final double DEFAULT_RATIO = 0.618033987;
private int columnCount;
private double ratio;
public ButtonGrid(int columnCount) {
this(columnCount, DEFAULT_RATIO);
}
public ButtonGrid(int columnCount, double heightToWidthRatio) {
getStyleClass().add("button-grid");
this.columnCount = columnCount;
ratio = heightToWidthRatio;
}
public void setColumnCount(int columnCount) {
this.columnCount = columnCount;
}
public void setHeightToWidthRatio(double ratio) {
this.ratio = ratio;
}
@Override
public Orientation getContentBias() {
return Orientation.HORIZONTAL;
}
@Override
protected void layoutChildren() {
double left = getInsets().getLeft();
double top = getInsets().getTop();
double tileWidth = calculateTileWidth(getWidth());
double tileHeight = calculateTileHeight(getWidth());
ObservableList<Node> children = getChildren();
double currentX = left;
double currentY = top;
for (int idx = 0; idx < children.size(); idx++) {
if (idx > 0 && idx % columnCount == 0) {
currentX = left;
currentY = currentY + tileHeight;
}
children.get(idx).resize(tileWidth, tileHeight);
children.get(idx).relocate(currentX, currentY);
currentX = currentX + tileWidth;
}
}
@Override
protected double computePrefWidth(double height) {
double w = 0;
for (int idx = 0; idx < columnCount; idx++) {
Node node = getChildren().get(idx);
w += node.prefWidth(-1);
}
return getInsets().getLeft() + w + getInsets().getRight();
}
@Override
protected double computePrefHeight(double width) {
double h = calculateTileHeight(width) * getRowCount();
return getInsets().getTop() + h + getInsets().getBottom();
}
private double calculateTileHeight(double width) {
return calculateTileWidth(width) * ratio;
}
private double calculateTileWidth(double width) {
return (-getInsets().getLeft() + width - getInsets().getRight()) / columnCount;
}
private int getRowCount() {
return getChildren().size() / columnCount;
}
}
好的，这是我自己的解决方案尝试：
由于 GridPane 几乎 以我需要的方式工作，只是不会自动流动其内容，我决定继承 GridPane 并添加自定义自动流动其子控件的代码。 （感谢@jns 提示 JavaFX 库控件 类 可以被子类化。）
所以我对 GridPane 进行了子类化，并为它的内部子列表添加了一个侦听器，这样无论何时从该列表中添加或删除子列表，或者列表以某种方式发生变化（例如，我们重新排序children)，一个私有方法被调用来重排网格中的子项，方法是根据它们在列表中的位置将它们分配给更正的列和行。我还添加了两个私有辅助函数来将列表中的位置转换为行号和列号并返回。
我知道这既不完美也不优雅，但是，嘿，它可以工作，而且工作得很好，足以满足我的需要:P 所以我在这里发布代码以防其他人遇到同样的问题:
package flowgrid;
import javafx.collections.ObservableList;
import javafx.collections.ListChangeListener;
import javafx.scene.Node;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.Priority;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.NamedArg;
/**
* This class subclasses the GridPane layout class.
* It manages its child nodes by arranging them in rows of equal number of tiles.
* Their order in the grid corresponds to their indexes in the list of children
* in the following fashion (similarly to how FlowPane works):
*
* +---+---+---+---+
* | 0 | 1 | 2 | 3 |
* +---+---+---+---+
* | 4 | 5 | 6 | 7 |
* +---+---+---+---+
* | 8 | 9 | … | |
* +---+---+---+---+
*
* It observes its internal list of children and it automatically reflows them
* if the number of columns changes or if you add/remove some children from the list.
* All the tiles of the grid are of the same size and stretch accordingly with the control.
*/
public class FlowGridPane extends GridPane
{
// Properties for managing the number of rows & columns.
private IntegerProperty rowsCount;
private IntegerProperty colsCount;
public final IntegerProperty colsCountProperty() { return colsCount; }
public final Integer getColsCount() { return colsCountProperty().get(); }
public final void setColsCount(final Integer cols) {
// Recreate column constraints so that they will resize properly.
ObservableList<ColumnConstraints> constraints = getColumnConstraints();
constraints.clear();
for (int i=0; i < cols; ++i) {
ColumnConstraints c = new ColumnConstraints();
c.setHalignment(HPos.CENTER);
c.setHgrow(Priority.ALWAYS);
c.setMinWidth(60);
constraints.add(c);
}
colsCountProperty().set(cols);
reflowAll();
}
public final IntegerProperty rowsCountProperty() { return rowsCount; }
public final Integer getRowsCount() { return rowsCountProperty().get(); }
public final void setRowsCount(final Integer rows) {
// Recreate column constraints so that they will resize properly.
ObservableList<RowConstraints> constraints = getRowConstraints();
constraints.clear();
for (int i=0; i < rows; ++i) {
RowConstraints r = new RowConstraints();
r.setValignment(VPos.CENTER);
r.setVgrow(Priority.ALWAYS);
r.setMinHeight(20);
constraints.add(r);
}
rowsCountProperty().set(rows);
reflowAll();
}
/// Constructor. Takes the number of columns and rows of the grid (can be changed later).
public FlowGridPane(@NamedArg("cols")int cols, @NamedArg("rows")int rows) {
super();
colsCount = new SimpleIntegerProperty(); setColsCount(cols);
rowsCount = new SimpleIntegerProperty(); setRowsCount(rows);
getChildren().addListener(new ListChangeListener<Node>() {
public void onChanged(ListChangeListener.Change<? extends Node> change) {
reflowAll();
}
} );
}
// Helper functions for coordinate conversions.
private int coordsToOffset(int col, int row) { return row*colsCount.get() + col; }
private int offsetToCol(int offset) { return offset%colsCount.get(); }
private int offsetToRow(int offset) { return offset/colsCount.get(); }
private void reflowAll() {
ObservableList<Node> children = getChildren();
for (Node child : children ) {
int offs = children.indexOf(child);
GridPane.setConstraints(child, offsetToCol(offs), offsetToRow(offs) );
}
}
}
如您所见，我还使用了行数和列数的属性，以及 getter 和 setters。当使用 setter 更改行数或列数时，将重新创建 GridPane 内的 column/row 约束的内部列表，以便它们正确调整大小，并且当列数发生变化。
构造函数中还有 @NamedArg 注释，因此可以使用 FXML 文件中描述的布局的初始行数和列数创建此控件。
因为它几乎 "solved" 我的问题在某种程度上，我将我的答案标记为已接受。但如果有人 post 有更好的解决方案，我会很乐意接受 他的 回答。
如果您对改进此代码有任何建议，或者您认为可以更优雅地完成某些事情，也请随时告诉我，因为——正如我所说——它还不够完美。
在 JavaFX 中有什么方法可以同时从 TilePane 或 FlowPane 和 GridPane 中获得最佳效果？
这是我想要实现的目标：
首先，我喜欢 GridPane 的想法，我可以在其中设置一个 M×N 网格，该网格在其 parent 容器内自动调整大小，以将 space 平均分为 M 列和 N 行。然后我可以放一些 child 完全填满每个单元格的元素，它们会随着网格一起伸展。这很酷。
但是有一个缺点：我需要通过设置其行号和列号来明确指定每个控件的位置。
然后，有一些布局容器，例如 FlowPane 或 TilePane，当 parent 容器改变其大小时，它们会自动重排它们的 child 元素。当我添加另一个 child 元素时，它会自动附加到列表的末尾，当 space 太少无法容纳另一个元素时，元素列表会在到达容器边缘后自动换行那里。
但这里也有一个缺点：child 元素只能有严格的 pre-defined 大小。它们不会拉伸其 parent 元素。
这是我需要的：
我需要这两个容器中最好的，也就是说，我想要一个 M x N 网格（假设是 4×4），其中每个单元格是 ParentWidth/M x ParentHeight/N 并随着 window，因此它始终是 4×4 单元格，但它们的大小（连同其内容的大小）会相应地拉伸。
但是我不想明确地告诉容器将我添加的每个新 child 放在哪一行和哪一列中。相反，我只想添加它，让容器找出第一个空单元格放入，从左到右填充单元格，如果当前行中没有空单元格，则从上到下填充单元格。
这些预定义容器的属性是否有一些神奇的设置可以让我实现这一目标？还是需要自己写这样的容器？
正是出于您所描述的目的，我创建了 ButtonGridPane 。这是初稿，还有改进的余地，但也许它可以给你一个基本的想法。
public class ButtonGrid extends Pane {
private static final double DEFAULT_RATIO = 0.618033987;
private int columnCount;
private double ratio;
public ButtonGrid(int columnCount) {
this(columnCount, DEFAULT_RATIO);
}
public ButtonGrid(int columnCount, double heightToWidthRatio) {
getStyleClass().add("button-grid");
this.columnCount = columnCount;
ratio = heightToWidthRatio;
}
public void setColumnCount(int columnCount) {
this.columnCount = columnCount;
}
public void setHeightToWidthRatio(double ratio) {
this.ratio = ratio;
}
@Override
public Orientation getContentBias() {
return Orientation.HORIZONTAL;
}
@Override
protected void layoutChildren() {
double left = getInsets().getLeft();
double top = getInsets().getTop();
double tileWidth = calculateTileWidth(getWidth());
double tileHeight = calculateTileHeight(getWidth());
ObservableList<Node> children = getChildren();
double currentX = left;
double currentY = top;
for (int idx = 0; idx < children.size(); idx++) {
if (idx > 0 && idx % columnCount == 0) {
currentX = left;
currentY = currentY + tileHeight;
}
children.get(idx).resize(tileWidth, tileHeight);
children.get(idx).relocate(currentX, currentY);
currentX = currentX + tileWidth;
}
}
@Override
protected double computePrefWidth(double height) {
double w = 0;
for (int idx = 0; idx < columnCount; idx++) {
Node node = getChildren().get(idx);
w += node.prefWidth(-1);
}
return getInsets().getLeft() + w + getInsets().getRight();
}
@Override
protected double computePrefHeight(double width) {
double h = calculateTileHeight(width) * getRowCount();
return getInsets().getTop() + h + getInsets().getBottom();
}
private double calculateTileHeight(double width) {
return calculateTileWidth(width) * ratio;
}
private double calculateTileWidth(double width) {
return (-getInsets().getLeft() + width - getInsets().getRight()) / columnCount;
}
private int getRowCount() {
return getChildren().size() / columnCount;
}
}
好的，这是我自己的解决方案尝试：
由于 GridPane 几乎 以我需要的方式工作，只是不会自动流动其内容，我决定继承 GridPane 并添加自定义自动流动其子控件的代码。 （感谢@jns 提示 JavaFX 库控件 类 可以被子类化。）
所以我对 GridPane 进行了子类化，并为它的内部子列表添加了一个侦听器，这样无论何时从该列表中添加或删除子列表，或者列表以某种方式发生变化（例如，我们重新排序children)，一个私有方法被调用来重排网格中的子项，方法是根据它们在列表中的位置将它们分配给更正的列和行。我还添加了两个私有辅助函数来将列表中的位置转换为行号和列号并返回。
我知道这既不完美也不优雅，但是，嘿，它可以工作，而且工作得很好，足以满足我的需要:P 所以我在这里发布代码以防其他人遇到同样的问题:
package flowgrid;
import javafx.collections.ObservableList;
import javafx.collections.ListChangeListener;
import javafx.scene.Node;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.ColumnConstraints;
import javafx.scene.layout.RowConstraints;
import javafx.scene.layout.Priority;
import javafx.geometry.HPos;
import javafx.geometry.VPos;
import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.NamedArg;
/**
* This class subclasses the GridPane layout class.
* It manages its child nodes by arranging them in rows of equal number of tiles.
* Their order in the grid corresponds to their indexes in the list of children
* in the following fashion (similarly to how FlowPane works):
*
* +---+---+---+---+
* | 0 | 1 | 2 | 3 |
* +---+---+---+---+
* | 4 | 5 | 6 | 7 |
* +---+---+---+---+
* | 8 | 9 | … | |
* +---+---+---+---+
*
* It observes its internal list of children and it automatically reflows them
* if the number of columns changes or if you add/remove some children from the list.
* All the tiles of the grid are of the same size and stretch accordingly with the control.
*/
public class FlowGridPane extends GridPane
{
// Properties for managing the number of rows & columns.
private IntegerProperty rowsCount;
private IntegerProperty colsCount;
public final IntegerProperty colsCountProperty() { return colsCount; }
public final Integer getColsCount() { return colsCountProperty().get(); }
public final void setColsCount(final Integer cols) {
// Recreate column constraints so that they will resize properly.
ObservableList<ColumnConstraints> constraints = getColumnConstraints();
constraints.clear();
for (int i=0; i < cols; ++i) {
ColumnConstraints c = new ColumnConstraints();
c.setHalignment(HPos.CENTER);
c.setHgrow(Priority.ALWAYS);
c.setMinWidth(60);
constraints.add(c);
}
colsCountProperty().set(cols);
reflowAll();
}
public final IntegerProperty rowsCountProperty() { return rowsCount; }
public final Integer getRowsCount() { return rowsCountProperty().get(); }
public final void setRowsCount(final Integer rows) {
// Recreate column constraints so that they will resize properly.
ObservableList<RowConstraints> constraints = getRowConstraints();
constraints.clear();
for (int i=0; i < rows; ++i) {
RowConstraints r = new RowConstraints();
r.setValignment(VPos.CENTER);
r.setVgrow(Priority.ALWAYS);
r.setMinHeight(20);
constraints.add(r);
}
rowsCountProperty().set(rows);
reflowAll();
}
/// Constructor. Takes the number of columns and rows of the grid (can be changed later).
public FlowGridPane(@NamedArg("cols")int cols, @NamedArg("rows")int rows) {
super();
colsCount = new SimpleIntegerProperty(); setColsCount(cols);
rowsCount = new SimpleIntegerProperty(); setRowsCount(rows);
getChildren().addListener(new ListChangeListener<Node>() {
public void onChanged(ListChangeListener.Change<? extends Node> change) {
reflowAll();
}
} );
}
// Helper functions for coordinate conversions.
private int coordsToOffset(int col, int row) { return row*colsCount.get() + col; }
private int offsetToCol(int offset) { return offset%colsCount.get(); }
private int offsetToRow(int offset) { return offset/colsCount.get(); }
private void reflowAll() {
ObservableList<Node> children = getChildren();
for (Node child : children ) {
int offs = children.indexOf(child);
GridPane.setConstraints(child, offsetToCol(offs), offsetToRow(offs) );
}
}
}
如您所见，我还使用了行数和列数的属性，以及 getter 和 setters。当使用 setter 更改行数或列数时，将重新创建 GridPane 内的 column/row 约束的内部列表，以便它们正确调整大小，并且当列数发生变化。
构造函数中还有 @NamedArg 注释，因此可以使用 FXML 文件中描述的布局的初始行数和列数创建此控件。
因为它几乎 "solved" 我的问题在某种程度上，我将我的答案标记为已接受。但如果有人 post 有更好的解决方案，我会很乐意接受 他的 回答。
如果您对改进此代码有任何建议，或者您认为可以更优雅地完成某些事情，也请随时告诉我，因为——正如我所说——它还不够完美。