Укладка кнопки JavaFX 2 с использованием только FXML - как добавить изображение к кнопке?
Я хочу изменить стиль кнопки, большинство потоков здесь и статьи в интернете показывают, как это сделать с помощью Java-кода, который я не вижу в качестве реального хорошего решения, есть ли способ, например, установить кнопку с некоторым текстом и изображением внутри него, используя только FXML (без Css) ?
3 ответов
решение с использованием только fxml
как указывает tarrsalah, css-рекомендуемый способ сделать это, хотя вы также можете сделать это в fxml, если хотите:
<?import java.lang.*?>
<?import java.util.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.image.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<?import javafx.scene.text.*?>
<AnchorPane id="AnchorPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns:fx="http://javafx.com/fxml">
<children>
<Button layoutX="104.0" layoutY="81.0" mnemonicParsing="false" text="Love Potion">
<font>
<Font size="30.0" />
</font>
<graphic>
<ImageView fitHeight="150.0" fitWidth="200.0" pickOnBounds="true" preserveRatio="true">
<image>
<Image url="http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png" />
</image>
</ImageView>
</graphic>
</Button>
</children>
</AnchorPane>
чтобы получить выше в SceneBuilder перетащите элемент ImageView
на Button
и он будет автоматически установлен в качестве графической кнопки. Выберите ImageView
и введите url-адрес изображения в поле изображения ImageView в свойствах SceneBuilder панель.
откройте вышеуказанный fxml в SceneBuilder, чтобы увидеть изображение ниже.
альтернативные атрибуты css
альтернативный css для -fx-background*
атрибуты.
-fx-graphic
-fx-padding
-fx-content-display
-fx-graphic-text-gap
они просто разные, не обязательно лучше того, что вы пытаетесь сделать. Это просто предпочтение вещь о том, что использовать. Я нахожу эти настройки проще в использовании, чем -fx-background*
настройки. Они более ограничительные, но синтаксис и параметры намного проще для меня понять, и их значения сопоставляются с API JavaDoc для с надписью.
подробное описание атрибутов находится в справочник по css.
вот пример со стилем, устанавливающим графику, встроенную в fxml, хотя всегда лучше отделить информация о стиле в отдельную таблицу стилей css, как в Примере tarrsalah.
<Button layoutX="138.0" layoutY="226.0" mnemonicParsing="false" style="-fx-graphic: url('http://icons.iconarchive.com/icons/mirella-gabriele/fantasy-mediaeval/128/Poison-red-icon.png')" text="Love Potion">
<font>
<Font size="20.0" />
</font>
</Button>
связанные решения для добавления изображений к кнопкам, используя только код Java
FXML-файл используется только для проектирования макета, для укладки вы можете использовать в CSS и справки от :
<stylesheets>
<URL value="@main.css" />
</stylesheets>
чтобы добавить изображение в в своем css
:
#btn {
-fx-background-image: url("Add.png");
-fx-background-size: 18 18;
-fx-background-repeat: no-repeat;
-fx-background-position:left;
}
этой репозиторий Github приведите полный пример выполнения:
несколько изменений, которые я сделал в Примере css (ref. #btn { в комментарии #3):
-fx-background-size: 100% 100%;
-fx-background-color: transparent;
это удалило контур кнопки и оставило только изображение. Я смог изменить размер селектора кнопок в Построителе сцен, как ImageView, и увидеть изменение изображения в реальном времени. Я добавил подсказку, чтобы объяснить изображение, так как не было текста и контура кнопки. Я планирую использовать методы, объясненные в другом месте, и изменить изображение при нажатии, чтобы дать больше визуальной обратной связи, что изображение кнопка.
Также обратите внимание:мне нужно было указать идентификатор кнопки в "CSS Id" (Scene Builder) вместо "fx: id", чтобы связать их.
добавление этих изменений к тому, что было объяснено выше, позволило мне достичь моей цели: иметь кнопку, которая выглядит только как изображение (например, круглая форма в квадратной кнопке).