2013-01-04 12 views
6

Ich möchte behandeln klicken auf ProgressBar wie auf Slider. und lerne ein Prozent der Strecke. Ich würde Schieberegler statt Fortschrittsbalken verwenden, aber es hat keine markierte Spur bis zum Daumen.Hybrid von Slider mit Fortschrittsbalken JavaFX

Ich brauche etwas wie ein Fortschritt in einem Musik-Player zum Abspielen von Songs, und die Möglichkeit, mit einem Klick auf den Fortschritt zu suchen.

Hat jemand eine Tipps wie kann ich es tun?

+0

[Was Sie versucht haben?] (Http://mattgemmell.com/2008/12/08/what-have-you-tried/) –

+0

Ich habe versucht, eine Anpassung mit CSS zu finden . Aber Google hat nichts gegeben. Die Dokumentation hat keine CSS-Referenzen für die Substruktur wie einen Daumen und eine Spur. – Vetalll

Antwort

16

hier ein anderer Ansatz. Echtes Hybrid von Slider und Fortschrittsbalken :). Treffen Sie 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); 
    } 
} 

mit 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 */ 
} 

Die grundlegende Logik ist Schieber und Fortschritt in stackpane zu setzen. Gib ihnen die gleiche Breite. Binden Sie die Fortschrittswerte von ihnen. Verberge die Spur des Sliders.
Ausgang:
enter image description here

+0

Haha, ich habe darüber nachgedacht. aber ich denke, es wird mit zufälligen chancen funktionieren. Woher weißt du, wo du klickst? auf Slider oder Pb? – Vetalll

+0

@Vetal.Lebed. Stackpane legt seine Kinder überlappend aneinander, sodass das zuletzt hinzugefügte Kind an der Spitze der anderen liegt. Es ist also immer der Schieberegler (und seine unsichtbare Spur), der den Mausklick erhält. Außerdem kann der Fortschrittsbalken standardmäßig nicht angeklickt werden. –

+0

Danke, ich wusste es nicht. Ich bin ein Android-Entwickler. – Vetalll

1

ich dieses Problem mit dem Code gelöst:

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 
      } 
     } 
    });