Come creare un pulsante javafx con una forma circolare di diametro 3xp?

Question

Voglio creare un pulsante rotondo MOLTO piccolo senza testo. Ecco come ho provato.

Button bt = new Button(); 
bt.setShape(new Circle(1.5)); 
bt.setMaxSize(3,3); 

Tuttavia, ci sono due problemi:
1. forma del pulsante non è perfettamente rotonda, ma più come un ovale.
2. Lo bt.setMaxSize(1.5,1.5); non ha effetto. Come immagino, il suo diametro è superiore a 3 ...
Come posso creare un pulsante più piccolo rotondo? Aiuto apprezzato.

Answer 1

Aggiornamento: su una stretta revisione del tasto risultante, impostare la forma come nella risposta di José sembra funzionare meglio su molto piccoli pulsanti che impostare la -fx-background-radius come usato in questa risposta, (il pulsante risultante sembra un po 'più circolare quando la forma è impostata). Quindi la soluzione qui è probabilmente la scelta migliore per i pulsanti più grandi (ad esempio 10px o più), mentre l'impostazione della forma è probabilmente la migliore per un pulsante estremamente piccolo di 3px (è comunque una differenza piuttosto sottile).

---

3px è un piccolo pulsante molto. Non sono sicuro di come ti aspetti che le persone facciano clic su di esso.

Puoi farlo usando CSS.

Ecco un pulsante rotondo di dimensioni 30px:

E la tua richiesta pulsante dimensioni 3px:

L'arrotondamento si ottiene impostando un valore elevato per -fx-background-radius.

Le schermate sono state scattate su un mac retina, quindi sono due volte le dimensioni dell'originale.

import javafx.application.Application; 
import javafx.geometry.Insets; 
import javafx.scene.Scene; 
import javafx.scene.control.Button; 
import javafx.scene.layout.StackPane; 
import javafx.stage.Stage; 

public class Rounding extends Application { 

    @Override 
    public void start(Stage stage) throws Exception { 
     Button roundButton = new Button(); 

     roundButton.setStyle(
       "-fx-background-radius: 5em; " + 
       "-fx-min-width: 3px; " + 
       "-fx-min-height: 3px; " + 
       "-fx-max-width: 3px; " + 
       "-fx-max-height: 3px;" 
     ); 

     StackPane layout = new StackPane(
       roundButton 
     ); 
     layout.setPadding(new Insets(10)); 
     stage.setScene(new Scene(layout)); 

     stage.show(); 
    } 

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

Si noti che viene eseguito il rendering di un pulsante con livelli di sfondo. Lo strato interno è il pulsante effettivo e al di fuori di esso c'è un anello di messa a fuoco e un leggero bagliore. Quindi insieme potrebbe essere leggermente più grande di 3px. Se si desidera ottenere esattamente 3px, è necessario eliminare gli inserimenti dello sfondo attivo. Qualcosa come di seguito:

roundButton.setStyle(
     "-fx-background-radius: 5em; " + 
     "-fx-min-width: 3px; " + 
     "-fx-min-height: 3px; " + 
     "-fx-max-width: 3px; " + 
     "-fx-max-height: 3px; " + 
     "-fx-background-color: -fx-body-color;" + 
     "-fx-background-insets: 0px; " + 
     "-fx-padding: 0px;" 
); 

Gli stili inline sono solo utilizzati qui per consentire il campione per essere piccolo e autonomo. In un'applicazione reale, inseriresti gli stili in un foglio di stile.

L'idea di utilizzare uno -fx-background-radius per arrotondare il pulsante deriva dall'implementazione dei pulsanti di opzione arrotondati nel foglio di stile modena.css predefinito JavaFX. Puoi trovare il foglio di stile guardando all'interno del file jfxrt.jar che include codice e risorse JavaFX.

A titolo di confronto, qui è l'immagine di un pulsante creato utilizzando la soluzione di forma del cerchio come nella risposta di José:

perché ancora bisogno di messa a punto minSize() .....

Poiché JavaFX sta tentando di fornire valori predefiniti ragionevoli. Se non esistevano dimensioni minime predefinite per un pulsante vuoto, quando si ridimensionava la scena, alcuni dei pulsanti scomparivano e l'utente non sarebbe in grado di fare clic su di essi, il che sarebbe un'esperienza utente molto negativa. Pertanto, la dimensione minima predefinita è circa 1em, più qualche padding (ad esempio solo più grande di un carattere), anche se non è impostato alcun testo sul pulsante. Tuttavia, è solo un set predefinito dal sistema Java in quanto non può sapere esattamente cosa vuole la tua app. Quando i valori predefiniti non funzionano per la tua situazione, sostituiscili o fornisci ulteriori suggerimenti, ad esempio impostando esplicitamente la dimensione minima del controllo.

Cosa significa "5em"?

Vedere il JavaFX 8 css reference guide:

em: il 'font-size' del carattere rilevante

Così 5em significa 5 volte la dimensione del carattere. La maggior parte delle dimensioni per i controlli nel foglio di stile JavaFX predefinito viene specificata utilizzando le unità em. In questo modo quando modifichi il tipo di carattere o la dimensione del carattere, l'interfaccia utente viene ridimensionata con grazia per adattarsi al carattere più grande o più piccolo. In questo caso particolare la scelta di 5em era abbastanza arbitraria, volevo solo un valore elevato in modo che il pulsante fosse completamente rotondo, altrimenti lo -fx-background-radius creerebbe un rettangolo con angoli arrotondati, piuttosto che un cerchio completo. Assicurandosi che le dimensioni del raggio passate a -fx-background-radius superino la metà della dimensione del controllo, il controllo assume un aspetto circolare.

So che questo è un po 'confuso e non intuitivo. Ho appena copiato il concetto dal foglio di stile JavaFX predefinito con l'idea che, non importa quanto possa essere confuso, è probabilmente la migliore pratica per ottenere questi tipi di effetti o non verrebbe utilizzata nel foglio di stile predefinito.

Principalmente il vantaggio che posso vedere di un simile approccio è che non è richiesto alcun codice, tutto lo styling può essere fatto direttamente in CSS (in modo da poter cambiare l'aspetto senza modificare il codice Java) e se lo si desidera, è possibile specificare coordina in unità em, in modo che il controllo si riduca con le dimensioni del carattere. Quindi c'è qualche ragione dietro l'apparente follia.

Answer 2

Hai solo bisogno di impostare anche la dimensione minima. Questo farà:

double r=1.5; 
btn.setShape(new Circle(r)); 
btn.setMinSize(2*r, 2*r); 
btn.setMaxSize(2*r, 2*r); 

E vi darà un pulsante rotondo e molto piccolo. Non sei sicuro se vuoi renderlo più piccolo, ma puoi farlo anche tu. Basta cambiare il raggio r al valore richiesto.