Share
L’équipe de conception matérielle de Google définit la fonctionnalité des dialogues dans Android comme suit:
Les boîtes de dialogue informent les utilisateurs sur une tâche spécifique et peuvent contenir des informations critiques, nécessiter des décisions ou impliquer plusieurs tâches..
Maintenant que vous avez compris à quoi servent les boîtes de dialogue, il est temps d'apprendre à les afficher. Dans ce didacticiel, je vais vous montrer comment afficher différents types de dialogues de conception de matériaux dans Android. Nous couvrirons les dialogues suivants:
Vous trouverez un exemple de projet pour ce tutoriel sur notre dépôt GitHub pour que vous puissiez suivre facilement.
Selon la documentation de conception matérielle officielle de Google:
Les alertes sont des interruptions urgentes, nécessitant un acquittement, qui informent l'utilisateur de la situation..
Assurez-vous d'inclure les dernières appcompat artefact dans votre build.gradle fichier (module app). Le niveau API minimum pris en charge est Android 4.0 (niveau API 14).
dépendances implémentation 'com.android.support:appcompat-v7:26.1.0'
La prochaine chose à faire est de créer une instance de AlertDialog.Builder.
Accentsconagua
new AlertDialog.Builder (this) .setTitle ("Nuke planet Jupiter?") .setMessage ("Vous remarquerez que la planète Jupiter détruira tout ce qui s'y trouve.") .setPositiveButton ("Nuke", nouveau DialogInterface.OnClickListener () @Override onClick public public (dialogue DialogInterface, int qui) Log.d ("MainActivity", "Envoi de bombes atomiques à Jupiter");) .setNegativeButton ("Abort", nouveau DialogInterface.OnClickListener () @Override public void onClick (Dialogue DialogInterface, int qui) Log.d ("MainActivity", "Abanding mission ...");) .show ();Ici nous avons créé une instance de AlertDialog.Builder et a commencé à configurer l’instance en appelant certaines méthodes de définition. Notez que nous utilisons le AlertDialog de l'artefact de support Android.
importer android.support.v7.app.AlertDialog;
Voici les détails des méthodes de définition que nous avons appelées sur le AlertDialog.Builder exemple.
setTitle (): définir le texte à afficher dans la barre de titre de la boîte de dialogue. setMessage (): définir le message à afficher dans la boîte de dialogue. setPositiveButton (): le premier argument fourni est le texte à afficher dans le bouton positif, tandis que le second argument est l'écouteur appelé lorsque l'utilisateur clique sur le bouton positif. setNegativeButton (): le premier argument fourni est le texte à afficher dans le bouton négatif, tandis que le second argument est l'écouteur appelé lorsque le bouton négatif est cliqué. Notez que AlertDialog.Builder a un setView () définir votre mise en page personnalisée.
Pour afficher notre dialogue à l'écran, il suffit d'appeler spectacle().
Il existe une autre méthode de définition appelée setNeutralButton (). L'appel de cette méthode ajoutera un autre bouton à l'extrême gauche de la boîte de dialogue. Pour appeler cette méthode, nous devons passer un Chaîne qui servira de texte pour le bouton, ainsi qu'un écouteur appelé lorsque vous appuierez sur le bouton.
new AlertDialog.Builder (this) // autres méthodes de définition .setNeutralButton ("Neutral", null) .show ()
Notez que tout contact en dehors de la boîte de dialogue la fera automatiquement disparaître. Pour éviter cela, vous devrez appeler le setCanceledOnTouchOutside () sur le AlertDialog instance et passe faux comme argument.
Dialogue AlertDialog = new AlertDialog.Builder (this) // après avoir appelé les méthodes de définition .create (); dialog.setCanceledOnTouchOutside (false); dialog.show ();
Pour éviter davantage de fermer la boîte de dialogue en appuyant sur RETOUR bouton, vous devez ensuite appeler setCancelable () sur le AlertDialog instance et passe faux comme argument.
C'est assez facile de dénommer notre dialogue. Nous venons de créer un style personnalisé dans le modes.xml Ressource. Observez que ce style parent est Theme.AppCompat.Light.Dialog.Alert. En d'autres termes, ce style hérite de certains attributs de style de son parent.
Nous commençons à personnaliser le style de la boîte de dialogue en définissant les valeurs des attributs à appliquer à la boîte de dialogue. Par exemple, nous pouvons modifier la couleur du bouton de la boîte de dialogue. @Android:Couleur/ holo_orange_dark et définissez également l’arrière-plan de la boîte de dialogue comme personnalisable dans notre dossier de ressources pouvant être dessiné (Android: fenêtre arrière-plan mis à @ drawable / background_dialog).
Voici mon background_dialog.xml fichier de ressources.
Ici nous avons créé une coutume InsetDrawable ce qui nous permet d’ajouter des encarts de part et d’autre de la ShapeDrawable. Nous avons créé un rectangle en utilisant le Android: forme attribut du rectangle (les autres valeurs possibles sont ligne, ovale, bague). Nous avons une balise enfant Android: couleur attribut qui indique quelle couleur utiliser. Enfin, nous avons donné à notre dessin une bordure en utilisant le
Pour appliquer ce style à la boîte de dialogue, il suffit de passer le style personnalisé au deuxième paramètre de la AlertDialog.Builder constructeur.
Dialogue AlertDialog = nouvel AlertDialog.Builder (this, R.style.CustomDialogTheme)
Selon la documentation de conception du matériau:
Dans les boîtes de dialogue de confirmation, les utilisateurs doivent confirmer explicitement leur choix avant de valider une option. Par exemple, les utilisateurs peuvent écouter plusieurs sonneries mais ne peuvent effectuer une sélection finale qu'en appuyant sur «OK».
Les différents types de dialogue de confirmation suivants sont disponibles:
Nous utilisons une boîte de dialogue à choix multiple lorsque nous souhaitons que l'utilisateur sélectionne plusieurs éléments dans une boîte de dialogue. Dans une boîte de dialogue à choix multiples, une liste de choix s'affiche pour permettre à l'utilisateur de choisir.
String [] multiChoiceItems = getResources (). GetStringArray (R.array.dialog_multi_choice_array); booléen final [] checkItems = false, false, false, false; new AlertDialog.Builder (this) .setTitle ("Sélectionnez vos films préférés") .setMultiChoiceItems (multiChoiceItems, 7900 vérifié, nouveau dialogue DialogInterface.OnMhoiceClickListener () dialog ("MainActivity", "l'index de l'élément sélectionné est" + index);) .setPositiveButton ("Ok", null) .setNegativeButton ("Annuler", null) .show ();Pour créer un dialogue à choix multiples, nous appelons simplement le setMultiChoiceItems () méthode setter sur le AlertDialog.Builder exemple. Dans cette méthode, nous passons un Tableau de type Chaîne comme premier paramètre. Voici mon tableau, situé dans le fichier de ressources des tableaux /values/arrays.xml.
- Le Chevalier Noir
- Le rachat de Shawshank
- Sauver le soldat Ryan
- Le silence des agneaux
Le second paramètre de la méthode setMultiChoiceItems () accepte un tableau contenant les éléments vérifiés. La valeur de chaque élément de la éléments vérifiés tableau correspond à chaque valeur dans le multiChoiceItems tableau. Nous avons utilisé notre éléments vérifiés tableau (dont les valeurs sont toutes faux par défaut) pour que tous les éléments soient décochés par défaut. En d'autres termes, le premier élément "Chevalier noir" est décochée parce que le premier élément de la éléments vérifiés tableau est faux, etc. Si le premier élément de la éléments vérifiés tableau était vrai à la place, alors "Chevalier noir" serait vérifié.
Notez que ce tableau éléments vérifiés est mis à jour lorsque nous sélectionnons ou cliquons sur n’importe quel élément affiché - par exemple, si l’utilisateur doit sélectionner "Le rachat de Shawshank", appel éléments vérifiés [1] retournerais vrai.
Le dernier paramètre accepte une instance de OnMultiChoiceClickListener. Ici, nous créons simplement une classe anonyme et remplaçons sur clic(). Nous obtenons une instance de la boîte de dialogue montrée dans le premier paramètre. Dans le deuxième paramètre, nous obtenons l'index de l'élément sélectionné. Enfin, dans le dernier paramètre, on découvre si l’élément sélectionné a été coché ou non.
Dans une boîte de dialogue à choix unique, contrairement à la boîte de dialogue à choix multiples, un seul élément peut être sélectionné..
String [] singleChoiceItems = getResources (). GetStringArray (R.array.dialog_single_choice_array); int itemSelected = 0; new AlertDialog.Builder (this) .setTitle ("Sélectionnez votre sexe") .setSingleChoiceItems (singleChoiceItems, itemSelected, new DialogInterface.OnClickListener () sélectionné (noOI). Ok ", null) .setNegativeButton (" Annuler ", null) .show ();Pour créer un dialogue à choix unique, nous invoquons simplement le setSingleChoiceItems () poseur sur le AlertDialog.Builder exemple. Dans cette méthode, nous passons également un Tableau de type Chaîne comme premier paramètre. Voici le tableau que nous avons passé, qui se trouve dans le fichier de ressources des tableaux: /values/arrays.xml.
- Mâle
- Femelle
- Autres
Le deuxième paramètre de la setSingleChoiceItems () est utilisé pour déterminer quel élément est vérifié. Le dernier paramètre de sur clic() nous donne l'index de l'élément qui a été sélectionné, par exemple, en sélectionnant le Femelle item, la valeur de selectedIndex sera 1.
Ceci est un sélecteur de dialogue utilisé pour sélectionner une seule date.
Pour commencer, nous allons créer un Calendrier instance de champ dans le Activité principale et l'initialiser.
Classe publique MainActivity étend AppCompatActivity Calendar mCalendar = Calendar.getInstance (); //…
Ici nous avons appelé Calendar.getInstance () pour obtenir l'heure actuelle (dans le fuseau horaire par défaut) et la régler sur mCalendar champ.
DatePickerDialog datePickerDialog = new DatePickerDialog (DatePickerDialog.OnDateSetListener () @Override public void on (DatePicker, année, int mois, mois, jour, jour). .MONTH, monthOfYear); mCalendar.set (Calendar.DAY_OF_MONTH, dayOfMonth); Chaîne date = DateFormat.getDateInstance (DateFormat.MEDIUM) .format (calendar.getTime ()); Log.d ("MainActivity", "La date sélectionnée est "+ date);, mCalendar.get (Calendar.YEAR), mCalendar.get (Calendar.MONTH), mCalendar.get (Calendar.DAY_OF_MONTH)); datePickerDialog.show ();Pour afficher une boîte de dialogue de sélection de date, nous créons une instance de DatePickerDialog. Voici l'explication des définitions de paramètres lors de la création d'une instance de ce type.
Activité, tu utilises ce, alors que dans un Fragment, tu appelles getActivity (). OnDateSetListener. Cet auditeur onDateSet () est appelé lorsque l'utilisateur définit la date. Dans cette méthode, nous obtenons l’année sélectionnée, le mois de l’année sélectionné ainsi que le jour du mois sélectionné.. 0-11). 1-31). Enfin, nous appelons le spectacle() méthode du DatePickerDialog exemple pour l'afficher sur l'écran actuel.
Il est assez facile de personnaliser le thème du dialogue du sélecteur de date (similaire à ce que nous avons fait pour le dialogue d'alerte).
En bref, vous créez un dessin personnalisable, un style ou un thème personnalisé, puis vous appliquez ce thème lors de la création d’un thème. DatePickerDialog instance dans le deuxième paramètre.
DatePickerDialog datePickerDialog = new DatePickerDialog (this, R.style.MyCustomDialogTheme, auditeur, 2017, 26, 11);
La boîte de dialogue de sélection d’heure permet à l’utilisateur de choisir une heure et d’ajuster son réglage d’heure, c’est-à-dire le format 12 heures ou 24 heures..
Comme vous pouvez le voir dans le code ci-dessous, créer un TimePickerDialog est assez similaire à la création d'un DatePickerDialog. Lors de la création d'une instance du TimePickerDialog, on passe dans les paramètres suivants:
OnTimeSetListener instance qui sert d'auditeur.TimePickerDialog timePickerDialog = new TimePickerDialog (ceci, nouveau TimePickerDialog.FR, minute); String time = DateFormat.getTimeInstance (DateFormat.SHORT) .format (calendar.getTime ()); Log.d ("MainActivity", "l’heure sélectionnée est" + heure);, mCalendar.get (Calendar. HOUR_OF_DAY), calendar.get (Calendar.MINUTE), true); timePickerDialog.show ();le onTimeSet () La méthode est appelée chaque fois que l'utilisateur a sélectionné l'heure. Dans cette méthode, nous obtenons une instance de la TimePicker, l'heure sélectionnée du jour choisi, ainsi que la minute sélectionnée.
Pour afficher cette boîte de dialogue, nous appelons toujours le spectacle() méthode.
Le sélecteur de temps peut être stylé de la même manière que le dialogue du sélecteur de date.
Selon la documentation de conception matérielle officielle de Google:
Les feuilles inférieures glissent vers le haut depuis le bas de l'écran pour révéler plus de contenu.
Pour commencer à utiliser la boîte de dialogue de la feuille de fond, vous devez importer l’artefact de support de conception. Visitez donc le module de votre application. build.gradle fichier à importer.
dépendances implémentation 'com.android.support:appcompat-v7:26.1.0' implémentation 'com.android.support:design:26.1.0'
Assurez-vous que l’activité ou le fragment de la boîte de dialogue de la feuille de dessous s’ouvrira: sa mise en page parent est la Coordonnateur.
Ici nous avons aussi un FrameLayout cela servirait de conteneur pour notre feuille de fond. Observez que l'un de ces FrameLayoutLes attributs de est app: layout_behavior, dont la valeur est une ressource de chaîne spéciale mappée sur android.support.design.widget.BottomSheetBehavior. Cela permettra à notre FrameLayout apparaître comme une feuille de fond. Notez que si vous n'incluez pas cet attribut, votre application se bloquera..
Classe publique MainActivity étend AppCompatActivity //… //… private BottomSheetDialog mBottomSheetDialog; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); //… View bottomSheet = findViewById (R.id.framelayout_bottom_sheet);
Ici nous avons déclaré une instance de BottomSheetDialog comme un champ à notre MainActivity.java et initialisé dans le onCreate () méthode de notre activité.
final View bottomSheetLayout = getLayoutInflater (). inflate (R.layout.bottom_sheet_dialog, null); (bottomSheetLayout.findViewById (R.id.button_close)). setOnClickListener (new View.OnClickListener () @Override public void onClick (vue vue) mBottomSheetDialog.dismiss ();); (bottomSheetLayout.findViewById (R.id.button_ok)). setOnClickListener (new View.OnClickListener () @Override public void onClick (Afficher v) Toast.makeText (getApplicationContext (), "bouton OK activé", Toast.LENGH_S) .spectacle(); ); mBottomSheetDialog = new BottomSheetDialog (this); mBottomSheetDialog.setContentView (bottomSheetLayout); mBottomSheetDialog.show ();
Dans le code précédent, nous avons gonflé notre mise en page de fond R.layout.bottom_sheet_dialog. Nous mettons les auditeurs pour le Annuler et D'accord boutons dans le bottom_sheet_dialog.xml. Quand le Annuler on clique sur le bouton, on ferme simplement le dialogue.
Nous avons ensuite initialisé notre mBottomSheetDialog champ et définir la vue en utilisant setContentView (). Enfin, nous appelons le spectacle() méthode pour l'afficher à l'écran.
Voici mon bottom_sheet_dialog.xml:
Assurez-vous de consulter Comment utiliser les feuilles de fond avec la bibliothèque de support de conception de Paul Trebilcox-Ruiz ici sur Envato Tuts + pour en savoir plus sur les feuilles de fond.
Selon la documentation de conception matérielle officielle de Google:
Les boîtes de dialogue plein écran regroupent une série de tâches (telles que la création d’une entrée d’agenda) avant leur validation ou leur suppression. Aucune sélection n'est enregistrée tant que vous n'avez pas appuyé sur “Enregistrer”. Touchez le «X» pour annuler toutes les modifications et quitter le dialogue..
Voyons maintenant comment créer une boîte de dialogue en plein écran. Tout d'abord, assurez-vous d'inclure l'artefact de support Android v4 dans le module de votre application. build.gradle. Cela est nécessaire pour prendre en charge Android 4.0 (API niveau 14) et supérieur.
implémentation 'com.android.support:support-v4:26.1.0'
Ensuite, nous allons créer un FullscreenDialogFragment qui étend la DialogFragment super classe.
Classe publique FullscreenDialogFragment étend DialogFragment @Override public View onCreateView (inflateur LayoutInflater, conteneur ViewGroup, Bundle savedInstanceState) View rootView = inflater.inflate (R.layout.full_screen_dialog, conteneur, false); (rootView.findViewById (R.id.button_close)). setOnClickListener (new View.OnClickListener () @Override public void onClick (Afficher v) licencier ();); retourne rootView; @NonNull @Override public Dialog onCreateDialog (Bundle savedInstanceState) Dialog dialog = super.onCreateDialog (savedInstanceState); dialog.requestWindowFeature (Window.FEATURE_NO_TITLE); retourner le dialogue;
Ici, nous remplaçons la onCreateView () (comme nous le ferions avec un Fragment). Dans cette méthode, nous gonflons simplement et retournons la mise en page (R.layout.full_screen_dialog) qui servira d’affichage personnalisé pour la boîte de dialogue. Nous mettons un OnClickListener sur le ImageButton (R.id.button_close) qui ferme la boîte de dialogue lorsque l'utilisateur clique dessus.
Nous annulons aussi onCreateDialog () et retourner un Dialogue. Dans cette méthode, vous pouvez également renvoyer un AlertDialog créé à l'aide d'un AlertDialog.Builder.
Notre R.layout.full_screen_dialog se compose d'un ImageButton, une Bouton, et certaines Affichage Étiquettes:
dans le ImageButton widget, vous verrez un attribut application: srcCompat qui fait référence à une coutume VectorDrawable (@ drawable / ic_close). Cette coutume VectorDrawable crée le X bouton qui ferme la boîte de dialogue plein écran lorsque vous appuyez dessus.
Pour utiliser cette application: srcCompat attribut, assurez-vous de l'inclure dans votre build.gradle fichier. Ensuite, configurez votre application pour utiliser les bibliothèques de support vectoriel et ajoutez le vectorDrawables élément de votre build.gradle fichier dans le module d'application.
android defaultConfig vectorDrawables.useSupportLibrary = true
Nous avons fait cela pour pouvoir prendre en charge toutes les versions de la plate-forme Android depuis Android 2.1 (API de niveau 7 ou supérieur)..
Enfin, pour montrer le FullscreenDialogFragment, nous utilisons simplement le FragmentTransaction ajouter notre fragment à l'interface utilisateur.
FragmentManager fragmentManager = getSupportFragmentManager (); FullscreenDialogFragment newFragment = new FullscreenDialogFragment (); FragmentTransaction transaction = fragmentManager.beginTransaction (); transaction.setTransition (FragmentTransaction.TRANSIT_FRAGMENT_OPEN); transaction.add (android.R.id.content, newFragment) .addToBackStack (null) .commit ();
Notez que toutes les boîtes de dialogue décrites ici, à l'exception de la boîte de dialogue plein écran, seront automatiquement fermées lorsque l'utilisateur modifiera l'orientation de l'écran du périphérique Android - de portrait en paysage (ou inversement). En effet, le système Android a détruit et recréé le Activité afin de s'adapter à la nouvelle orientation.
Pour que nous puissions maintenir le dialogue lors des changements d’orientation de l’écran, nous devrons créer un Fragment qui étend la DialogFragment super classe (comme nous l'avons fait pour l'exemple de dialogue en plein écran).
Voyons un exemple simple pour un dialogue d'alerte.
Classe publique AlertDialogFragment étend DialogFragment implémente DialogInterface.OnClickListener @Override public Dialog onCreateDialog (Bundle savedInstanceState) AlertDialog.Builder builder = new AlertDialog.Builder (getActivity ()); return (builder.setTitle ("Activer les superpouvoirs?"). setMessage ("En activant les superpouvoirs, vous aurez plus de pouvoirs pour sauver le monde.") .setPositiveButton ("Activer", ceci) .setNegativeButton ("Annuler", cela ) .créer()); @Override public void onCancel (dialogue DialogInterface) super.onCancel (dialogue); @Override public void onDismiss (boîte de dialogue DialogInterface) super.onDismiss (boîte de dialogue); @Override public void onClick (boîte de dialogue DialogInterface, int) Toast.makeText (getActivity (), "qui est" + qui, Toast.LENGTH_LONG) .show (); Ici, nous avons créé une classe qui étend la DialogFragment et met également en œuvre le DialogInterface.OnClickListener. Parce que nous avons mis en œuvre cet auditeur, nous devons remplacer le sur clic() méthode. Notez que si on appuie sur le bouton positif ou négatif, cela sur clic() la méthode sera invoquée.
À l'intérieur de notre onCreateDialog (), nous créons et retournons une instance de AlertDialog.
Nous avons également remplacé:
onCancel (): cela s’appelle si l’utilisateur appuie sur le RETOUR bouton pour quitter le dialogue. onDismiss (): ceci est appelé chaque fois que le dialogue est forcé de sortir pour une raison quelconque (RETOUR ou un clic de bouton). Pour afficher ce dialogue, nous appelons simplement le spectacle() méthode sur une instance de notre AlertDialogFragment.
new AlertDialogFragment (). show (getSupportFragmentManager (), "alertdialog_sample");
Le premier paramètre est une instance du FragmentManager. Le deuxième paramètre est une balise qui peut être utilisée pour extraire ce fragment ultérieurement de la FragmentManager via findFragmentByTag ().
Maintenant, si vous modifiez l'orientation du périphérique de portrait en paysage (ou vice versa), la boîte de dialogue d'alerte ne sera pas fermée..
Vous pouvez suivre des étapes similaires pour les autres types de boîte de dialogue afin de l
