JavaFX - 创建带有图像的自定义按钮 [英] JavaFX - create custom button with image

问题描述

我想创建一个自定义按钮，它有两个状态被按下或不按下，就像一个切换按钮.我有两个图像来执行此操作(按下和未按下)，那么我如何创建按钮并将其与我的图像一起显示?按钮必须采用图像的大小.
我没有使用 FXML.谢谢你的帮助.

I would like to create a custom button, that has two states pressed or not, like a toggle button. I have got two images to do this (pressed and not pressed), so how can i create the button and display it with my images ? The button must take the size of the image.
I am not using FXML. Thank you for helping.

推荐答案

有几种不同的方法可以实现这一点，我将概述我的最爱.

There are a few different ways to accomplish this, I'll outline my favourites.

使用 ToggleButton 并为其应用自定义样式.我建议这样做是因为您所需的控件就像一个切换按钮"，但看起来与默认的切换按钮样式不同.

Use a ToggleButton and apply a custom style to it. I suggest this because your required control is "like a toggle button" but just looks different from the default toggle button styling.

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

My preferred method is to define a graphic for the button in 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 定义背景图像.

OR use the attached css to define a background image.

// 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-* 规范，因为背景图像样式的规则很棘手，并且设置背景不会自动将按钮大小调整为图像，而设置图形则可以.

I prefer the -fx-graphic specification over the -fx-background-* specifications as the rules for styling background images are tricky and setting the background does not automatically size the button to the image, whereas setting the graphic does.

以及一些示例代码:

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，但在代码中设置图像图形:

An alternate is to not use css and still use a ToggleButton, but set the image graphic in code:

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，则不必使用它.

The code based approach has the advantage that you don't have to use css if you are unfamilar with it.

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

For best performance and ease of porting to unsigned applet and webstart sandboxes, bundle the images with your app and reference them by relative path urls rather than downloading them off the net.

这篇关于JavaFX - 创建带有图像的自定义按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！