質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.46%
JavaFX

JavaFXとは、Java仮想マシン上で動作するリッチインターネットアプリケーション (RIA) のGUIライブラリです。Swingとは異なり、FXMLと呼ばれる XMLとCSSを併用してデザインを記述します。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

Q&A

解決済

1回答

2353閲覧

JAVAFX progressbarの背景色を透明にしたい

退会済みユーザー

退会済みユーザー

総合スコア0

JavaFX

JavaFXとは、Java仮想マシン上で動作するリッチインターネットアプリケーション (RIA) のGUIライブラリです。Swingとは異なり、FXMLと呼ばれる XMLとCSSを併用してデザインを記述します。

Eclipse

Eclipseは、IBM社で開発された統合開発環境のひとつです。2001年11月にオープンソース化されました。 たくさんのプラグインがあり自由に機能を追加をすることができるため、開発ツールにおける共通プラットフォームとして位置づけられています。 Eclipse自体は、Javaで実装されています。

0グッド

0クリップ

投稿2020/10/21 08:14

編集2020/10/21 08:20

前提・実現したいこと

scenebuilderで2つのプログレスバーを重ねて、棒グラフのようにしたいです。
![イメージ説明]
青のプログレスバーの下に、赤のプログレスバーを置きたいのですが、
青のプログレスバーの背景?を透明にする方法がわかりません。
何か方法はありますか?

この中には進捗率が入っていて、赤には青+赤の割合があり、透かさせて差を出そうと思っています。
それらの内訳を2色に分けて表したいのですがこの方法しか思いつきませんでした。

試したこと

progressbar.setStyle("-fx-background-color: transparent")
↑ だめでした

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

JavaFXは詳しくないので頓珍漢なことをしているかもしれません。

java - How can I style the ProgressBar component in JavaFX - Stack Overflow

ProgressBarの中のTrackの背景を変える必要があるようです。
もともとはグラデーション等で凝った色になっています。
ちゃんとやる方法もありそうですが、面倒なのでtransparentにしてしまいます。
transparentにすると枠ももろもろ透明になってしまうので、 通常のProgressBarをダミーで一番下に置きました^^; 一番下になるのを普通のにします。

xml:sample.fxml

1<?xml version="1.0" encoding="UTF-8"?> 2 3<?import javafx.scene.control.ProgressBar?> 4<?import javafx.scene.layout.Pane?> 5 6<Pane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" 7 prefWidth="600.0" stylesheets="@sample.css" xmlns="http://javafx.com/javafx/11.0.1" 8 xmlns:fx="http://javafx.com/fxml/1"> 9 <children> 10 <ProgressBar layoutX="14.0" layoutY="14.0" prefWidth="200.0" progress="0.8" 11 style="-fx-accent: red;"/> 12 <ProgressBar layoutX="14.0" layoutY="14.0" prefWidth="200.0" progress="0.5" 13 styleClass="transparent-progress-bar"/> 14 </children> 15</Pane>

css:sample.css

1.transparent-progress-bar > .track { 2 -fx-background-color: transparent; 3}

アプリ画像

投稿2020/10/21 16:02

編集2022/09/17 11:59
TN8001

総合スコア9396

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2020/10/22 00:18

ご回答ありがとうございます! 早速試しました・・・こんなに簡単に実現できるとは思いませんでした(´;ω;`) 本当にいつもありがとうございます・・・!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.46%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問