web-dev-qa-db-ja.com

JavaFX ProgressBar：バーの色を変更する方法は？

ProgressBarのバーの色を次のように変更しようとしています

pBar.setStyle("-fx-accent: green");

しかし、私は問題に遭遇しました：それは私にとって正しく機能していないようです！ （または私は何かを理解していません）

コードは次のとおりです。

public class JavaFXApplication36 extends Application {

@Override
public void start(Stage primaryStage) {
AnchorPane root = new AnchorPane();
ProgressBar pbRed = new ProgressBar(0.4);
ProgressBar pbGreen = new ProgressBar(0.6);
pbRed.setLayoutY(10);
pbGreen.setLayoutY(30);

pbRed.setStyle("-fx-accent: red;");       // line (1)
pbGreen.setStyle("-fx-accent: green;");   // line (2)

root.getChildren().addAll(pbRed, pbGreen);
Scene scene = new Scene(root, 150, 50);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
}

私はいつもそれで2つの赤いプログレスバーを手に入れます！ （1）行のコードは、インスタンスではなく、ProgressBarクラスのスタイルを変更しているようです。

もう1つの奇妙な瞬間は、行（1）を削除しても、2つの緑色のプログレスバーが表示されないことです。ですから、（2）行はまったく役に立たないことがわかります!!なぜ？！それは間違いなく奇妙になっています。

個別の進行状況バーに個別の色を設定する方法はありますか？

colorsprogress-barjavafx-2
13
Chechulin

複数のプログレスバーを含む単純なアニメーション化されていない例を追加するように回答が更新されました

あなたの質問のコードは2つの異なる色のプログレスバーを表示するはずですが、そうではないという事実はJavaFXcss処理システムのバグです。ランタイムプロジェクトに対するバグをここに記録します： http://javafx-jira.kenai.com 。

回避策として、プログレスバーでsetStyleを呼び出す代わりに、スタイルシート内のプログレスバーの色付けに使用するアクセントカラーを定義し、プログレスバーにスタイルクラスを追加します。次に、同じアプリケーション内に、すべて異なる色の複数のプログレスバーを作成できます。

Ulukが指摘しているように、 JavaFX 2.2 caspian.css を JavaFX 2 cssリファレンスガイド および JavaFX 2 cssチュートリアル と組み合わせて使用​​できます。物事のスタイルを決める方法を決定します。

これらのリファレンスの情報に基づいてプログレスバーをカスタマイズするサンプルコードを次に示します。

サンプルcss：

/** progress.css
    place in same directory as 
    ColoredProgressBarStyleSheet.Java or SimpleColoredProgressBar.Java
    ensure build system copies the css file to the build output path */

.root { -fx-background-color: cornsilk; -fx-padding: 15; }

.progress-bar { -fx-box-border: goldenrod; }

.green-bar  { -fx-accent: green;  }
.yellow-bar { -fx-accent: yellow; }
.orange-bar { -fx-accent: orange; }
.red-bar    { -fx-accent: red;    }

簡単なサンプルプログラム：

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.ProgressBar;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

// shows multiple progress bars drawn in different colors.
public class SimpleColoredProgressBar extends Application {
     public static void main(String[] args) { launch(args); }

     @Override public void start(Stage stage) {
         final VBox layout = new VBox(10);
         layout.setAlignment(Pos.CENTER);
         layout.getChildren().setAll(
             new ColoredProgressBar("red-bar",    0.2),
             new ColoredProgressBar("orange-bar", 0.4),
             new ColoredProgressBar("yellow-bar", 0.6),
             new ColoredProgressBar("green-bar",  0.8)
         );
         layout.getStylesheets().add(getClass().getResource("progress.css").toExternalForm());
         stage.setScene(new Scene(layout));
         stage.show();
    }

    class ColoredProgressBar extends ProgressBar {
        ColoredProgressBar(String styleClass, double progress) {
            super(progress);
            getStyleClass().add(styleClass);
        }
    }
}

簡単なサンプルプログラム出力：

coloredbars

進行状況に応じて色が動的に変化する単一のアニメーションプログレスバーを備えた、より複雑なサンプルプログラム：

import javafx.animation.*;
import javafx.application.Application;
import javafx.beans.value.*;
import javafx.event.*;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.control.*;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;
import javafx.util.Duration;

// shows a progress bar whose bar changes color depending on the amount of progress.
public class ColoredProgressBarStyleSheet extends Application {
  public static void main(String[] args) { launch(args); }

  private static final String RED_BAR    = "red-bar";
  private static final String YELLOW_BAR = "yellow-bar";
  private static final String ORANGE_BAR = "orange-bar";
  private static final String GREEN_BAR  = "green-bar";
  private static final String[] barColorStyleClasses = { RED_BAR, ORANGE_BAR, YELLOW_BAR, GREEN_BAR };

  @Override public void start(Stage stage) {
    final ProgressBar bar = new ProgressBar();

    final Timeline timeline = new Timeline(
      new KeyFrame(Duration.millis(0),    new KeyValue(bar.progressProperty(), 0)),
      new KeyFrame(Duration.millis(3000), new KeyValue(bar.progressProperty(), 1))
    );

    Button reset = new Button("Reset");
    reset.setOnAction(new EventHandler<ActionEvent>() {
      @Override public void handle(ActionEvent event) {
        timeline.playFromStart();
      }
    });

    bar.progressProperty().addListener(new ChangeListener<Number>() {
      @Override public void changed(ObservableValue<? extends Number> observable, Number oldValue, Number newValue) {
        double progress = newValue == null ? 0 : newValue.doubleValue();
        if (progress < 0.2) {
          setBarStyleClass(bar, RED_BAR);
        } else if (progress < 0.4) {
          setBarStyleClass(bar, ORANGE_BAR);
        } else if (progress < 0.6) {
          setBarStyleClass(bar, YELLOW_BAR);
        } else {
          setBarStyleClass(bar, GREEN_BAR);
        }
      }

      private void setBarStyleClass(ProgressBar bar, String barStyleClass) {
        bar.getStyleClass().removeAll(barColorStyleClasses);
        bar.getStyleClass().add(barStyleClass);
      }
    });    

    final VBox layout = new VBox(10);
    layout.setAlignment(Pos.CENTER);
    layout.getChildren().setAll(bar, reset);
    layout.getStylesheets().add(getClass().getResource("progress.css").toExternalForm());
    stage.setScene(new Scene(layout));
    stage.show();

    timeline.play();
  }    
}

より複雑なサンプルプログラム出力：

sample program output

21
jewelsea

JavaFX CSSセレクターを使用してスタイルをオーバーライド（またはカスタマイズ）する必要があります。詳細については、caspian.cssを参照してください。独自のスタイルシートで次のように定義します。

.progress-bar .bar {
    -fx-background-color:
        -fx-box-border,
        linear-gradient(to bottom, derive(-fx-accent,95%), derive(-fx-accent,10%)),
        red; /* this line is the background color of the bar */
    -fx-background-insets: 0, 1, 2;
    -fx-padding: 0.416667em; /* 5 */
}
4
Uluk Biy