javafx 自动调整大小和按钮填充
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23229149/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javafx automatic resizing and button padding
提问by Jeroen
I'm trying to make an on screen keyboard with Javafx for the layout. I'm using the Scene Builder to make the FXML file.
我正在尝试使用 Javafx 为布局制作屏幕键盘。我正在使用 Scene Builder 制作 FXML 文件。
<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="186.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
<children>
<VBox layoutX="0.0" layoutY="0.0" prefHeight="186.0" prefWidth="600.0" rotate="0.0" spacing="2.0">
<children>
<HBox minHeight="33.0" prefHeight="33.0" prefWidth="600.0" spacing="2.0">
<children>
<Label maxWidth="-Infinity" prefHeight="33.0" prefWidth="35.0" text="Milk" textAlignment="CENTER" />
<Label maxWidth="-Infinity" prefHeight="33.0" text="Mister" />
<Label maxWidth="-Infinity" prefHeight="35.0" text="Minimum" />
</children>
<padding>
<Insets left="5.0" />
</padding>
</HBox>
<HBox prefHeight="29.0" prefWidth="600.0">
<children>
<Button minWidth="29.0" mnemonicParsing="false" prefHeight="27.0" prefWidth="29.0" text="Esc" textAlignment="CENTER" underline="false">
<font>
<Font size="9.0" />
</font>
</Button>
<Button mnemonicParsing="false" text="`" textAlignment="CENTER" />
<Button mnemonicParsing="false" text="1" />
<Button mnemonicParsing="false" text="2" />
<Button mnemonicParsing="false" text="3" />
<Button mnemonicParsing="false" text="4" />
<Button mnemonicParsing="false" text="5" />
<Button mnemonicParsing="false" text="6" />
<Button mnemonicParsing="false" text="7" />
<Button mnemonicParsing="false" text="9" />
<Button mnemonicParsing="false" text="0" />
<Button mnemonicParsing="false" text="-" />
<Button mnemonicParsing="false" text="=" />
<Button mnemonicParsing="false" text="Backspace" />
</children>
</HBox>
<HBox prefHeight="57.0" prefWidth="600.0">
<children>
<VBox minHeight="50.0" prefHeight="78.0" prefWidth="505.0" HBox.hgrow="ALWAYS">
<children>
<HBox prefHeight="29.0" prefWidth="-1.0">
<children>
<Button mnemonicParsing="false" prefHeight="27.0" text="Tab" />
<Button mnemonicParsing="false" text="q" />
<Button mnemonicParsing="false" text="w" />
<Button mnemonicParsing="false" text="e" />
<Button mnemonicParsing="false" text="r" />
<Button mnemonicParsing="false" text="t" />
<Button mnemonicParsing="false" text="y" />
<Button mnemonicParsing="false" text="u" />
<Button mnemonicParsing="false" text="i" />
<Button mnemonicParsing="false" text="o" />
<Button mnemonicParsing="false" text="p" />
<Button mnemonicParsing="false" text="[" />
<Button mnemonicParsing="false" text="]" />
</children>
</HBox>
<HBox minHeight="-1.0" prefHeight="28.0" prefWidth="-1.0">
<children>
<Button mnemonicParsing="false" prefWidth="71.0" text="Caps" />
<Button mnemonicParsing="false" text="a" />
<Button mnemonicParsing="false" text="s" />
<Button mnemonicParsing="false" text="d" />
<Button mnemonicParsing="false" text="f" />
<Button mnemonicParsing="false" text="g" />
<Button mnemonicParsing="false" text="h" />
<Button mnemonicParsing="false" text="j" />
<Button mnemonicParsing="false" text="k" />
<Button mnemonicParsing="false" text="l" />
<Button mnemonicParsing="false" text=";" />
<Button mnemonicParsing="false" text="'" />
<Button mnemonicParsing="false" text="\" />
</children>
</HBox>
</children>
</VBox>
<Button mnemonicParsing="false" prefHeight="57.0" prefWidth="132.0" text="Enter" />
</children>
</HBox>
<HBox prefHeight="27.000099999997474" prefWidth="600.0">
<children>
<Button mnemonicParsing="false" prefWidth="85.0" text="Shift" />
<Button mnemonicParsing="false" text="z" />
<Button mnemonicParsing="false" text="x" />
<Button mnemonicParsing="false" text="c" />
<Button mnemonicParsing="false" text="v" />
<Button mnemonicParsing="false" text="b" />
<Button mnemonicParsing="false" text="n" />
<Button mnemonicParsing="false" text="m" />
<Button mnemonicParsing="false" text="," />
<Button mnemonicParsing="false" text="." />
<Button mnemonicParsing="false" text="/" />
<Button mnemonicParsing="false" text="^" />
<Button mnemonicParsing="false" prefWidth="56.0" text="Shift" />
<Button mnemonicParsing="false" text="Del" />
</children>
</HBox>
<HBox prefHeight="29.0" prefWidth="600.0" VBox.vgrow="ALWAYS">
<children>
<Button mnemonicParsing="false" text="Fn" />
<Button mnemonicParsing="false" text="Ctrl">
<HBox.margin>
<Insets />
</HBox.margin>
</Button>
<Button mnemonicParsing="false" text="Win" />
<Button mnemonicParsing="false" text="Alt" />
<Button mnemonicParsing="false" prefWidth="105.0" text="Space" HBox.hgrow="ALWAYS" />
<Button mnemonicParsing="false" text="Alt" />
<Button mnemonicParsing="false" prefWidth="-1.0" text="Ctrl" textAlignment="LEFT" />
<Button mnemonicParsing="false" text="<" />
<Button mnemonicParsing="false" text="v" />
<Button mnemonicParsing="false" text=">" />
<Button mnemonicParsing="false" text="Menu" />
</children>
</HBox>
</children>
</VBox>
</children>
</AnchorPane>
Which looks like this:
看起来像这样：
But when the window is resized, the contents don't. I want the buttons to gain/lose size until it fits the window. Turning on Hgrow and Vgrow didn't work.
但是当调整窗口大小时，内容不会。我希望按钮增大/减小尺寸，直到它适合窗口。打开 Hgrow 和 Vgrow 不起作用。
And I can't find how to set the padding on buttons. I want to make buttons like Ctrl smaller without losing the text.
而且我找不到如何在按钮上设置填充。我想让像 Ctrl 这样的按钮变小而不丢失文本。
采纳答案by jewelsea
Sizing based on font size
根据字体大小调整大小
For your particular case, rather than trying to resize buttons using padding or additional layout constraints, try adjusting the font size (-fx-font-size) used for the parent layout container for your virtual keyboard. If you make the font size larger, the buttons will automatically change their preferred size to match this larger size, plus all of the text will be automatically rendered and fit within the preferred size and be displayed in the suggested padding layout for that font size (which is probably what you want).
对于您的特定情况，与其尝试使用填充或其他布局约束来调整按钮大小，不如尝试调整-fx-font-size用于虚拟键盘的父布局容器的字体大小 ( )。如果您使字体变大，按钮将自动更改其首选大小以匹配此更大的尺寸，此外所有文本将自动呈现并适合首选大小，并显示在该字体大小的建议填充布局中（这可能是你想要的）。
Button Resizing Rules
按钮大小调整规则
Basically the rules to get a button resizable are:
基本上让按钮可调整大小的规则是：
- Remove the maxSize constraint from the button,
button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE). This is required because the default constraint for a button is that its maximum size is its preferred size, so it doesn't automatically grow to fill available space. - Get the preferred size of the button to be size you want. As you are doing an onscreen keyboard, one way to achieve this is to increase or decrease the font size, then the button will size itself automatically.
- If you want additional padding in a button, you can use
-fx-paddingin CSS orbutton.setPadding(new Insets(...))in code. - Put the button in a resizable parent.
- Make sure the resizable parent is actually resized (something like a StackPane will be automatically resized to fill available area, I don't use AnchorPane very much so I'm unfamiliar with its resizing behaviour).
- 从按钮中删除 maxSize 约束，
button.setMaxSize(Double.MAX_VALUE, Double.MAX_VALUE)。这是必需的，因为按钮的默认约束是其最大尺寸为其首选尺寸，因此它不会自动增长以填充可用空间。 - 将按钮的首选大小设置为您想要的大小。当您使用屏幕键盘时，实现此目的的一种方法是增大或减小字体大小，然后按钮将自动调整大小。
- 如果您想在按钮中添加额外的填充，您可以
-fx-padding在 CSS 或button.setPadding(new Insets(...))代码中使用。 - 将按钮放在可调整大小的父级中。
- 确保实际调整大小的父级（像 StackPane 这样的东西会自动调整大小以填充可用区域，我不太使用 AnchorPane，所以我不熟悉它的调整大小行为）。
To better understand layout management in JavaFX, I recommend viewing a past JavaOne Interface Layout with JavaFX 2.0 presentation.
为了更好地理解 JavaFX 中的布局管理，我建议查看过去的 JavaOne Interface Layout with JavaFX 2.0 演示。
Resizable Button Grid Sample
可调整大小的按钮网格示例
If you wish to continue trying to create your own implementation, this sample color choosermight be of assistance. The color choose implementation is based on a resizable grid of resizable buttons, so as your change the area available for color chooser grid, both the grid and the buttons in the grid expand or contract. The code for the color chooser is not FXML based, nor does it directly implement a keyboard which is what you want, but it does demonstrate automated sizing of buttons as you asking about in your question.
如果您希望继续尝试创建自己的实现，此示例颜色选择器可能会有所帮助。颜色选择实现基于可调整大小按钮的可调整大小的网格，因此当您更改颜色选择器网格的可用区域时，网格和网格中的按钮都会扩展或收缩。颜色选择器的代码不是基于 FXML 的，也不是直接实现您想要的键盘，但它确实演示了您在问题中询问的按钮自动调整大小。
Consider using the JavaFX virtual keyboard
考虑使用 JavaFX 虚拟键盘
JavaFX already has a built-in virtual keyboard. The built-in keyboard doesn't have an officially supported and documented public API and is not guaranteed to be maintained between Java versions.However, using the built-in virtual keyboard might still be a better approach than trying to create your own. Creating a quality, general purpose virtual keyboard is a pretty hard task (IMO).
JavaFX 已经有一个内置的虚拟键盘。 内置键盘没有官方支持和记录的公共 API，并且不保证在 Java 版本之间维护。但是，使用内置虚拟键盘可能仍然是比尝试创建自己的更好的方法。创建高质量的通用虚拟键盘是一项非常艰巨的任务 (IMO)。
There is some discussion on this topic on the Oracle JavaFX forums.
在Oracle JavaFX 论坛上有一些关于此主题的讨论。
JavaFX is open source, so even if you don't use the built-in virtual keyboard directly, you can review the JavaFX sourceto see how it is implemented if you wish.
JavaFX 是开源的，因此即使您不直接使用内置的虚拟键盘，如果您愿意，也可以查看JavaFX 源代码以了解它是如何实现的。
Sample Virtual Keyboard Code
示例虚拟键盘代码
Sample code demonstrating the use of the built-in JavaFX virtual keyboard on a "desktop" environment.
演示在“桌面”环境中使用内置 JavaFX 虚拟键盘的示例代码。
import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.control.TextField;
import javafx.scene.layout.StackPane;
import javafx.stage.Stage;
public class EmbeddedSample extends Application {
@Override public void start(Stage stage) {
stage.setScene(new Scene(new StackPane(new TextField("xyzzy")), 200, 100));
stage.getScene().setOnMouseClicked(e -> stage.hide());
stage.show();
}
public static void main(String[] args) { launch(args); }
}
Run the sample code like this:
像这样运行示例代码：
java -Dcom.sun.javafx.virtualKeyboard=javafx -Dcom.sun.javafx.touch=true EmbeddedSample
Sample Virtual Keyboard Code for Resizing Based on Font Size
基于字体大小调整大小的示例虚拟键盘代码
keyboard.css
键盘.css
.key {
-fx-base: antiquewhite;
}
.key-row {
-fx-spacing: 0.333333em;
}
.keyboard {
-fx-spacing: 0.333333em;
-fx-padding: 0.333333em;
-fx-font-family: monospace;
}
ResizableKeyboardSample.java
ResizableKeyboardSample.java
import javafx.application.Application;
import javafx.beans.property.*;
import javafx.geometry.*;
import javafx.scene.Node;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.*;
import javafx.scene.text.Font;
import javafx.stage.Stage;
public class ResizableKeyboardSample extends Application {
public static void main(String[] args) throws Exception {
launch(args);
}
String[] chars = {
"qwertyuiop",
"asdfghjkl",
"zxcvbnm"
};
public void start(final Stage stage) throws Exception {
Keyboard keyboard = new Keyboard();
VBox layout = new VBox(20);
layout.setPadding(new Insets(10));
layout.getChildren().setAll(
createControls(keyboard),
keyboard
);
Scene scene = new Scene(layout, 1000, 400);
scene.getStylesheets().add(
getClass().getResource(
"keyboard.css"
).toExternalForm()
);
stage.setScene(scene);
stage.show();
}
private Node createControls(Keyboard keyboard) {
Slider fontSize = new Slider(8, 40, Font.getDefault().getSize());
keyboard.fontSizeProperty().bind(fontSize.valueProperty());
fontSize.setShowTickLabels(true);
fontSize.setShowTickMarks(true);
fontSize.setMajorTickUnit(2);
fontSize.setMinorTickCount(0);
Label typedData = new Label();
keyboard.lastKeyTextProperty().addListener((observable, oldText, newText) ->
typedData.setText(typedData.getText() + newText)
);
VBox layout = new VBox(10);
layout.getChildren().setAll(
new Label("Keyboard Size"),
fontSize,
typedData
);
layout.setMinSize(VBox.USE_PREF_SIZE, VBox.USE_PREF_SIZE);
return layout;
}
class Keyboard extends VBox {
private DoubleProperty fontSize = new SimpleDoubleProperty(Font.getDefault().getSize());
public double getFontSize() {
return fontSize.get();
}
public DoubleProperty fontSizeProperty() {
return fontSize;
}
public void setFontSize(double fontSize) {
this.fontSize.set(fontSize);
}
private ReadOnlyStringWrapper lastKeyText = new ReadOnlyStringWrapper();
public String getLastKeyText() {
return lastKeyText.get();
}
public ReadOnlyStringProperty lastKeyTextProperty() {
return lastKeyText.getReadOnlyProperty();
}
public Keyboard() {
setAlignment(Pos.BOTTOM_CENTER);
setMinSize(VBox.USE_PREF_SIZE, VBox.USE_PREF_SIZE);
getStyleClass().add("keyboard");
onFontSizeChange(fontSize.getValue());
fontSize.addListener((observable, oldValue, newValue) ->
onFontSizeChange(newValue)
);
for (String row: chars) {
HBox keyRow = new HBox();
keyRow.getStyleClass().add("key-row");
keyRow.setAlignment(Pos.CENTER);
for (char c: row.toCharArray()) {
KeyButton key = new KeyButton(Character.toString(c));
keyRow.getChildren().add(key);
}
getChildren().add(keyRow);
}
}
private void onFontSizeChange(Number newValue) {
setStyle("-fx-font-size: " + newValue + "px;");
}
class KeyButton extends Button {
public KeyButton(String text) {
super(text);
getStyleClass().add("key");
setMinSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE);
setMaxSize(Button.USE_PREF_SIZE, Button.USE_PREF_SIZE);
setOnAction(event -> lastKeyText.set(text));
}
}
}
}
