Share
Das Material-Design-Team bei Google definiert die Funktionalität von Dialogen in Android folgendermaßen:
Dialoge informieren Benutzer über eine bestimmte Aufgabe und können wichtige Informationen enthalten, Entscheidungen erfordern oder mehrere Aufgaben umfassen.
Nun haben Sie verstanden, wofür Dialoge verwendet werden. Nun ist es an der Zeit zu lernen, wie sie angezeigt werden. In diesem Tutorial werde ich Sie durch den Prozess des Anzeigens verschiedener Arten von Materialdesign-Dialogen in Android führen. Wir werden die folgenden Dialoge behandeln:
Ein Beispielprojekt für dieses Lernprogramm finden Sie in unserem GitHub-Repo, das Sie leicht mitverfolgen können.
Laut der offiziellen Dokumentation zu Google Material Design:
Alarme sind dringende Unterbrechungen, die eine Bestätigung erfordern und den Benutzer über eine Situation informieren.
Vergewissern Sie sich, dass Sie das Neueste angeben appcompat Artefakt in Ihrem build.gradle Datei (App-Modul). Die unterstützte Mindest-API-Stufe ist Android 4.0 (API-Stufe 14)..
Abhängigkeiten Implementierung 'com.android.support:appcompat-v7:26.1.0'
Als nächstes erstellen Sie eine Instanz von AlertDialog.Builder.
Accentsconagua
new AlertDialog.Builder (this) .setTitle ("Nuke planet Jupiter?") .setMessage ("Beachten Sie, dass der Nuping Planet Jupiter alles dort zerstört.") .setPositiveButton ("Nuke", neuer DialogInterface.OnClickListener () @Override public void onClick (DialogInterface-Dialog, int das) Log.d ("MainActivity", "Atombomben an Jupiter senden"); .setNegativeButton ("Abort", neuer DialogInterface.OnClickListener () @Override public void onClick (DialogInterface-Dialog, int which) Log.d ("MainActivity", "Aborting mission ..."); .show ();Hier haben wir eine Instanz von erstellt AlertDialog.Builder und begann mit der Konfiguration der Instanz, indem sie einige Setter-Methoden aufrief. Beachten Sie, dass wir das verwenden AlertDialog vom Android-Support-Artefakt.
import android.support.v7.app.AlertDialog;
Hier sind die Details der Setter-Methoden, die wir für das aufgerufen haben AlertDialog.Builder Beispiel.
setTitle (): Legen Sie den Text fest, der in der Titelleiste des Dialogs angezeigt werden soll. setMessage (): Legen Sie fest, dass die Nachricht im Dialogfeld angezeigt werden soll. setPositiveButton (): Das erste angegebene Argument ist der Text, der in der positiven Schaltfläche angezeigt werden soll, während das zweite Argument der Listener ist, der beim Klicken auf die positive Schaltfläche aufgerufen wird. setNegativeButton (): Das erste angegebene Argument ist der Text, der in der negativen Schaltfläche angezeigt werden soll, während das zweite Argument der Listener ist, der beim Klicken auf die negative Schaltfläche aufgerufen wird. Beachten Sie, dass AlertDialog.Builder hat ein setView () um Ihre benutzerdefinierte Layoutansicht festzulegen.
Um unseren Dialog auf dem Bildschirm anzuzeigen, rufen wir ihn einfach auf Show().
Es gibt eine andere Setter-Methode, die aufgerufen wird setNeutralButton (). Durch Aufrufen dieser Methode wird eine weitere Schaltfläche ganz links im Dialogfeld hinzugefügt. Um diese Methode aufzurufen, müssen wir eine String Dies dient als Schaltflächentext und auch als Listener, der beim Antippen der Schaltfläche aufgerufen wird.
new AlertDialog.Builder (this) // andere Setter-Methoden .setNeutralButton ("Neutral", null) .show ()
Wenn Sie den Dialog außerhalb des Dialogfelds berühren, wird er automatisch gelöscht. Um dies zu verhindern, müssen Sie die anrufen setCanceledOnTouchOutside () auf der AlertDialog Instanz und Pass falsch als Argument.
AlertDialog dialog = new AlertDialog.Builder (this) // nach dem Aufruf von Setter-Methoden .create (); dialog.setCanceledOnTouchOutside (false); dialog.show ();
Um zu verhindern, dass Sie den Dialog beenden, drücken Sie die ZURÜCK Taste müssen Sie dann anrufen setCancelable () auf der AlertDialog Instanz und Pass falsch dazu als Argument.
Es ist ziemlich einfach, unseren Dialog zu gestalten. Wir erstellen einfach einen benutzerdefinierten Stil in der Stile.xml Ressource. Beachten Sie, dass dieser Stil übergeordnet ist Theme.AppCompat.Light.Dialog.Alert. Mit anderen Worten, dieser Stil erbt einige Stilattribute von seinem übergeordneten Element.
Wir passen den Dialogstil an, indem wir die Werte der Attribute festlegen, die auf den Dialog angewendet werden sollen. Zum Beispiel können wir die Farbe der Dialogschaltflächen ändern @Android:Farbe/ holo_orange_dark und legen Sie den Hintergrund des Dialogfelds auf einen benutzerdefinierten Zeichnungsbereich in unserem Ressourcenordner fest (android: windowBackground einstellen @ drawable / background_dialog).
Hier ist mein Hintergrund_Dialog.xml Ressourcendatei.
Hier haben wir einen Brauch geschaffen InsetDrawable Das erlaubt uns, Einfügungen auf jeder Seite des ShapeDrawable. Wir haben eine Rechteckform mit der erstellt android: form Attribut des Rechteck (andere mögliche Werte sind Linie, Oval, Ring). Wir haben eine Kindermarke android: farbe Attribut, das angibt, welche Farbe verwendet werden soll. Zum Schluss haben wir unserem Zeichner eine Grenze gegeben
Um diesen Stil auf das Dialogfeld anzuwenden, übergeben wir den benutzerdefinierten Stil einfach an den zweiten Parameter in AlertDialog.Builder Konstrukteur.
AlertDialog dialog = new AlertDialog.Builder (this, R.style.CustomDialogTheme)
Gemäß der Materialdesign-Dokumentation:
Bestätigungsdialogfelder erfordern, dass Benutzer ihre Wahl explizit bestätigen, bevor eine Option festgelegt wird. Zum Beispiel können Benutzer mehrere Klingeltöne hören, sie müssen jedoch nur eine endgültige Auswahl treffen, wenn Sie auf „OK“ tippen.
Folgende Bestätigungsdialogfelder stehen zur Verfügung:
Wir verwenden ein Multiple-Choice-Dialogfeld, wenn der Benutzer mehrere Elemente in einem Dialogfeld auswählen soll. In einem Multiple-Choice-Dialogfeld wird eine Auswahlliste angezeigt, aus der der Benutzer auswählen kann.
String [] multiChoiceItems = getResources (). GetStringArray (R.array.dialog_multi_choice_array); final boolean [] checkedItems = false, false, false, false; new AlertDialog.Builder (this) .setTitle ("Wählen Sie Ihre Lieblingsfilme aus") .setMultiChoiceItems (multiChoiceItems, checkedItems, neues DialogInterface.OnMultiChoiceClickListener () @Override public void onClick (DialogInterface-Dialog, in Index, boolean) ("MainActivity", "angeklickter Elementindex ist" + Index);.) SetPositiveButton ("Ok", null) .setNegativeButton ("Cancel", null) .show ();Um einen Multiple-Choice-Dialog zu erstellen, rufen wir einfach den setMultiChoiceItems () Setter-Methode auf der AlertDialog.Builder Beispiel. In dieser Methode passieren wir eine Array vom Typ String als erster Parameter. Hier ist mein Array, das sich in der Ressourcendatei des Arrays befindet /values/arrays.xml.
- Der dunkle Ritter
- Die Shawshank-Erlösung
- Der Soldat James Ryan
- Das Schweigen der Lämmer
Der zweite Parameter der Methode setMultiChoiceItems () akzeptiert ein Array, das die geprüften Elemente enthält. Der Wert jedes Elements in der checkedItems Array entspricht jedem Wert in der multiChoiceItems Array. Wir haben unsere benutzt checkedItems Array (deren Werte alle sind falsch standardmäßig), um alle Elemente standardmäßig zu deaktivieren. Mit anderen Worten, der erste Punkt "Dunkler Ritter" ist nicht markiert, da das erste Element in der checkedItems Array ist falsch, und so weiter. Wenn das erste Element in der checkedItems Stattdessen stimmte Array "Dunkler Ritter" würde geprüft werden.
Beachten Sie, dass dieses Array checkedItems wird aktualisiert, wenn wir ein Element auswählen oder anklicken, z. B. wenn der Benutzer auswählen soll "Die Shawshank Erlösung", Berufung checkedItems [1] würden zurückkehren wahr.
Der letzte Parameter akzeptiert eine Instanz von OnMultiChoiceClickListener. Hier erstellen wir einfach eine anonyme Klasse und überschreiben onClick (). Wir erhalten eine Instanz des angezeigten Dialogs im ersten Parameter. Im zweiten Parameter erhalten wir den Index des ausgewählten Elements. Schließlich erfahren wir im letzten Parameter, ob das ausgewählte Element markiert wurde oder nicht.
In einem Dialogfeld mit einer einzigen Auswahl kann im Gegensatz zum Dialogfeld mit einer Mehrfachauswahl nur ein Element ausgewählt werden.
String [] singleChoiceItems = getResources (). GetStringArray (R.array.dialog_single_choice_array); int itemSelected = 0; new AlertDialog.Builder (this) .setTitle ("Wählen Sie Ihr Geschlecht aus") .setSingleChoiceItems (singleChoiceItems, itemSelected, neues DialogInterface.OnClickListener () @Override public void onClick (DialogInterface dialogInterface, int selectedIndex) . Ok ", null) .setNegativeButton (" Cancel ", null) .show ();Um ein Dialogfeld mit einer Auswahl zu erstellen, rufen Sie einfach das Symbol auf setSingleChoiceItems () Setter auf der AlertDialog.Builder Beispiel. Innerhalb dieser Methode übergeben wir auch eine Array vom Typ String als erster Parameter. Hier ist das Array, das wir übergeben haben, das sich in der Ressourcendatei der Arrays befindet: /values/arrays.xml.
- Männlich
- Weiblich
- Andere
Der zweite Parameter des setSingleChoiceItems () wird verwendet, um zu bestimmen, welcher Artikel geprüft wird. Der letzte Parameter in onClick () gibt uns den Index des ausgewählten Elements an, z. B. Auswählen des Elements Weiblich item, der Wert von selectedIndex wird sein 1.
Dies ist eine Dialogauswahl, mit der ein einzelnes Datum ausgewählt wird.
Zu Beginn erstellen wir eine Kalender Feldinstanz in der Hauptaktivität und initialisieren Sie es.
public class MainActivity erweitert AppCompatActivity Calendar mCalendar = Calendar.getInstance (); //…
Hier haben wir angerufen Calendar.getInstance () um die aktuelle Uhrzeit (in der Standardzeitzone) abzurufen und auf die Uhrzeit einzustellen mCalendar Feld.
DatePickerDialog datePickerDialog = new DatePickerDialog (this, neuer DatePickerDialog.OnDateSetListener () @Override public void onDateSet (DatePicker-Ansicht, int year, int monthOfYear, int dayOfMonth) mCalendar.set (Calendar.YEAR, year); .MONTH, monthOfYear); mCalendar.set (Calendar.DAY_OF_MONTH, dayOfMonth); String date = DateFormat.getDateInstance (DateFormat.MEDIUM) .format (calendar.getTime ()); Log.d ("MainActivity") "; "+ date);, mCalendar.get (Calendar.YEAR), mCalendar.get (Calendar.MONTH), mCalendar.get (Calendar.DAY_OF_MONTH)); datePickerDialog.show ();Um ein Datumsauswahldialogfeld anzuzeigen, erstellen wir eine Instanz des DatePickerDialogs. Im Folgenden werden die Parameterdefinitionen erläutert, wenn Sie eine Instanz dieses Typs erstellen.
Aktivität, Sie verwenden diese, während in einer Fragment, du rufst an getActivity (). OnDateSetListener. Dieser Zuhörer onDateSet () wird aufgerufen, wenn der Benutzer das Datum festlegt. Innerhalb dieser Methode erhalten wir das ausgewählte Jahr, den ausgewählten Monat des Jahres und auch den ausgewählten Tag des Monats. 0-11). 1-31). Zum Schluss nennen wir das Show() Methode der DatePickerDialog um es auf dem aktuellen Bildschirm anzuzeigen.
Das Thema des Datumsauswahldialogs lässt sich leicht anpassen (ähnlich wie beim Alarmdialogfeld)..
In Kürze erstellen Sie ein benutzerdefiniertes Zeichenelement, erstellen einen benutzerdefinierten Stil oder ein Design und wenden dieses Design dann an, wenn Sie ein erstellen DatePickerDialog Instanz im zweiten Parameter.
DatePickerDialog datePickerDialog = new DatePickerDialog (this, R.style.MyCustomDialogTheme, Listener, 2017, 26, 11);
Der Zeitauswahldialog ermöglicht es dem Benutzer, eine Zeit auszuwählen und passt sich der bevorzugten Zeiteinstellung des Benutzers an, d. H. Dem 12-Stunden- oder 24-Stunden-Format.
Wie Sie im folgenden Code sehen können, erstellen Sie eine TimePickerDialog ist dem Erstellen von a sehr ähnlich DatePickerDialog. Beim Erstellen einer Instanz von TimePickerDialog, Wir übergeben folgende Parameter:
OnTimeSetListener Instanz, die als Zuhörer dient.TimePickerDialog timePickerDialog = new TimePickerDialog (dieser neue TimePickerDialog.OnTimeSetListener () @Override public void onTimeSet (TimePicker timePicker, int hourOfDay, int minute) mCalendar.set (Calendar.HOUR_OF_DAY, hourOfDay). minute); Zeichenfolgezeit = DateFormat.getTimeInstance (DateFormat.SHORT) .format (calendar.getTime ()); Log.d ("MainActivity", "Ausgewählte Zeit ist" + Uhrzeit);, mCalendar.get (Kalender. HOUR_OF_DAY), calendar.get (Calendar.MINUTE), true); timePickerDialog.show ();Das onTimeSet () Die Methode wird jedes Mal aufgerufen, wenn der Benutzer die Uhrzeit ausgewählt hat. Innerhalb dieser Methode erhalten wir eine Instanz von TimePicker, die gewählte Stunde des gewählten Tages und auch die ausgewählte Minute.
Um diesen Dialog anzuzeigen, rufen wir noch die Show() Methode.
Die Zeitauswahl kann auf ähnliche Weise gestaltet werden wie der Datumsauswahldialog.
Laut der offiziellen Dokumentation zu Google Material Design:
Die unteren Blätter werden vom unteren Rand des Bildschirms nach oben verschoben, um mehr Inhalt anzuzeigen.
Um mit der Verwendung des unteren Blattdialogfelds zu beginnen, müssen Sie das Design-Support-Artefakt importieren. Besuchen Sie daher das App-Modul build.gradle Datei zum Importieren.
Abhängigkeiten Implementierung 'com.android.support:appcompat-v7:26.1.0' Implementierung 'com.android.support:design:26.1.0'
Stellen Sie sicher, dass die Aktivität oder das Fragment für das untere Blattdialogfeld angezeigt wird. Das übergeordnete Layout ist das KoordinatorLayout.
Hier haben wir auch eine FrameLayout das würde als Behälter für unser unteres Blatt dienen. Beachten Sie das hier FrameLayoutDie Attribute sind App: Layoutverhalten, deren Wert eine spezielle Zeichenfolgenressource ist, der zugeordnet wird android.support.design.widget.BottomSheetBehavior. Dies wird uns ermöglichen FrameLayout als unteres Blatt erscheinen. Wenn Sie dieses Attribut nicht angeben, stürzt Ihre App ab.
public class MainActivity erweitert 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);
Hier haben wir eine Instanz von erklärt BottomSheetDialog als ein Feld zu unserem MainActivity.java und initialisierte es im onCreate () Methode unserer Tätigkeit.
final View bottomSheetLayout = getLayoutInflater (). inflate (R.layout.bottom_sheet_dialog, null); (bottomSheetLayout.findViewById (R.id.button_close)). setOnClickListener (neuer View.OnClickListener () @Override public void onClick (Ansichtsansicht) mBottomSheetDialog.dismiss ();); (bottomSheetLayout.findViewById (R.id.button_ok)). setOnClickListener (neuer View.OnClickListener () @Override public void onClick (View v) Toast.makeText (getApplicationContext ()) " .Show(); ); mBottomSheetDialog = new BottomSheetDialog (this); mBottomSheetDialog.setContentView (bottomSheetLayout); mBottomSheetDialog.show ();
Im vorhergehenden Code haben wir unser unteres Blattlayout aufgeblasen R.layout.bottom_sheet_dialog. Wir stellen Hörer auf die Stornieren und OK Tasten in der bottom_sheet_dialog.xml. Wenn der Stornieren Wenn Sie auf die Schaltfläche klicken, wird der Dialog einfach geschlossen.
Wir haben dann unsere initialisiert mBottomSheetDialog Feld und stellen Sie die Ansicht mit ein setContentView (). Zum Schluss nennen wir das Show() Methode, um es auf dem Bildschirm anzuzeigen.
Hier ist mein bottom_sheet_dialog.xml:
Vergewissern Sie sich, dass Sie unter Verwendung der Grundblätter mit der Design Support Library von Paul Trebilcox-Ruiz hier auf Envato Tuts + nachlesen, um mehr über Grundblätter zu erfahren.
Laut der offiziellen Dokumentation zu Google Material Design:
Vollbild-Dialoge gruppieren eine Reihe von Aufgaben (z. B. das Erstellen eines Kalendereintrags), bevor sie festgeschrieben oder verworfen werden. Es werden keine Auswahlen gespeichert, bis "Speichern" berührt wird. Durch Antippen des „X“ werden alle Änderungen verworfen und der Dialog verlassen.
Lassen Sie uns nun sehen, wie ein Vollbild-Dialog erstellt wird. Stellen Sie zunächst sicher, dass Sie das Android-Support-v4-Artefakt in das Modul Ihrer App aufnehmen build.gradle. Dies ist erforderlich, um Android 4.0 (API Level 14) und höher zu unterstützen.
Implementierung 'com.android.support:support-v4:26.1.0'
Als Nächstes erstellen wir eine FullscreenDialogFragment das reicht der DialogFragment super klasse.
public class FullscreenDialogFragment erweitert DialogFragment @Override public View onCreateView (LayoutInflater-Inflater, ViewGroup-Container, Bundle savedInstanceState) View rootView = inflater.inflate (R.layout.full_screen_dialog, container, false); (rootView.findViewById (R.id.button_close)). setOnClickListener (new View.OnClickListener () @Override public void onClick (Ansicht v) dismiss ();); rootView zurückgeben; @NonNull @Override public Dialog onCreateDialog (Bundle savedInstanceState) Dialog dialog = super.onCreateDialog (savedInstanceState); dialog.requestWindowFeature (Window.FEATURE_NO_TITLE); Dialog zurückkehren;
Hier überschreiben wir die onCreateView () (so wie wir es mit einem gewöhnlichen tun würden Fragment). In dieser Methode wird das Layout einfach aufgeblasen und zurückgegeben (R.layout.full_screen_dialog), die als benutzerdefinierte Ansicht für den Dialog dient. Wir setzen ein OnClickListener auf der ImageButton (R.id.button_close), der den Dialog abbricht, wenn Sie darauf klicken.
Wir überschreiben auch onCreateDialog () und a zurückgeben Dialog. Innerhalb dieser Methode können Sie auch eine zurückgeben AlertDialog erstellt mit einem AlertDialog.Builder.
Unsere R.layout.full_screen_dialog besteht aus einem ImageButton, ein Taste, und einige Textvorschau Etiketten:
In dem ImageButton Widget sehen Sie ein Attribut app: srcCompat die auf einen Brauch verweist VectorDrawable (@ drawable / ic_close). Dieser Brauch VectorDrawable schafft das X Schaltfläche, die das Vollbild-Dialogfeld schließt, wenn Sie darauf tippen.
Um dies zu nutzen app: srcCompat Attribut, stellen Sie sicher, dass Sie es in Ihrem einfügen build.gradle Datei. Konfigurieren Sie als Nächstes Ihre App für die Verwendung von Vektorunterstützungsbibliotheken und fügen Sie die hinzu VektorDrawables Element zu Ihrem build.gradle Datei im App-Modul.
android defaultConfig vectorDrawables.useSupportLibrary = true
Wir haben dies getan, damit wir alle Android-Plattformversionen auf Android 2.1 (API Level 7+) unterstützen können..
Zum Schluss das zeigen FullscreenDialogFragment, wir benutzen einfach die FragmentTransaction um unser Fragment zur Benutzeroberfläche hinzuzufügen.
FragmentManager fragmentManager = getSupportFragmentManager (); FullscreenDialogFragment newFragment = new FullscreenDialogFragment (); FragmentTransaction Transaktion = FragmentManager.beginTransaction (); transaction.setTransition (FragmentTransaction.TRANSIT_FRAGMENT_OPEN); transaction.add (android.R.id.content, newFragment) .addToBackStack (null) .commit ();
Beachten Sie, dass alle hier besprochenen Dialoge mit Ausnahme des Vollbild-Dialogs automatisch geschlossen werden, wenn der Benutzer die Bildschirmausrichtung des Android-Geräts ändert - vom Hochformat in das Querformat (oder umgekehrt). Dies liegt daran, dass das Android-System das zerstört und neu erstellt hat Aktivität um die neue Ausrichtung anzupassen.
Damit wir den Dialog auch bei Änderungen der Bildschirmorientierung aufrechterhalten können, müssen wir eine Fragment das reicht der DialogFragment Superklasse (genau wie beim Beispiel für den Vollbild-Dialog).
Sehen wir uns ein einfaches Beispiel für einen Alarmdialog an.
public class AlertDialogFragment erweitert DialogFragment implementiert DialogInterface.OnClickListener @Override public Dialog onCreateDialog (Bundle savedInstanceState) AlertDialog.Builder builder = neuer AlertDialog.Builder (getActivity ()); return (builder.setTitle ("Supermächte aktivieren?"). setMessage ("Durch die Aktivierung von Supermächten haben Sie mehr Kräfte, um die Welt zu retten.") .setPositiveButton ("Activate", this) .setNegativeButton ("Cancel") ) .erstellen()); @Override public void onCancel (DialogInterface-Dialog) super.onCancel (Dialog); @Override public void onDismiss (DialogInterface-Dialog) super.onDismiss (Dialog); @Override public void onClick (DialogInterface-Dialog, int welches) Toast.makeText (getActivity (), "was ist" + was, Toast.LENGTH_LONG) .show (); Hier haben wir eine Klasse erstellt, die die Erweiterung erweitert DialogFragment und implementiert auch die DialogInterface.OnClickListener. Da wir diesen Listener implementiert haben, müssen wir das überschreiben onClick () Methode. Wenn Sie auf die positive oder negative Schaltfläche tippen, beachten Sie dies onClick () Methode wird aufgerufen.
In unserem onCreateDialog (), Wir erstellen eine Instanz von AlertDialog.
Wir haben auch überschrieben:
onCancel (): wird aufgerufen, wenn der Benutzer die. drückt ZURÜCK Schaltfläche, um den Dialog zu verlassen. onDismiss (): wird aufgerufen, wenn der Dialog aus irgendeinem Grund herausgezwungen wird (ZURÜCK oder ein Knopfdruck). Um diesen Dialog anzuzeigen, rufen wir einfach die Show() Methode auf einer Instanz unserer AlertDialogFragment.
new AlertDialogFragment (). show (getSupportFragmentManager (), "alertdialog_sample");
Der erste Parameter ist eine Instanz von FragmentManager. Der zweite Parameter ist ein Tag, mit dem dieses Fragment später erneut von der Datenbank abgerufen werden kann FragmentManager über findFragmentByTag ().
Wenn Sie jetzt die Ausrichtung des Geräts von Hochformat in Querformat (oder umgekehrt) ändern, wird der Warnungsdialog nicht geschlossen.
Sie können ähnliche Schritte für die anderen Dialogtypen ausführen, um den Di
