iOS SDK Arbeider med UIAlertView og UIAlertViewDelegate

I denne opplæringen vil du bli introdusert til en av de mest brukte Cocoa-Touch klassene: UIAlertView. Med denne klassen kan du raskt varsle brukere om viktig eller presserende søknadsinformasjon. Du kan også tvinge tilbakemeldinger fra brukere ved å kombinere UIAlertView-klassen med UIAlertViewDelegate-protokollen. Les videre for å lære hvordan!

Trinn 1: Prosjektoppsett

Opprett et nytt Xcode-prosjekt ved hjelp av "Single View Application" -malen.

Navngi søknaden "AlertDemo" og sett inn din egen bedriftsidentifikator eller bruk "com.mobiletuts.alertdemo" hvis du ikke har en ennå. Sett "iPhone" for enhetens familie og hold standardkontrollene. Når du er klar, klikker du Neste.

Velg et sted på harddisken for å lagre prosjektet og klikk deretter "Lagre".

Etter å ha opprettet prosjektet, utvider du mappen Støttefiler i Prosjektnavigatorpanelet til venstre for Xcode-vinduet. CTRL + Klikk (eller høyreklikk) i mappen Støttefiler og velg Legg til> Ny gruppe. Navngi den nye gruppen "bilder", da dette er hvor vi skal lagre grafikken for vår søknad.

Last ned prosjektressursfilen som er vedlagt denne opplæringen, og åpne mappen "bilder". Dra og slipp alle bildene til «bild» -gruppen du nettopp har opprettet. Husk å sjekke "Kopier elementer til destinasjonsgruppens mappe (hvis nødvendig)" da dette vil sikre at ressursene faktisk kopieres inn i prosjektet ditt og ikke bare kobles til som referanser. Oppsettet ditt i Xcode skal nå se ut som dette:

Trinn 2: Oppsett grensesnittet

Finn MainStoryboard.storyboard filen i Project Navigator og velg den. Du har nettopp åpnet storyboardet for prosjektet, som bør bestå av en enkelt scene, eller View Controller, som vi kan endre for å opprette grensesnittet for søknaden.

Når Storyboard er åpent, skal Xcode-grensesnittet nå vise objektbiblioteket nederst til høyre. Bruk søkeboks for objektbibliotek for å finne en UIImageView gjenstand. Plasser bildeobjektet midt på skjermen, og endre størrelsen manuelt for å fylle visningen. Deretter finner du bilde feltet i attributter inspektøren (attributt inspektøren skal være i øverste høyre del av Xcode). Angi verdien for bildefeltet til "background.png". Du bør nå ha en fin stålstruktur som fyller visningskontrollen.

Bruk objektbiblioteket igjen, finn en UIButton objekt og dra deretter den knappen på scenen. Attributtinspektøren skal nå vise informasjon for knappobjektet. Sett type rullegardinfelt til "tilpasset". Sett deretter inn bilde feltet til "button.png". Du bør nå se knappbildet på scenebeskrivelsen, men det ser sannsynligvis ikke riktig ut. Med knappobjektet valgt, må du velge Editor> Størrelse for å tilpasse innhold for å automatisk endre størrelsen på knappens grenser til størrelsen på bildeinnholdet. Deretter senterer du knappen på skjermen ved å dra den mot midten.

Du bør nå ha knappen riktig konfigurert for standardtilstanden, men vi vil vise et annet bilde når du trykker på knappen. Endre state config slipp ned verdien til "uthevet". Endringene du lager i attributter inspektøren nå, gjelder bare for den uthevede tilstanden. Sett bilde attributt for den uthevede knappen til button-pressed.png. Din Storyboard skal nå se slik ut:

Dette er en god tid å teste fremdriften din, så lagre arbeidet ditt ( Fil> Lagre) og kjør prosjektet i iPhone-simulatoren (Produkt> Kjør). Du bør nå kunne trykke på knappen og se bildeendringen i simulatoren.

Trinn 3: Opprett varselmetoden

Når prosjektlisten fortsatt er åpen, klikker du på knappen "Vis assistenteditoren" øverst til høyre i Xcode-vinduet for å vise kildekoden for ViewController.h. Fra dette perspektivet, hold nede både Control (CTRL) -knappen og museknappen (venstre museknapp hvis musen har to) over knappobjektet i Storyboard-scenen, og dra deretter inn kildekodeoppføringen, like over @slutt linje.

En ny dialogboks åpnes som automatisk oppretter en forbindelse mellom grensesnittelementet og visningskontrollerklassen. Fra denne popupen kan du opprette utsalgssteder eller handlinger. Outlets brukes til å skape egenskaper som refererer til grensesnittbyggerobjekter, og handlinger brukes til å koble til metoder til IB-objekthandlinger.

Velg "Action" fra forbindelse rul ned, skriv inn "showMessage" som tilkoblingsnavnet, og klikk deretter Koble til. Interface Builder burde nettopp lagt til følgende linje til din ViewController.h fil:

- (IBAction) showMessage: (id) sender;

I tillegg, ViewController.m bør nå ha denne metoden definisjonen:

- (IBAction) showMessage: (id) avsender 

Når brukeren tapper på knappen, vil koden i denne metoden bli utført. Det betyr at vi endelig er klare til å grave inn i koden for å vise en UIAlertView og svare på sine delegerte metoder!

Trinn 4: Opprett en grunnleggende varselmelding

Nå som du har oppsettet for prosjektmal, er du klar til å bruke UIAlertView til å utløse meldingen når den egendefinerte knappen er trykket. Åpne ViewController.m fil, og skriv inn følgende i Vis melding Metode du opprettet tidligere:

