Share
Materialet design team på Google definerer funksjonaliteten til dialoger i Android som følger:
Dialogger informerer brukerne om en bestemt oppgave og kan inneholde kritisk informasjon, kreve avgjørelser eller involvere flere oppgaver.
Nå har du forstått hvilke dialoger som brukes, det er nå tid å lære å vise dem. I denne opplæringen tar jeg deg gjennom prosessen med å vise forskjellige typer materielle designdialoger i Android. Vi vil dekke følgende dialoger:
Et prøveprosjekt for denne opplæringen finner du på vår GitHub repo, slik at du enkelt kan følge med.
Ifølge den offisielle dokumentasjonen for Google-materiale:
Varsler er presserende forstyrrelser, som krever bekreftelse, som informerer brukeren om en situasjon.
Pass på at du inkluderer det siste appcompat artefakt i din build.gradle fil (app modul). Minimumstøttet API-nivå er Android 4.0 (API nivå 14).
avhengigheter implementering 'com.android.support:appcompat-v7:26.1.0'
Det neste er å lage en forekomst av AlertDialog.Builder.
Accentsconagua
ny AlertDialog.Builder (this) .setTitle ("Nuke planet Jupiter?") .setMessage ("Merk at nuking planet Jupiter vil ødelegge alt der inne.") .setPositiveButton ("Nuke", ny DialogInterface.OnClickListener () @Override Offentlig ugyldig onClick (DialogInterface dialog, int som) Log.d ("MainActivity", "Sende atombomber til Jupiter");) .setNegativeButton ("Abort", ny DialogInterface.OnClickListener () @Overtrid offentlig tomgang påClick (DialogInterface dialog, int som) Log.d ("MainActivity", "Aborting mission ...");) .show ();Her opprettet vi en forekomst av AlertDialog.Builder og begynte å konfigurere forekomsten ved å ringe noen setter metoder på den. Legg merke til at vi bruker AlertDialog fra Android support artefakt.
importer android.support.v7.app.AlertDialog;
Her er detaljene til settermetodene vi ringte på AlertDialog.Builder forekomst.
setTitle (): sett teksten som skal vises i tittellinjen i dialogboksen. setMessage (): angi meldingen som skal vises i dialogboksen. setPositiveButton (): Det første argumentet som følger med, er teksten som skal vises i den positive knappen, mens det andre argumentet heter lytteren når den positive knappen klikkes. setNegativeButton (): Det første argumentet som følger med, er at teksten skal vises i negativknappen, mens det andre argumentet heter lytteren når den negative knappen klikkes. Noter det AlertDialog.Builder har en setview () å angi tilpasset layoutvisning til den.
For å vise dialogen på skjermen, bruker vi bare vise fram().
Det kalles en annen setter-metode setNeutralButton (). Å ringe denne metoden vil legge til en annen knapp på venstre side av dialogboksen. For å ringe denne metoden må vi passere en string som vil fungere som knappeteksten, og også en lytter som kalles når knappen er tappet.
ny AlertDialog.Builder (dette) // andre setter metoder .setNeutralButton ("Neutral", null) .show ()
Merk at ved å røre utenfor dialogboksen vil det automatisk avvises. For å unngå at det skjer, må du ringe setCanceledOnTouchOutside () på AlertDialog forekomst og pass falsk som et argument.
AlertDialog dialog = ny AlertDialog.Builder (dette) // etter å ha ringt setter metoder .create (); dialog.setCanceledOnTouchOutside (false); dialog.show ();
For ytterligere å hindre å avvise dialogboksen ved å trykke på TILBAKE knappen, må du ringe setCancelable () på AlertDialog forekomst og pass falsk til det som et argument.
Det er ganske enkelt å stillegge vår dialog. Vi lager bare en egendefinert stil i stiler.xml ressurs. Vær oppmerksom på at denne typen forelder er Theme.AppCompat.Light.Dialog.Alert. Med andre ord arver denne stilen noen stilattributter fra sin forelder.
Vi begynner å tilpasse dialogstilen ved å angi verdiene av attributter som skal brukes på dialogboksen, for eksempel kan vi endre dialogknappens farge for å være @android:farge/ holo_orange_dark og still inn dialogboksen bakgrunnen til en tilpasset trekkbar i vår trekkbare ressursmappe (android: windowBackground satt til @ Trekkbare / background_dialog).
Her er min background_dialog.xml ressursfilen.
Her opprettet vi en egendefinert InsetDrawable som tillater oss å legge inn innspill på hvilken som helst side av ShapeDrawable. Vi opprettet et rektangelform ved hjelp av android: form attributten til rektangel (andre mulige verdier er linje, oval, ringe). Vi har en barnetikett android: farge Attributt som angir hvilken farge du skal bruke. Til slutt ga vi vår tegning en grense ved å bruke
For å bruke denne stilen til dialogboksen, sender vi bare den egendefinerte stilen til den andre parameteren i AlertDialog.Builder konstruktør.
AlertDialog dialog = ny AlertDialog.Builder (dette, R.style.CustomDialogTheme)
I følge materiell design dokumentasjon:
Bekreftelsesdialoger krever at brukere eksplisitt bekrefter sitt valg før et valg er forpliktet. For eksempel kan brukere lytte til flere ringetoner, men bare gjøre et endelig valg ved å trykke på "OK".
Følgende forskjellige typer bekreftelsesdialogbokser er tilgjengelige:
Vi bruker en flervalgsdialog når vi vil at brukeren skal velge mer enn ett element i en dialogboks. I en flervalgsdialog vises en valgliste for brukeren å velge mellom.
String [] multiChoiceItems = getResources (). GetStringArray (R.array.dialog_multi_choice_array); siste boolske [] checkedItems = false, false, false, false; Ny AlertDialog.Builder (this) .setTitle ("Velg favorittfilmer") .setMultiChoiceItems (multiChoiceItems, checkedItems, new DialogInterface.OnMultiChoiceClickListener () @Override public void onClick (DialogInterface dialog, int indeks, boolean isChecked) Log.d ("MainActivity", "clicked item index er" + indeks);) .setPositiveButton ("Ok", null) .setNegativeButton ("Cancel", null) .show ();For å opprette en flervalgsdialog, ringer vi bare setMultiChoiceItems () setter metode på AlertDialog.Builder forekomst. Innenfor denne metoden passerer vi en Array av type string som den første parameteren. Her er mitt utvalg, plassert i arrays ressursfilen /values/arrays.xml.
- The Dark Knight
- The Shawshank Redemption
- Redd menig Ryan
- Stillheten av lam
Den andre parameteren til metoden setMultiChoiceItems () aksepterer en matrise som inneholder elementene som er merket. Verdien av hvert element i checkedItems array tilsvarer hver verdi i multiChoiceItems array. Vi brukte vårt checkedItems array (verdiene er alle falsk som standard) for å gjøre alle elementer ukontrollert som standard. Med andre ord, det første elementet "Mørk ridder" er ikke merket fordi det første elementet i checkedItems array er falsk, og så videre. Hvis det første elementet i checkedItems array var sant i stedet da "Mørk ridder" ville bli sjekket.
Merk at denne gruppen checkedItems oppdateres når vi velger eller klikker på et element som vises, for eksempel hvis brukeren skal velge "The Shawshank Redemption", ringer checkedItems [1] ville returnere ekte.
Den siste parameteren godtar en forekomst av OnMultiChoiceClickListener. Her oppretter vi bare en anonym klasse og overstyrer ved trykk(). Vi får en forekomst av den viste dialogboksen i den første parameteren. I den andre parameteren får vi indeksen for elementet som ble valgt. Endelig finner vi i den siste parameteren om det valgte elementet ble sjekket eller ikke.
I en enkelt valgdialog, i motsetning til dialogboksen med flere valg, kan bare ett element velges.
String [] singleChoiceItems = getResources (). GetStringArray (R.array.dialog_single_choice_array); int itemSelected = 0; nye AlertDialog.Builder (this) .setTitle ("Velg kjønn") .setSingleChoiceItems (singleChoiceItems, itemSelected, new DialogInterface.OnClickListener () @Override public void onClick (DialogInterface dialogInterface, int selectedIndex) ) .setPositiveButton (" Ok ", null) .setNegativeButton (" Cancel ", null) .show ();For å opprette en enkeltvalgsdialog ber vi bare på setSingleChoiceItems () setter på AlertDialog.Builder forekomst. Innenfor denne metoden passerer vi også en Array av type string som den første parameteren. Her er den rekkefølgen vi passerte, som ligger i arrays ressursfilen: /values/arrays.xml.
- mann
- Hunn
- andre
Den andre parameteren til setSingleChoiceItems () brukes til å bestemme hvilket element som er merket. Den siste parameteren i ved trykk() gir oss indeksen for elementet som ble valgt, for eksempel ved å velge Hunn element, verdien av selectedIndex vil være 1.
Dette er en dialogväljare som brukes til å velge en enkelt dato.
For å starte, oppretter vi en Kalender felt forekomst i Hoved aktivitet og initialiser den.
offentlig klasse MainActivity utvider AppCompatActivity Kalender mCalendar = Calendar.getInstance (); // ...
Her ringte vi Calendar.getInstance () for å få den nåværende tiden (i standard tidssone) og sett den til mCalendar felt.
DatePickerDialog datePickerDialog = new DatePickerDialog (denne, nye DatePickerDialog.OnDateSetListener () @Override public void onDateSet (DatePicker visning, int år, int månedOfYear, int dayOfMonth) mCalendar.set (Kalender.YEAR, år); mCalendar.set .MONTH, monthOfYear); mCalendar.set (Kalender.DAY_OF_MONTH, dayOfMonth); String date = DateFormat.getDateInstance (DateFormat.MEDIUM) .format (calendar.getTime ()); Log.d ("MainActivity"; "Utvalgt dato er "+ dato);, mCalendar.get (Calendar.YEAR), mCalendar.get (Calendar.MONTH), mCalendar.get (Kalender.DAY_OF_MONTH)); datePickerDialog.show ();For å vise en date picker dialog, oppretter vi en forekomst av DatePickerDialog. Her er forklaringen av parameterdefinisjonene når du oppretter en forekomst av denne typen.
Aktivitet, du bruker dette, mens i a Fragment, du ringer getActivity (). OnDateSetListener. Denne lytteren onDateSet () kalles når brukeren angir datoen. Innenfor denne metoden får vi det valgte året, den valgte måneden på året, og den valgte dagen i måneden. 0-11). 1-31). Til slutt kaller vi vise fram() metode av DatePickerDialog eksempel for å vise det på den nåværende skjermen.
Det er ganske enkelt å tilpasse temaet for datautvalgsdialogen (ligner på det vi gjorde i varslingsdialogen).
Kort fortalt lager du en egendefinert tegningsbar, lager en egendefinert stil eller et tema, og bruk deretter temaet når du lager en DatePickerDialog forekomst i den andre parameteren.
DatePickerDialog datePickerDialog = ny DatePickerDialog (dette, R.style.MyCustomDialogTheme, lytter, 2017, 26, 11);
Tidsvalgdialogen lar brukeren velge en tid, og tilpasser seg brukerens foretrukne tidsinnstilling, dvs. 12-timers eller 24-timers format.
Som du kan se i koden under, oppretter du en TimePickerDialog er ganske likt å skape en DatePickerDialog. Når du lager en forekomst av TimePickerDialog, vi passerer i følgende parametere:
OnTimeSetListener eksempel som fungerer som lytter.TimePickerDialog timePickerDialog = ny TimePickerDialog (denne, nye TimePickerDialog.OnTimeSetListener () @Override public void onTimeSet (TimePicker timePicker, int timeOfDay, int minutter) mCalendar.set (Kalender.HOUR_OF_DAY, timeOfDay); mCalendar.set (Calendar.MINUTE, minutt); Stringtid = DateFormat.getTimeInstance (DateFormat.SHORT) .format (calendar.getTime ()); Log.d ("MainActivity"; "Valgt tid er" + tid);, mCalendar.get (Kalender. HOUR_OF_DAY), calendar.get (Calendar.MINUTE), true); timePickerDialog.show ();De onTimeSet () Metoden kalles hver gang brukeren har valgt tid. Innenfor denne metoden får vi en forekomst av TimePicker, valgt tid for dagen valgt, og også det valgte minuttet.
For å vise denne dialogen, kalder vi fortsatt vise fram() metode.
Tidsvalgeren kan styles på samme måte som datoperatørdialogen.
Ifølge den offisielle dokumentasjonen for Google-materiale:
Bunnarkene glir opp fra bunnen av skjermen for å avsløre mer innhold.
For å begynne å bruke dialogboksen nederst ark, må du importere artefakt for designstøtte, så besøk appmodulets build.gradle fil for å importere den.
avhengigheter implementering 'com.android.support:appcompat-v7:26.1.0' implementering 'com.android.support:design:26.1.0'
Sørg for at aktiviteten eller fragmentet for dialogboksen med det nederste arket dukker opp - dens overordnede layout er CoordinatorLayout.
Her har vi også a FrameLayout det ville tjene som en beholder for vårt nederste ark. Vær oppmerksom på at en av dette FrameLayouts egenskaper er app: layout_behavior, hvis verdi er en spesiell streng ressurs som kartlegger android.support.design.widget.BottomSheetBehavior. Dette vil gjøre det mulig for vår FrameLayout å vises som et bunnark. Merk at hvis du ikke inkluderer dette attributtet, vil appen din krasje.
offentlig klasse MainActivity utvider AppCompatActivity // ... // ... private BottomSheetDialog mBottomSheetDialog; @Override protected void onCreate (Bundle savedInstanceState) super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); // ... Se bottomSheet = findViewById (R.id.framelayout_bottom_sheet);
Her erklærte vi en forekomst av BottomSheetDialog som et felt til vår MainActivity.java og initialiserte den i onCreate () metode for vår aktivitet.
endelig Vis bottomSheetLayout = getLayoutInflater (). oppblås (R.layout.bottom_sheet_dialog, null); (bottomSheetLayout.findViewById (R.id.button_close)). setOnClickListener (ny View.OnClickListener () @Override public void onClick (Vis visning) mBottomSheetDialog.dismiss ();); (bottomSheetLayout.findViewById (R.id.button_ok)). setOnClickListener (new View.OnClickListener () @Override public void onClick (Vis v) Toast.makeText (getApplicationContext (), "Ok-knappen klikket", Toast.LENGTH_SHORT) .vise fram(); ); mBottomSheetDialog = ny BottomSheetDialog (dette); mBottomSheetDialog.setContentView (bottomSheetLayout); mBottomSheetDialog.show ();
I den forrige koden oppblåste vi vårt nederste arkoppsett R.layout.bottom_sheet_dialog. Vi satte lyttere på Avbryt og ok knapper i bottom_sheet_dialog.xml. Når Avbryt knappen klikkes, vi avviser bare dialogboksen.
Vi startet så vår mBottomSheetDialog feltet og sett visningen med setContentView (). Til slutt kaller vi vise fram() metode for å vise den på skjermen.
Her er min bottom_sheet_dialog.xml:
Sørg for at du sjekker ut Slik bruker du bunnark Med designstøttebiblioteket av Paul Trebilcox-Ruiz her på Envato Tuts + for å lære mer om bottenblader.
Ifølge den offisielle dokumentasjonen for Google-materiale:
Fullskjermdialoger grupperer en rekke oppgaver (for eksempel å opprette en kalenderoppføring) før de kan bli forpliktet eller kassert. Ingen valg lagres til "Lagre" berøres. Ved å trykke på "X" kasseres alle endringene og avslutter dialogen.
La oss nå se hvordan du lager en fullskjermdialogbok. Først må du sørge for at du inkluderer Android support v4 artefact i appens modul build.gradle. Dette kreves for å støtte Android 4.0 (API nivå 14) og høyere.
implementering 'com.android.support:support-v4:26.1.0'
Deretter skal vi opprette en FullscreenDialogFragment som strekker seg DialogFragment super klasse.
offentlig klasse FullscreenDialogFragment utvider DialogFragment @Override public View onCreateView (LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) Se rootView = inflater.inflate (R.layout.full_screen_dialog, container, false); (rootView.findViewById (R.id.button_close)). setOnClickListener (ny View.OnClickListener () @Override public void onClick (Vis v) dismiss ();); returnere rootView; @NonNull @Override public Dialog onCreateDialog (Bundle savedInstanceState) Dialog dialog = super.onCreateDialog (savedInstanceState); dialog.requestWindowFeature (Window.FEATURE_NO_TITLE); retur dialog;
Her tilsidesetter vi onCreateView () (akkurat som vi ville gjøre med en vanlig Fragment). Inne i denne metoden blåser vi bare opp og returnerer oppsettet (R.layout.full_screen_dialog) som vil fungere som egendefinert visning for dialogboksen. Vi satte en OnClickListener på ImageButton (R.id.button_close) som vil avvise dialogboksen når den klikkes.
Vi overstyrer også onCreateDialog () og returnere en Dialog. Innenfor denne metoden kan du også returnere en AlertDialog opprettet ved hjelp av en AlertDialog.Builder.
Våre R.layout.full_screen_dialog består av en ImageButton, en Knapp, og noe TextView etiketter:
I ImageButton widget, vil du se et attributt app: srcCompat som refererer til en egendefinert VectorDrawable (@ Trekkbare / ic_close). Denne egendefinerte VectorDrawable skaper X knappen, som lukker dialogboksen fullskjerm når den er tappet.
For å kunne bruke dette app: srcCompat attributt, sørg for at du inkluderer den i din build.gradle fil. Deretter konfigurerer du appen din til å bruke vektorstøttebiblioteker og legge til vectorDrawables element til din build.gradle filen i appmodulen.
android defaultConfig vectorDrawables.useSupportLibrary = true
Vi gjorde dette slik at vi kan støtte alle Android-plattformversjoner tilbake til Android 2.1 (API-nivå 7+).
Til slutt, for å vise FullscreenDialogFragment, vi bruker bare FragmentTransaction å legge til vårt fragment til brukergrensesnittet.
FragmentManager fragmentManager = getSupportFragmentManager (); FullscreenDialogFragment newFragment = nytt FullscreenDialogFragment (); FragmentTransaction transaction = fragmentManager.beginTransaction (); transaction.setTransition (FragmentTransaction.TRANSIT_FRAGMENT_OPEN); transaction.add (android.R.id.content, newFragment) .addToBackStack (null) .commit ();
Merk at alle dialogene som diskuteres her, bortsett fra fullskjermdialogboksen, blir avvist automatisk når brukeren endrer skjermretningen til Android-enheten - fra stående til liggende (eller omvendt). Dette skyldes at Android-systemet har ødelagt og gjenskapt Aktivitet slik at den passer til den nye orienteringen.
For at vi skal opprettholde dialogen over skjermretningsendringer, må vi opprette en Fragment som strekker seg DialogFragment super klasse (akkurat som vi gjorde for eksempel på fullskjermdialogen).
La oss se et enkelt eksempel på en varslingsdialog.
offentlig klasse AlertDialogFragment utvider DialogFragment implementerer DialogInterface.OnClickListener @Override public Dialog onCreateDialog (Bundle savedInstanceState) AlertDialog.Builder builder = ny AlertDialog.Builder (getActivity ()); setMessage ("Ved å aktivere supermakt, har du flere krefter for å redde verden.") .setPositiveButton ("Aktiver", dette) .setNegativeButton ("Cancel", dette ) .skape()); @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 som) Toast.makeText (getActivity (), "som er" + som, Toast.LENGTH_LONG) .show (); Her opprettet vi en klasse som strekker seg DialogFragment og implementerer også DialogInterface.OnClickListener. Fordi vi implementerte denne lytteren, må vi overstyre ved trykk() metode. Merk at hvis vi trykker på den positive eller negative knappen, dette ved trykk() Metoden vil bli påkalt.
Inne i vår onCreateDialog (), vi lager og returnerer en forekomst av AlertDialog.
Vi har også overstyrt:
onCancel (): dette kalles hvis brukeren trykker på TILBAKE knappen for å avslutte dialogboksen. onDismiss (): dette kalles når dialogen blir tvunget ut av en eller annen grunn (TILBAKE eller en knappeklikk). For å vise denne dialogen, ringer vi bare vise fram() metode på en forekomst av vår AlertDialogFragment.
nye AlertDialogFragment (). show (getSupportFragmentManager (), "alertdialog_sample");
Den første parameteren er en forekomst av FragmentManager. Den andre parameteren er en tag som kan brukes til å hente dette fragmentet igjen senere fra FragmentManager via findFragmentByTag ().
Nå, hvis du endrer enhetsretningen fra stående til liggende (eller omvendt), blir ikke varslingsdialogen avvist.
Du kan følge lignende trinn for de andre dialogtyper for å opprettholde dialogen under enhetsrotasjon. Du oppretter bare en Fragment som strekker seg DialogFragment super klasse, og du lager og returnerer den spesielle dialogen i onCreateDialog ().
Noen av dere har kanskje hørt om ProgressDialog. Dette viser bare en dialog med en fremdriftsindikator på den. Jeg har ikke tatt med det her, fordi ProgressDialog har blitt utdatert i API-nivå 26, fordi det kan føre til en dårlig brukeropplevelse for brukerne. Ifølge den offisielle dokumentasjonen:
ProgressDialoger en modal dialog, som hindrer brukeren i å interagere med appen. I stedet for å bruke denne klassen, bør du bruke en fremdriftsindikator somProgressBar, som kan legges inn i appens brukergrensesnitt. Alternativt kan du bruke et varsel for å informere brukeren om oppgavens fremdrift.
I denne opplæringen har du lært de forskjellige måtene å vise materielle designdialoger i en Android-app. Vi dekket følgende materielle dialogdialogtyper:
Du lærte også hvordan du oppretter en tilpasset stil for en dialog og gjør dialog overlevende orienteringskonfigurasjonsendringer mellom landskap og portrett ved hjelp av DialogFragment.
Det anbefales på det sterkeste at du sjekker ut de offisielle retningslinjene for materialdesign for dialoger for å lære å utforme og bruke dialoger i Android på riktig måte.
For å lære mer om koding for Android, sjekk ut noen av våre andre kurs og opplæringsprogrammer her på Envato Tuts+!
