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

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

23
fxml java javafx-2 netbeans scenebuilder

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&#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, чтобы увидеть изображение ниже.

lovepotion

альтернативные атрибуты 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&#10;Potion">
  <font>
    <Font size="20.0" />
  </font>
</Button>

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

37

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 приведите полный пример выполнения:

enter image description here

10

несколько изменений, которые я сделал в Примере css (ref. #btn { в комментарии #3):

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

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

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

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

3