javafx 图片作按钮,JavaFX - 使用图像创建自定义按钮

最新推荐文章于 2021-02-09 16:32:13 发布

羊男的迷宫

最新推荐文章于 2021-02-09 16:32:13 发布

阅读量484

点赞数

文章标签： javafx 图片作按钮

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.

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.

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');

}

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');

}

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.

And some sample code:

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();

}

Some advantages of doing this are:

You get the default toggle button behavior and don't have to re-implement it yourself by adding your own focus styling, mouse and key handlers etc.

If your app gets ported to different platform such as a mobile device, it will work out of the box responding to touch events rather than mouse events, etc.

Your styling is separated from your application logic so it is easier to restyle your application.

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)

);