it-swarm.com.de

JavaFX 2-Schaltfläche nur mit FXML formatieren - Wie füge ich einer Schaltfläche ein Bild hinzu?

Ich möchte das Design eines Buttons ändern, die meisten Threads hier und die Artikel im Internet zeigen, wie man es mit Java code macht, was ich nicht wirklich gut finde Lösung, gibt es eine Möglichkeit, zum Beispiel eine Schaltfläche mit etwas Text und einem Bild darin zu setzen, indem nur FXML verwendet wird (kein CSS)?

26
AymenDaoudi

Lösung nur mit fxml

Wie Tarrsalah hervorhebt, ist CSS der empfohlene Weg, dies zu tun, obwohl Sie es auch in fxml tun können, wenn Sie es vorziehen:

<?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>

Um dies in SceneBuilder zu erreichen, ziehen Sie ein ImageView über ein Button. Es wird automatisch als Grafik für die Schaltfläche festgelegt. Wählen Sie dann das ImageView und geben Sie die URL des Bildes in das Bildfeld von ImageView im Eigenschaftenfenster von SceneBuilder ein.

Öffnen Sie die obige Datei in SceneBuilder, um das Bild unten zu sehen.

lovepotion


Alternative CSS-Attribute

Alternatives CSS zu -fx-background* Attribute.

  • -fx-graphic
  • -fx-padding
  • -fx-content-display
  • -fx-graphic-text-gap

Diese sind einfach anders, nicht unbedingt besser für das, was Sie versuchen, zu tun. Es ist nur eine Präferenzsache, welche zu verwenden ist. Ich finde diese Einstellungen einfacher zu verwenden als die -fx-background* die Einstellungen. Sie sind restriktiver, aber die Syntax und die Optionen sind für mich viel einfacher zu verstehen und ihre Bedeutung entspricht der JavaDoc-API für Labeled .

Eine ausführliche Beschreibung der Attribute finden Sie im CSS-Referenzhandbuch .

Hier ist ein Beispiel mit einem Stil, in dem die Grafik in der fxml eingebettet ist. Es ist jedoch immer besser, die Stilinformationen wie im Beispiel von tarrsalah in ein separates CSS-Stylesheet aufzuteilen.

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

Verwandte Lösungen zum Hinzufügen von Bildern zu Schaltflächen nur mit Java code

47
jewelsea

FXML wird nur zum Entwerfen des Layouts verwendet. Zum Stylen können Sie css verwenden und es aus Ihrem FXML referenzieren. Datei :

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

So fügen Sie einer Schaltfläche fx:id="btn" In Ihrem css ein Bild hinzu:

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

Dieses Github-Repository liefert ein vollständiges Beispiel:

enter image description here

10
tarrsalah

Ein paar Änderungen, die ich am CSS-Beispiel vorgenommen habe (Ref. #Btn {in Kommentar # 3):

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

Dies entfernte den Schaltflächenumriss und ließ nur das Bild übrig. Ich konnte die Größe der Schaltflächenauswahl im Szenen-Generator wie in einer Bildansicht ändern und die Bildänderung in Echtzeit sehen. Ich habe einen ToolTip hinzugefügt, um das Bild zu erklären, da es keinen Text und keine Schaltflächenkontur gab. Ich habe vor, Techniken zu verwenden, die an anderer Stelle erläutert werden, und das Bild zu ändern, wenn Sie darauf klicken, um mehr visuelles Feedback zu geben, dass es sich bei dem Bild um eine Schaltfläche handelt.

Beachten Sie auch: Ich musste die Schaltflächen-ID in der 'CSS-ID' (Scene Builder) anstelle der 'fx: id' angeben, damit sie verknüpft werden.

Das Hinzufügen dieser Änderungen zu dem, was oben erklärt wurde, ermöglichte es mir, mein Ziel zu erreichen: eine Schaltfläche, die nur wie das Bild aussieht (z. B. runde Form in quadratischer Schaltfläche).

3
Vision9000