Boutons d'image que l'utilisateur ne peut sélectionner qu'un des JavaFX
Je travaille sur une application Mood Journal et pour le moment, elle demande à l'utilisateur de noter son humeur sur une échelle de 1 à 5 avant d'enregistrer son entrée, comme indiqué sur l'image ci-dessous.
Je veux remplacer cela par 5 petits boutons disposés horizontalement avec des images emoji respectives comme arrière-plan. J'ai déjà choisi les images que je voudrais utiliser, et j'ai cherché à implémenter un bouton FX normal ou un ImageView
, mais avec ceux-ci, il semble que cliquer sur le bouton en fasse simplement action; au contraire, je veux que l'utilisateur ne puisse en sélectionner qu'un à la fois (comme un bouton radio). Comment puis-je accomplir?
1 answers
Suggestion 1:
Vous pouvez utiliser ControlsFX SegmentedButton (Défini comme graphique du bouton que vous avez utilisé imoji):
Du doc:
Le SegmentedButton
est un contrôle simple qui force ensemble un groupe d'instances de ToggleButton de telle sorte qu'elles apparaissent comme un seul bouton collectif (avec des sous-boutons), plutôt que comme des boutons individuels. Ceci est mieux clarifié avec une image:
Il y a très petite API sur ce contrôle, vous créez essentiellement des instances ToggleButton
comme d'habitude (et ne prenez pas la peine de les mettre dans un ToggleGroup
, car cela est fait par le SegmentedButton
lui-même), puis vous placez ces boutons dans la liste des boutons. La manière longue de coder ceci est la suivante:
ToggleButton b1 = new ToggleButton("day");
ToggleButton b2 = new ToggleButton("week");
ToggleButton b3 = new ToggleButton("month");
ToggleButton b4 = new ToggleButton("year");
SegmentedButton segmentedButton = new SegmentedButton();
segmentedButton.getButtons().addAll(b1, b2, b3, b4);
Une façon légèrement plus courte de le faire est de passer les instances ToggleButton dans le constructeur varargs, en tant que tel:
SegmentedButton segmentedButton = new SegmentedButton(b1, b2, b3, b4);
Suggestion 2:
Vous pouvez utiliser ControlsFX Évaluation :
Du Doc:
Un contrôle permettant aux utilisateurs de fournir une note. Ce contrôle prend en charge les évaluations partielles (c'est-à-dire pas des nombres entiers et dépend de l'endroit où l'utilisateur clique dans le contrôle) et la mise à jour de la notation en survol.
Pour créer un contrôle de notation qui ressemble à ceci est simple:
final Rating rating = new Rating();
Cela crée un contrôle de notation horizontale par défaut. Pour créer un contrôle d'évaluation vertical, il suffit de modifier orientation, en tant que telle:
final Rating rating = new Rating();
rating.setOrientation(Orientation.VERTICAL);
Vous pouvez continuer la lecture dudoc ...
Suggestion 3:(Pas De Troisième Bibliothèque Nécessaire)
Vous pouvez créer une barre d'outils personnalisée avec 5 Button
, chacun aura une PseudoClass(selected
) et chaque fois que l'un d'eux est pressé , les autres auront la Pseudoclass(selected=false
), de sorte que l'utilisateur peut voir lequel est sélectionné.
, de Sorte que vous pouvez faire quelque chose de similaire à :
Lisez ceci article si vous voulez l'implémenter - > http://fxexperience.com/2012/02/customized-segmented-toolbar-buttons/