Share
Het materiaalontwerpteam bij Google definieert de functionaliteit van dialoogvensters in Android als volgt:
Dialogen informeren gebruikers over een specifieke taak en kunnen belangrijke informatie bevatten, besluiten vereisen of meerdere taken omvatten.
Nu hebt u begrepen voor welke dialogen het is, het is nu tijd om te leren hoe u ze kunt weergeven. In deze zelfstudie doorloop ik het proces van het tonen van verschillende soorten dialoogvensters voor materiaalontwerp in Android. We behandelen de volgende dialogen:
Een voorbeeldproject voor deze zelfstudie is te vinden op onze GitHub-repo zodat u deze eenvoudig kunt volgen.
Volgens de officiële documentatie van Google-materiaalontwerp:
Waarschuwingen zijn urgente onderbrekingen, waarvoor bevestiging vereist is, die de gebruiker over een situatie informeren.
Zorg ervoor dat u de laatste toevoegt AppCompat artefact in uw build.gradle bestand (app-module). Het minimaal ondersteunde API-niveau is Android 4.0 (API-niveau 14).
afhankelijkheden implementatie 'com.android.support:appcompat-v7:26.1.0'
Het volgende is om een instantie van te maken AlertDialog.Builder.
Accentsconagua
nieuwe AlertDialog.Builder (this) .setTitle ("Nuke planet Jupiter?") .setMessage ("Merk op dat Nuking Planet Jupiter alles daarin zal vernietigen.") .setPositiveButton ("Nuke", nieuwe DialogInterface.OnClickListener () @Override public void onClick (dialoogvenster DialogInterface, int.) Log.d ("MainActivity", "atomic bombs to Jupiter verzenden");) .setNegativeButton ("Abort", new DialogInterface.OnClickListener () @Overleden openbare ongeldig onClick (Dialoog DialogInterface, int.) Log.d ("MainActivity", "Mission afbreken ...");) .show ();Hier hebben we een instantie van gemaakt AlertDialog.Builder en begon de instantie te configureren door er enkele setter-methoden op aan te roepen. Merk op dat we de gebruiken AlertDialog van het ondersteuningsartefact van Android.
import android.support.v7.app.AlertDialog;
Hier zijn de details van de settermethoden die we hebben genoemd in de AlertDialog.Builder aanleg.
setTitle (): stel de tekst in die moet worden weergegeven in de titelbalk van het dialoogvenster. setMessage (): stel het bericht in dat moet worden weergegeven in het dialoogvenster. setPositiveButton (): het eerste opgegeven argument is de tekst die moet worden weergegeven in de positieve knop, terwijl het tweede argument de luisteraar is die wordt gebeld wanneer op de positieve knop wordt geklikt. setNegativeButton (): het eerste opgegeven argument is de tekst die moet worden weergegeven in de negatieve knop, terwijl het tweede argument de luisteraar is die wordt gebeld wanneer op de negatieve knop wordt geklikt. Let daar op AlertDialog.Builder heeft een setview () om uw aangepaste lay-outweergave hierop in te stellen.
Om onze dialoog op het scherm te tonen, roepen we gewoon aan laten zien().
Er is een andere setter-methode genaamd setNeutralButton (). Als u deze methode aanroept, wordt er aan de linkerkant van het dialoogvenster een andere knop toegevoegd. Om deze methode te noemen, moeten we een Draad die als knoptekst zal dienen, en ook een luisteraar die wordt gebeld wanneer op de knop wordt getikt.
nieuwe AlertDialog.Builder (this) // andere settermethoden .setNeutralButton ("Neutral", null) .show ()
Merk op dat als u buiten het dialoogvenster tikt, het automatisch wordt gesloten. Om te voorkomen dat dit gebeurt, moet u de setCanceledOnTouchOutside () op de AlertDialog exemplaar en doorgeven vals als een argument.
Dialoogvenster AlertDialog = nieuw AlertDialog.Builder (this) // na het aanroepen van setter-methoden .create (); dialog.setCanceledOnTouchOutside (false); dialog.show ();
Om verder te voorkomen dat het dialoogvenster wordt verwijderd door op te drukken TERUG knop, dan moet je bellen setCancelable () op de AlertDialog exemplaar en doorgeven vals om het als een argument.
Het is vrij eenvoudig om onze dialoog te vormen. We maken gewoon een aangepaste stijl in de stijlen.xml bron. Merk op dat deze stijlouder is Theme.AppCompat.Light.Dialog.Alert. Met andere woorden, deze stijl neemt sommige stijlattributen van het bovenliggende element over.
We beginnen de dialoogstijl aan te passen door de waarden in te stellen van de kenmerken die in het dialoogvenster moeten worden toegepast, we kunnen bijvoorbeeld de kleur van de dialoogvensterknop wijzigen @android:kleur/ holo_orange_dark en stel de achtergrond van het dialoogvenster ook in voor een aangepast tekenbaar bestand in onze tekenbare bronmap (android: windowBackground ingesteld op @ Betekenbare / background_dialog).
Hier is mijn background_dialog.xml bronbestand.
Hier hebben we een aangepaste gemaakt InsetDrawable waarmee we insets kunnen toevoegen aan elke kant van de ShapeDrawable. We hebben een rechthoekige vorm gemaakt met behulp van de android: shape attribuut van de rechthoek (andere mogelijke waarden zijn lijn, ovaal, ring). We hebben een kind-tag android: kleur kenmerk dat aangeeft welke kleur moet worden gebruikt. Ten slotte hebben we onze drawable een grens gegeven door de
Om deze stijl toe te passen op het dialoogvenster, geven we de aangepaste stijl gewoon door aan de tweede parameter in de AlertDialog.Builder bouwer.
Dialoogvenster AlertDialog = nieuw AlertDialog.Builder (dit, R.style.CustomDialogTheme)
Volgens de documentatie van het materiaalontwerp:
Bevestigingsdialogen vereisen dat gebruikers hun keuze expliciet bevestigen voordat een optie wordt vastgelegd. Gebruikers kunnen bijvoorbeeld naar meerdere beltonen luisteren, maar alleen een laatste selectie maken door op "OK" te tikken.
De volgende verschillende soorten bevestigingsdialoog zijn beschikbaar:
We gebruiken een meerkeuzedialoogvenster wanneer we willen dat de gebruiker meer dan één item in een dialoogvenster selecteert. In een meerkeuzedialoogvenster wordt een keuzelijst weergegeven waaruit de gebruiker kan kiezen.
String [] multiChoiceItems = getResources (). GetStringArray (R.array.dialog_multi_choice_array); final boolean [] checkedItems = false, false, false, false; nieuwe AlertDialog.Builder (this) .setTitle ("Selecteer uw favoriete films") .setMultiChoiceItems (multiChoiceItems, checkedItems, new DialogInterface.OnMultiChoiceClickListener () @Override openbare ongeldig onClick (dialoogvenster DialogInterface, int index, boolean isChecked) Log.d ("MainActivity", "klik op itemindex is" + index);) .setPositiveButton ("Ok", null) .setNegativeButton ("Cancel", null) .show ();Om een meerkeuzedialoogvenster te maken, bellen we eenvoudigweg met setMultiChoiceItems () settermethode op de AlertDialog.Builder aanleg. Binnen deze methode passeren we een reeks van type Draad als de eerste parameter. Dit is mijn array, die zich bevindt in het arrays-bronbestand /values/arrays.xml.
- De donkere ridder
- De Shawshank-verlossing
- Saving Private Ryan
- De stilte van de lammeren
De tweede parameter voor de methode setMultiChoiceItems () accepteert een array die de items bevat die zijn aangevinkt. De waarde van elk element in de checkedItems matrix komt overeen met elke waarde in de multiChoiceItems matrix. We gebruikten onze checkedItems array (waarvan de waarden allemaal zijn vals standaard) om alle items standaard uit te schakelen. Met andere woorden, het eerste item "Dark Knight" is uitgeschakeld omdat het eerste element in de checkedItems array is vals, enzovoorts. Als het eerste element in de checkedItems In plaats daarvan was array dus waar "Dark Knight" zou worden gecontroleerd.
Merk op dat deze array checkedItems wordt bijgewerkt wanneer we een weergegeven item selecteren of erop klikken, bijvoorbeeld als de gebruiker zou moeten selecteren "The Shawshank Redemption", roeping checkedItems [1] zou terugbrengen waar.
De laatste parameter accepteert een instantie van OnMultiChoiceClickListener. Hier creëren we eenvoudig een anonieme klasse en negeren bij klikken(). We krijgen een exemplaar van het getoonde dialoogvenster in de eerste parameter. In de tweede parameter krijgen we de index van het item dat is geselecteerd. Ten slotte ontdekken we in de laatste parameter of het geselecteerde item al dan niet is aangevinkt.
In een dialoogvenster met één keuze kan, in tegenstelling tot het meerkeuze dialoogvenster, slechts één item worden geselecteerd.
String [] singleChoiceItems = getResources (). GetStringArray (R.array.dialog_single_choice_array); int itemSelected = 0; nieuwe AlertDialog.Builder (this) .setTitle ("Selecteer uw geslacht") .setSingleChoiceItems (singleChoiceItems, itemSelected, new DialogInterface.OnClickListener () @Override public void onClick (DialogInterface dialogInterface, int selectedIndex) ) .setPositiveButton (" Ok ", null) .setNegativeButton (" Cancel ", null) .show ();Om een enkelvoudige keuzedialoog te maken, roepen we eenvoudigweg het setSingleChoiceItems () zetter op het AlertDialog.Builder aanleg. Binnen deze methode slagen we ook voor een reeks van het type Draad als de eerste parameter. Dit is de array die we hebben gepasseerd en die zich bevindt in het arrays-bronbestand: /values/arrays.xml.
- Mannetje
- Vrouw
- anderen
De tweede parameter van de setSingleChoiceItems () wordt gebruikt om te bepalen welk item wordt gecontroleerd. De laatste parameter in bij klikken() geeft ons de index van het item dat is geselecteerd, bijvoorbeeld het selecteren van Vrouw item, de waarde van selectedIndex zal zijn 1.
Dit is een dialoogvensterkiezer die wordt gebruikt om een enkele datum te selecteren.
Om te beginnen maken we een Kalender veldinstantie in de Hoofdactiviteit en initialiseer het.
public class MainActivity breidt AppCompatActivity uit Calendar mCalendar = Calendar.getInstance (); // ...
Hier hebben we gebeld Calendar.getInstance () om de huidige tijd (in de standaardtijdzone) te krijgen en stel deze in op de mCalendar veld-.
DatePickerDialog datePickerDialog = new DatePickerDialog (this, new DatePickerDialog.OnDateSetListener () @Override public void onDateSet (DatePicker-weergave, int jaar, int monthOfYear, int dayOfMonth) mCalendar.set (Calendar.YEAR, year); mCalendar.set (Calendar .MONTH, monthOfYear); mCalendar.set (Calendar.DAY_OF_MONTH, dayOfMonth); String date = DateFormat.getDateInstance (DateFormat.MEDIUM) .format (calendar.getTime ()); Log.d ("MainActivity", "Selected date is "+ datum);, mCalendar.get (Calendar.YEAR), mCalendar.get (Calendar.MONTH), mCalendar.get (Calendar.DAY_OF_MONTH)); datePickerDialog.show ();Om een datumkiezer-dialoogvenster weer te geven, maken we een exemplaar van de DatePickerDialog. Hier is de uitleg van de parameterdefinities bij het maken van een exemplaar van dit type.
Activiteit, je gebruikt deze, terwijl in een Fragment, je belt getActivity (). OnDateSetListener. Deze luisteraar onDateSet () wordt aangeroepen wanneer de gebruiker de datum instelt. Binnen deze methode krijgen we het geselecteerde jaar, de geselecteerde maand van het jaar en ook de geselecteerde dag van de maand. 0-11). 1-31). Ten slotte noemen we het laten zien() methode van de DatePickerDialog bijvoorbeeld om het op het huidige scherm weer te geven.
Het is vrij eenvoudig om het thema van de datumkiezer aan te passen (vergelijkbaar met wat we hebben gedaan met het waarschuwingsvenster).
In het kort: u maakt een aangepast tekenbaar, maakt een aangepaste stijl of thema en past dat thema toe tijdens het maken van een DatePickerDialog bijvoorbeeld in de tweede parameter.
DatePickerDialog datePickerDialog = new DatePickerDialog (this, R.style.MyCustomDialogTheme, listener, 2017, 26, 11);
Het dialoogvenster van de tijdkiezer geeft de gebruiker de mogelijkheid om een tijdstip te kiezen en past zich aan aan de voorkeurstijdinstelling van de gebruiker, dat wil zeggen het 12-uurs of 24-uurs formaat.
Zoals je kunt zien in de onderstaande code, creëer je een TimePickerDialog lijkt veel op het maken van een DatePickerDialog. Bij het maken van een exemplaar van de TimePickerDialog, we geven de volgende parameters door:
OnTimeSetListener instantie die als luisteraar dient.TimePickerDialog timePickerDialog = new TimePickerDialog (this, new TimePickerDialog.OnTimeSetListener () @Override public void onTimeSet (TimePicker timePicker, int hourOfDay, int minuut) mCalendar.set (Calendar.HOUR_OF_DAY, hourOfDay); mCalendar.set (Calendar.MINUTE, minuut); String time = DateFormat.getTimeInstance (DateFormat.SHORT) .format (calendar.getTime ()); Log.d ("MainActivity", "Geselecteerde tijd is" + tijd);, mCalendar.get (Agenda. HOUR_OF_DAY), calendar.get (Calendar.MINUTE), true); timePickerDialog.show ();De onTimeSet () methode wordt aangeroepen elke keer dat de gebruiker de tijd heeft geselecteerd. Binnen deze methode krijgen we een exemplaar van de TimePicker, het geselecteerde uur van de gekozen dag, en ook de geselecteerde minuut.
Om dit dialoogvenster weer te geven, bellen we nog steeds het laten zien() methode.
De tijdkiezer kan op dezelfde manier worden gestileerd als de datumkiezer.
Volgens de officiële documentatie van Google-materiaalontwerp:
Onderste bladen schuiven omhoog vanaf de onderkant van het scherm om meer inhoud te tonen.
Als u het onderste werkbladdialoogvenster wilt gebruiken, moet u het ontwerpondersteuningsartefact importeren, dus bezoek uw app-modules build.gradle bestand om het te importeren.
afhankelijkheden implementatie 'com.android.support:appcompat-v7:26.1.0' implementatie 'com.android.support:design:26.1.0'
Zorg ervoor dat de activiteit of het fragment voor het onderste werkbladdialoogvenster verschijnt: de bovenliggende lay-out is de CoordinatorLayout.
Hier hebben we ook een FrameLayout dat zou dienen als een container voor onze onderste laag. Observeer dat een van deze FrameLayoutzijn attributen is app: layout_behavior, waarvan de waarde een speciale tekenreeksbron is waarnaar wordt verwezen android.support.design.widget.BottomSheetBehavior. Dit zal ons in staat stellen FrameLayout verschijnen als een onderste blad. Let op: als u dit kenmerk niet opneemt, loopt uw app vast.
public class MainActivity breidt AppCompatActivity uit // ... // ... private BottomSheetDialog mBottomSheetDialog; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // ... Bekijk bottomSheet = findViewById (R.id.framelayout_bottom_sheet);
Hier hebben we een voorbeeld van verklaard BottomSheetDialog als een veld voor onze MainActivity.java en initialiseerde het in de onCreate () methode van onze activiteit.
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 (View view) mBottomSheetDialog.dismiss ();); (bottomSheetLayout.findViewById (R.id.button_ok)). setOnClickListener (nieuwe View.OnClickListener () @Override public void onClick (View v) Toast.makeText (getApplicationContext (), "Ok button clicked", Toast.LENGTH_SHORT) .laten zien(); ); mBottomSheetDialog = new BottomSheetDialog (this); mBottomSheetDialog.setContentView (bottomSheetLayout); mBottomSheetDialog.show ();
In de voorgaande code hebben we onze lay-out van het onderste blad opgehoogd R.layout.bottom_sheet_dialog. We hebben luisteraars ingesteld voor de annuleren en OK knoppen in de bottom_sheet_dialog.xml. Wanneer de annuleren knop wordt geklikt, we sluiten gewoon het dialoogvenster af.
Vervolgens hebben we onze geïnitialiseerd mBottomSheetDialog veld en stel de weergave in met setContentView (). Ten slotte noemen we het laten zien() methode om het op het scherm weer te geven.
Hier is mijn bottom_sheet_dialog.xml:
Zorg ervoor dat je Hoe gebruik je onderste bladen met de Design Support Library van Paul Trebilcox-Ruiz hier op Envato Tuts + om meer te leren over botttom sheets.
Volgens de officiële documentatie van Google-materiaalontwerp:
In dialogen op volledig scherm worden een reeks taken (zoals het maken van een agenda-item) gegroepeerd voordat ze kunnen worden vastgelegd of weggegooid. Geen selecties worden opgeslagen totdat "Opslaan" is aangeraakt. Door de "X" aan te raken worden alle wijzigingen verwijderd en wordt het dialoogvenster afgesloten.
Laten we nu kijken hoe we een dialoogvenster op volledig scherm kunnen maken. Zorg er eerst voor dat u het vof-artefact voor Android-ondersteuning opneemt in de module van uw app build.gradle. Dit is vereist om Android 4.0 (API level 14) en hoger te ondersteunen.
implementatie 'com.android.support:support-v4:26.1.0'
Vervolgens maken we een FullscreenDialogFragment dat verlengt de DialogFragment superklasse.
public class FullscreenDialogFragment breidt DialogFragment uit @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 (View v) dismiss ();); return rootView; @NonNull @Override public Dialog onCreateDialog (Bundle savedInstanceState) Dialog dialog = super.onCreateDialog (savedInstanceState); dialog.requestWindowFeature (Window.FEATURE_NO_TITLE); terugkeer dialoog;
Hier overschrijven we de onCreateView () (net zoals we zouden doen met een gewoon iemand Fragment). Binnen deze methode blazen we gewoon op en retourneren we de lay-out (R.layout.full_screen_dialog) die zal dienen als de aangepaste weergave voor het dialoogvenster. We hebben een OnClickListener op de ImageButton (R.id.button_close) waarmee het dialoogvenster wordt gesloten wanneer erop wordt geklikt.
We negeren ook onCreateDialog () en een terugkeer dialoog. Binnen deze methode kun je ook een AlertDialog gemaakt met behulp van een AlertDialog.Builder.
Onze R.layout.full_screen_dialog bestaat uit een ImageButton, een Knop, en een beetje Tekstweergave labels:
In de ImageButton widget, ziet u een attribuut app: srcCompat die verwijst naar een gebruik VectorDrawable (@ Betekenbare / ic_close). Deze gewoonte VectorDrawable maakt de X knop, die het schermvullende dialoogvenster sluit wanneer erop wordt getikt.
Om dit te gebruiken app: srcCompat attribuut, zorg ervoor dat u het opneemt in uw build.gradle het dossier. Configureer vervolgens uw app om vectorondersteuningsbibliotheken te gebruiken en voeg de vectorDrawables element voor uw build.gradle bestand in de app-module.
android defaultConfig vectorDrawables.useSupportLibrary = true
We hebben dit gedaan om alle Android-platformversies terug te ondersteunen naar Android 2.1 (API-niveau 7+).
Ten slotte, om het te laten zien FullscreenDialogFragment, we gebruiken gewoon de FragmentTransaction om ons fragment toe te voegen aan de gebruikersinterface.
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 ();
Houd er rekening mee dat alle hier besproken dialogen, met uitzondering van het dialoogvenster op het volledige scherm, automatisch worden gesloten wanneer de gebruiker de schermoriëntatie van het Android-apparaat wijzigt, van portret naar liggend (of omgekeerd). Dit komt omdat het Android-systeem het. Heeft vernietigd en opnieuw gemaakt Activiteit om in de nieuwe oriëntatie te passen.
Voor ons om de dialoog over veranderingen in schermoriëntatie te ondersteunen, moeten we een Fragment dat verlengt de DialogFragment superklasse (net als bij het voorbeeld op het volledige scherm).
Laten we een eenvoudig voorbeeld bekijken voor een waarschuwingsdialoog.
public class AlertDialogFragment breidt DialogFragment-implementaties uit DialogInterface.OnClickListener @Override public Dialog onCreateDialog (Bundle savedInstanceState) AlertDialog.Builder builder = new AlertDialog.Builder (getActivity ()); return (builder.setTitle ("Activeer superkrachten?"). setMessage ("Door superkrachten te activeren, heb je meer mogelijkheden om de wereld te redden.") .setPositiveButton ("Activate", this) .setNegativeButton ("Cancel", this ) .create ()); @Override public void onCancel (dialoogvenster DialogInterface) super.onCancel (dialoogvenster); @Override public void onDismiss (DialogInterface-dialoogvenster) super.onDismiss (dialoogvenster); @Override public void onClick (dialoogvenster DialogInterface, int which) Toast.makeText (getActivity (), "which is" + which, Toast.LENGTH_LONG) .show (); Hier hebben we een klasse gemaakt die het DialogFragment en implementeert ook de DialogInterface.OnClickListener. Omdat we deze luisteraar hebben geïmplementeerd, moeten we de bij klikken() methode. Merk op dat als we op de positieve of negatieve knop tikken, dit bij klikken() methode wordt aangeroepen.
In onze onCreateDialog (), we maken en retourneren een instantie van AlertDialog.
We hebben ook overschreven:
onCancel (): dit wordt aangeroepen als de gebruiker op de TERUG om het dialoogvenster te verlaten. onDismiss (): dit wordt aangeroepen wanneer het dialoogvenster om welke reden dan ook wordt uitgeschakeld (TERUG of een klik op de knop). Om dit dialoogvenster te laten zien, bellen we gewoon naar laten zien() methode op een instantie van onze AlertDialogFragment.
nieuwe AlertDialogFragment (). show (getSupportFragmentManager (), "alertdialog_sample");
De eerste parameter is een instantie van de FragmentManager. De tweede parameter is een tag die kan worden gebruikt om dit fragment later opnieuw op te halen uit de FragmentManager via findFragmentByTag ().
Als u de richting van het apparaat verandert van staand in liggend (of andersom), wordt het waarschu
