2013-01-04 13 views
6

Voglio gestire il clic su ProgressBar come sul cursore. e impara una percentuale di traccia. Vorrei usare il cursore invece della barra di avanzamento ma non ha una traccia evidenziata fino al pollice.Ibrido di slider con barra di avanzamento JavaFX

Ho bisogno di creare qualcosa come un progresso in un lettore musicale di suonare la canzone e la possibilità di cercare con un clic sul progresso.

Qualcuno ha un consiglio come posso farlo?

+0

[Che cosa hai provato?] (Http://mattgemmell.com/2008/12/08/what-have-you-tried/) –

+0

ho cercato di trovare una personalizzazione con i CSS . Ma google non ha dato niente. La documentazione non ha riferimenti css per sottostruttura come un pollice e una traccia. – Vetalll

risposta

16

Ecco un altro approccio. Real ibrido di slider e barra di avanzamento :). Scopri 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); 
    } 
} 

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

La logica di base è di mettere slider e progressi in stackpane. Dagli la stessa larghezza. Lega i valori di avanzamento di essi. Nascondi la traccia del cursore.
uscita:
enter image description here

+0

Haha, ci ho pensato. ma penso che funzionerà con casualità. Come sai dove clicchi? su slider o pb? – Vetalll

+0

@ Vetal.lebed. Stackpane mette i suoi figli sovrapposti l'un l'altro in modo che l'ultimo bambino aggiunto sia in cima agli altri. Quindi è sempre il cursore (e la sua traccia invisibile) che ottiene il clic del mouse. Inoltre la barra di avanzamento non è selezionabile per impostazione predefinita. –

+0

Grazie, non lo sapevo. Sono uno sviluppatore Android. – Vetalll

1

Ho risolto questo problema con il codice:

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