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-background- *更喜欢-fx-graphic规范样式背景图像的规则规则很棘手，设置背景不会自动调整按钮的大小，而设置图形的确如此。

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.

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

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屋！