Hybrydowy suwak z paskiem postępu JavaFX

Question

Chcę obsłużyć kliknięcie ProgressBar jak na suwaku. i nauczyć się procentu śladów. Zamiast suwaka używałbym suwaka zamiast paska postępu, ale nie ma podświetlonej ścieżki.

Potrzebuję stworzyć coś na kształt postępu w odtwarzaczu muzyki do odtwarzania piosenki i możliwość wyszukiwania z kliknięciem postępu.

Czy ktoś ma wskazówki, jak mogę to zrobić?

Answer 1

Oto inne podejście. Prawdziwa hybryda suwaka i paska postępu :). Poznaj SlidoProgressBar!

public class SlidoProgressBarDemo extends Application { 

    @Override 
    public void start(Stage stage) { 
     Group root = new Group(); 
     Scene scene = new Scene(root); 
     scene.getStylesheets().add(this.getClass().getResource("style.css").toExternalForm()); 
     stage.setScene(scene); 
     stage.setTitle("Progress Controls"); 

     double sliderWidth = 200; 

     final Slider slider = new Slider(); 
     slider.setMin(0); 
     slider.setMax(50); 
     slider.setMinWidth(sliderWidth); 
     slider.setMaxWidth(sliderWidth); 

     final ProgressBar pb = new ProgressBar(0); 
     pb.setMinWidth(sliderWidth); 
     pb.setMaxWidth(sliderWidth); 

     final ProgressIndicator pi = new ProgressIndicator(0); 

     slider.valueProperty().addListener(new ChangeListener<Number>() { 
      public void changed(ObservableValue<? extends Number> ov, 
        Number old_val, Number new_val) { 
       pb.setProgress(new_val.doubleValue()/50); 
       pi.setProgress(new_val.doubleValue()/50); 
      } 
     }); 

     StackPane pane = new StackPane(); 

     pane.getChildren().addAll(pb, slider); 

     final HBox hb = new HBox(); 
     hb.setSpacing(5); 
     hb.setAlignment(Pos.CENTER); 
     hb.getChildren().addAll(pane, pi); 

     scene.setRoot(hb); 
     stage.show(); 
    } 

    public static void main(String[] args) { 
     launch(args); 
    } 
} 

z style.css:

.slider .track { 
    -fx-background-color:null; /* Hide the track */ 
    -fx-background-insets: 1 0 -1 0, 0, 1; 
    -fx-background-radius: 2.5, 2.5, 1.5; 
    -fx-padding: 0.208333em; /* 2.5 */ 
} 

Podstawowa logika jest umieścić suwak i postęp w stackpane. Daj im tę samą szerokość. Zwiąż wartości postępu z nich. Ukryj ścieżkę suwaka.
wyjściowa:

Answer 2

I rozwiązać ten problem z kodem:

progress.setOnMouseClicked(new EventHandler<MouseEvent>() { 
     @Override 
     public void handle(MouseEvent event) { 
      if (event.getButton() == MouseButton.PRIMARY){ 
       Bounds b1 = progress.getLayoutBounds(); 
       double mouseX = event.getSceneX(); 
       double percent = (((b1.getMinX() + mouseX) * 100)/b1.getMaxX()); 
       //correcting a percent, i don't know when it need 
       percent -= 2; 
       progress.setProgress((percent)/100); 
       //do something with progress in percent 
      } 
     } 
    });