web-dev-qa-db-ja.com

FXMLのみを使用してJavaFX 2ボタンのスタイルを設定する-ボタンに画像を追加する方法

ボタンのスタイルを変更したいのですが、ここのスレッドのほとんどとインターネット上の記事では、Javaコードを使用してそれを行う方法を示しています。解決策は、たとえば、FXMLのみを使用して（Cssなし）すべてのテキストと画像を含むボタンを設定する方法はありますか？

javanetbeansjavafx-2fxmlscenebuilder
26
AymenDaoudi

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を選択し、SceneBuilderプロパティペインのImageViewの画像フィールドに画像のURLを入力します。

SceneBuilderで上記のfxmlを開き、以下の画像を表示します。

lovepotion

代替のCSS属性

-fx-background*属性の代替css。

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

これらは異なるだけで、あなたがやろうとしていることに対して必ずしも良いとは限りません。どちらを使用するかは、好みの設定です。これらの設定は、-fx-background*設定よりも使いやすいと思います。それらはより制限的ですが、構文とオプションは理解しやすく、その意味は Labeled のJavaDoc APIにマップされます。

属性の詳細な説明は cssリファレンスガイド にあります。

これは、fxmlに埋め込まれたグラフィックを設定するスタイルの例です。ただし、tarrsalahのサンプルのように、スタイル情報を個別のcssスタイルシートに分離することを常にお勧めします。

<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 codeのみを使用してボタンに画像を追加するための関連ソリューション

47
jewelsea

[〜＃〜] fxml [〜＃〜] はレイアウトの設計にのみ使用され、スタイリングには css を使用し、FXMLから参照できます。ファイル：

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

cssのfx:id="btn"ボタンに画像を追加するには：

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

Cssの例に対して行ったいくつかの変更（コメント＃3の#btn {を参照）：

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

これにより、ボタンのアウトラインが削除され、画像のみが残りました。 ImageViewのようにScene Builderのボタンセレクターのサイズを変更し、リアルタイムで画像が変化するのを見ることができました。テキストもボタンのアウトラインもないため、画像を説明するツールチップを追加しました。他の場所で説明されている手法を使用し、クリックされたときに画像を変更して、画像がボタンであるという視覚的なフィードバックを提供する予定です。

また、リンクするには、「fx：id」ではなく「CSS Id」（Scene Builder）でボタンIDを指定する必要があります。

これらの変更を上記で説明したものに追加することで、目標を達成することができました。画像のように見えるボタン（四角いボタンの丸い形など）を持っています。

3
Vision9000