Создание кнопки JavaFX 2 с использованием только FXML - Как добавить изображение к кнопке?

Я хочу изменить стиль кнопки, большинство потоков здесь, а статьи в Интернете показывают, как это сделать, используя Java-код, который я не вижу в этом действительно хорошим решением, есть ли способ например, чтобы установить кнопку с некоторым текстом и изображением внутри всего, используя только FXML (без Css)?

Ответы

Ответ 1

Решение, использующее только fxml

Как указывает тарсала, 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&#10;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 для Labeled.

Подробное описание атрибутов приведено в справочном руководстве 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&#10;Potion">
  <font>
    <Font size="20.0" />
  </font>
</Button>

Похожие решения для добавления изображений к кнопкам с использованием только кода Java

Ответ 2

FXML используется только для проектирования макета, для стилизации вы можете использовать css и ссылаться на него из вашего файла FXML:

 <stylesheets>
    <URL value="@main.css" />
  </stylesheets>

Чтобы добавить изображение к кнопке fx:id="btn" в css:

#btn {          
    -fx-background-image: url("Add.png");
    -fx-background-size: 18 18;
    -fx-background-repeat: no-repeat;
    -fx-background-position:left;   
}

Этот репозиторий Github предоставляет полный пример работы:

Ответ 3

Несколько изменений, внесенных мной в пример css (ссылка #btn {в комментарии # 3):

-fx-background-size: 100% 100%;
-fx-background-color: transparent;

Это удалило контур кнопки и оставило только изображение. Я смог изменить размер селектора кнопок в Scene Builder как ImageView и увидеть изменение изображения в реальном времени. Я добавил подсказку для объяснения изображения, так как не было текста и контуры кнопок. Я планирую использовать методы, описанные в другом месте, и изменять изображение при нажатии, чтобы дать больше визуальной обратной связи, что изображение является кнопкой.

Также обратите внимание: мне нужно было указать идентификатор кнопки в "CSS Id" ( "Сценарий" ) вместо "fx: id", чтобы связать их.

Добавление этих изменений к тому, что было объяснено выше, позволило мне выполнить мою цель: иметь кнопку, которая выглядит только как изображение (например, круглую форму в квадратной кнопке).