JavaFX - 使用图像创建自定义按钮

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (47)

我想创建一个自定义按钮,有两个状态按下或不按钮,如切换按钮。我有两个图像来做到这一点(按下而不是按下),所以我如何创建按钮并显示它与我的图像?该按钮必须取得图像的大小。 我没有使用FXML。感谢您的帮助。

提问于
用户回答回答于

有几种不同的方法来完成这一点,我会概述我的最爱。

使用切换按钮并将自定义样式应用于该切换按钮。我建议这样做是因为你需要的控件“像一个切换按钮”,但看起来与默认的切换按钮样式不同。

我的首选方法是在css中为按钮定义一个图形:

.toggle-button {
  -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png');
}

.toggle-button:selected {
  -fx-graphic: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png');
}

或者使用附加的CSS来定义背景图像。

// file imagetogglebutton.css deployed in the same package as ToggleButtonImage.class
.toggle-button {
  -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png');
  -fx-background-repeat: no-repeat;
  -fx-background-position: center;
}

.toggle-button:selected {
  -fx-background-image: url('http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png');
}

我更喜欢使用-fx-graphic规范而不是-fx-background- *规范,因为背景图片样式的规则非常棘手,并且设置背景不会自动将按钮大小设置为图片大小,而设置图片则会。

还有一些示例代码:

import javafx.application.Application;
import javafx.scene.*;
import javafx.scene.control.ToggleButton;
import javafx.scene.layout.StackPaneBuilder;
import javafx.stage.Stage;

public class ToggleButtonImage extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    final ToggleButton toggle = new ToggleButton();
    toggle.getStylesheets().add(this.getClass().getResource(
      "imagetogglebutton.css"
    ).toExternalForm());
    toggle.setMinSize(148, 148); toggle.setMaxSize(148, 148);
    stage.setScene(new Scene(
      StackPaneBuilder.create()
        .children(toggle)
        .style("-fx-padding:10; -fx-background-color: cornsilk;")
        .build()
    ));
    stage.show();
  }
}

这样做的一些优点是:

  1. 您将获得默认的切换按钮行为,不必通过添加自己的焦点样式,鼠标和键处理程序等来自行重新实现它。
  2. 如果你的应用程序被移植到不同的平台上,比如移动设备,那么它可以用来响应触摸事件而不是鼠标事件等。
  3. 您的样式与应用程序逻辑分离,因此更容易重新设置应用程序。

另一种方法是不使用css,仍然使用ToggleButton,但在代码中设置图像图形:

import javafx.application.Application;
import javafx.beans.binding.Bindings;
import javafx.scene.*;
import javafx.scene.control.ToggleButton;
import javafx.scene.image.*;
import javafx.scene.layout.StackPaneBuilder;
import javafx.stage.Stage;

public class ToggleButtonImageViaGraphic extends Application {
  public static void main(String[] args) throws Exception { launch(args); }
  @Override public void start(final Stage stage) throws Exception {
    final ToggleButton toggle      = new ToggleButton();
    final Image        unselected  = new Image(
      "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Pizza-icon.png"
    );
    final Image        selected    = new Image(
      "http://icons.iconarchive.com/icons/aha-soft/desktop-buffet/128/Piece-of-cake-icon.png"
    );
    final ImageView    toggleImage = new ImageView();
    toggle.setGraphic(toggleImage);
    toggleImage.imageProperty().bind(Bindings
      .when(toggle.selectedProperty())
        .then(selected)
        .otherwise(unselected)
    );

    stage.setScene(new Scene(
      StackPaneBuilder.create()
        .children(toggle)
        .style("-fx-padding:10; -fx-background-color: cornsilk;")
        .build()
    ));
    stage.show();
  }
}

基于代码的方法的优点是,如果你不喜欢使用css,就不必使用css。

为了获得最佳性能并且易于移植到未签名的applet和webstart沙箱,请将图像与您的应用程序捆绑在一起,并通过相对路径URL引用它们,而不是从网上下载它们。

用户回答回答于

你只需要创建自己的父类继承的类。放置一个ImageView,并在mousedown和鼠标事件上更改ImageView的图像。

public class ImageButton extends Parent {

    private static final Image NORMAL_IMAGE = ...;
    private static final Image PRESSED_IMAGE = ...;

    private final ImageView iv;

    public ImageButton() {
        this.iv = new ImageView(NORMAL_IMAGE);
        this.getChildren().add(this.iv);

        this.iv.setOnMousePressed(new EventHandler<MouseEvent>() {

            public void handle(MouseEvent evt) {
                iv.setImage(PRESSED_IMAGE);
            }

        });

        // TODO other event handlers like mouse up

    } 

}

扫码关注云+社区