- (IBAction) showMessage: (id) avsender UIAlertView * message = [[UIAlertView allokering] initWithTitle: @ "Hello World!" melding: @ "Dette er din første UIAlertview-melding." delegere: null avbrytButtonTitle: @ "OK" otherButtonTitles: null]; [meldingsshow]; 

Over du lager og initialiserer din forekomst av UIAlertView-klassen. De initWithTitle: og budskap: parametere er selvforklarende og forstås lett etter at et varsel vises. De delegat: parameter refererer til hvilken klasse som skal motta delegerte varslingsmeldinger for UIAlertViewDelegate (demonstrert senere). De Avbryt-: parameteren er standardknappen som skal vises sammen med varselet, og otherButtonTitles: parameter brukes til å vise en eller flere tilleggsalternativer som brukeren kan velge.

Etter å ha opprettet et varselobjekt, vil [meldingsvisning] samtale viser faktisk vår melding ved å puke vår nye UIAlertView på skjermen.

Hvis du bygger og feilsøker applikasjonen nå, vil du se at du trykker på knappens resultater når meldingen blir vist!

MERK: Hvis det ikke skjer noe når du trykker på knappen i simulatoren, må du sørge for at du faktisk har lagret endringene du har gjort i Storyboard-filen, og at handlingen "Touch up inside" er koblet til Vis melding: metode.

Trinn 5: Legg til knapper i varselet

Legge til flere knapper til en UIAlertView kan gjøres enten når du initialiserer objektet ditt eller når som helst. For å legge til knapper ved initialiseringstid i koden ovenfor, ville du bare endre Vis melding: metode slik:

 UIAlertView * message = [[UIAlertView allokering] initWithTitle: @ "Hello World!" melding: @ "Dette er din første UIAlertview-melding." delegere: null avbrytButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", null); [meldingsshow];

Hvis du vil legge til knapper etter at du har initialisert varselet ditt, vil du bruke følgende kodelinjer:

 UIAlertView * message = [[UIAlertView allokering] initWithTitle: @ "Hello World!" melding: @ "Dette er din første UIAlertview-melding." delegere: null avbrytButtonTitle: @ "Button 1" otherButtonTitles: null]; [melding addButtonWithTitle: @ "Button 2"]; [melding addButtonWithTitle: @ "Button 3"]; [meldingsshow];

Begge disse kodefragmentene er ekvivalente, men ved bruk av addButtonWithTitle: Metoden gjør at det er enkelt å betinget legge til knapper til varselene dine, kanskje ved å pakke dem inn hvis uttalelser.

Trinn 6: Svar på Alert Button Selection

Bytt tilbake til ViewController.h og endre klassedeklarasjonslinjen for å lese som følger:

@interface ViewController: UIViewController  

Dette gjør at klassen din kan svare på UIAlertViewDelegate protokollmetoder. For å svare på knappekraner i vår UIAlertView, vi vil bruke - alertView: clickedButtonAtIndex: protokollmetode. Tilbake i ViewController.m, legg til dette i klassen din:

- (void) alertView: (UIAlertView *) alertView klikketButtonAtIndex: (NSInteger) buttonIndex 

Som du kan se fra metodenavnet, aksepterer denne metoden en peker til UIAlertView objekt vi opprettet tidligere og knappindeksen som ble valgt av brukeren. Du kan bli fristet til å bare bytte betinget på knappenIndex-variabel for å bestemme hvilken knapp som ble valgt av brukeren, men hva ville skje hvis du var betinget å legge til knapper i varselet? I dette tilfellet kan ikke knappen med indeks 1 være den du vil ha. En mye bedre måte er å teste mot tittelen på knappen og deretter handle slik som:

- (void) alertView: (UIAlertView *) alertView klikketButtonAtIndex: (NSInteger) buttonIndex NSString * title = [alertView buttonTitleAtIndex: buttonIndex]; hvis ([tittelen erEqualToString: @ "Button 1"]) NSLog (@ "Button 1 ble valgt.");  annet hvis ([tittelen erEqualToString: @ "Button 2"]) NSLog (@ "Button 2 ble valgt.");  ellers hvis ([tittelen erEqualToString: @ "Button 3"]) NSLog (@ "Button 3 ble valgt."); 

Det er enda en tweak som vi må gjøre før dette vil fungere. Gå tilbake til UIAlertView-initialiseringsoppgaven, og oppdater delegat: parameter for å godta selv- søkeord i stedet for nil. Etter dette må kodeblokken se slik ut:

 UIAlertView * message = [[UIAlertView allokering] initWithTitle: @ "Hello World!" melding: @ "Dette er din første UIAlertview-melding." delegere: self cancellButtonTitle: @ "Button 1" otherButtonTitles: @ "Button 2", @ "Button 3", null); [meldingsshow];

Hvis du bygger og feilsøker applikasjonen nå, bør du kunne velge flere knapper og se en setning utskrift til konsollen når en knapp er valgt (trenger hjelp med å finne konsollen? Velg Vis> Feilsøkingsområde> Aktiver konsoll fra Xcode-menyen).

Dette er hva den siste varslingsvisningen skal se ut i simulatoren:

Konklusjon

Dette avslutter vår innledende veiledning på UIAlertView. I tillegg til det vi dekket i dag, er det mange andre alternativer som tilbys av UIAlertViewDelegate protokoll og, med utgivelsen av iOS 5, noen ekstra måter å bruke UIAlertView. Hvis du vil se en ekstra opplæring i disse avanserte varselvisningstemaene, vennligst gi meg beskjed i kommentarfeltet nedenfor! Du er også velkommen til å sende inn spørsmål eller kommentarer via enten min personlige twitter @markhammonds eller den offisielle Mobiletuts + twitter konto @envatomobile.