Opprett en tilpasset Alert Controller med Swift

Hva du skal skape

Introduksjon

EN UIAlertController brukes til å vise en varselmelding i en app. For eksempel, hvis det oppstår en feil, kan varselet vise en beskrivelse og knapper for å foreta ytterligere tiltak. Du kan bruke varsler for å få brukerne til å logge på eller registrere seg, vise resultatene av en handling de har gjort, eller tilby noen flere innstillingsalternativer, for eksempel når du ikke har plass til ekstra knapper på en skjerm, men du trenger at brukere skal kunne å utføre flere handlinger på en bestemt gjenstand i appen.

Siden iOS 9 har Apple erstattet UIAlertView med UIAlertController. Du trenger ikke lenger å legge til UIAlertViewDelegate inn i klassen din, og er nå i stand til å stille ditt varsel som du ønsker. Du kan tilpasse tittel- og meldingsfonter, endre bakgrunnsfarge og legge til tekstfelt.For denne veiledningens skyld har vi opprettet en demo-app med tre knapper, og hver av dem vil brenne et annet tilpasset varsel. Du kan laste den ned fra opplæringen kilde repo på GitHub. La oss nå se hvor lett det er å bygge disse tilpassede varslene!

Alert med et tekstfelt

Det første varselet vi skal bygge har en Tekstfelt festet der du kan skrive inn alt du vil ha fra iOS-tastaturet. For å initialisere en UIAlertController, du må starte med disse tre linjene:

 la varsel = UIAlertController (tittel: "AlertController Tutorial", melding: "Send noe", preferredStyle: .alert)

I den første linjen setter vi en enkel streng som en tittel på varselet. I den andre linjen er meldingsstrengen som skal vises rett under tittelen. I den tredje linjen er varselens type satt til .varsling. (Et annet alternativ er .actionSheet, men du kan ikke tilpasse et handlingsbilde som du kan varsle.)

I en varslingsregulator defineres knapper som UIAlertAction elementer. Så vi skal lage en UIAlertAction, som vil bli den første knappen på undersiden av varselet vårt. 

 // Submit knapp la submitAction = UIAlertAction (tittel: "Send", stil: .default, handler: (handling) -> Gyldig inn // Få 1. TextFields tekst la textField = alert.textFields! [0] print (textField. tekst!))

Vi har kalt denne handlingen submitAction, sett tittelen til "Sende inn", gitt den standard stilen, og for sin håndterer, skrevet ut innholdet i et tekstfelt. Siden tekstfeltene i varselet har en indeks, har vi valgt den første på posisjon 0. Senere ser vi hvordan du legger til flere tekstfelter i et varsel.

Når du har tappet på Sende inn knappen i varselet, vil Xcode-konsollen skrive ut teksten du har skrevet inn og avvise varselet.

La oss lage en knapp for å bare skjule vårt varsel:

 // Avbryt-knappen la kansellere = UIAlertAction (tittel: "Avbryt", stil: .destructive, handler: (handling) -> Gyldig inn) 

Som du kan se, har denne handlingen ingen håndterer. Det er fordi vi vil avvise varselet og ikke utføre andre handlinger. Denne knappen vil vise en rød Avbryt tittel fordi vi har satt stilen som .destruktiv, som Apple API vil forstå.

Før du legger til disse to handlingene i varselet, må vi initialisere vårt tekstfelt:

// Legg til 1 textField og tilpass det alert.addTextField (textField: UITextField) i textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Skriv noe her" textField.clearButtonMode =. whileEditing

Hvis du er kjent med UITextFields, vil du gjenkjenne disse som standardattributtene som angir egenskaper som tastaturutseende og -type, autokorreksjonstype, plassholderbeskjed og sletteknapp. (Vi har satt klare knappen for å dukke opp når du begynner å skrive noe.)

Nå, la oss fullføre vårt varsel.

 // Legg til handlingsknapper og present Alert alert.addAction (submitAction) alert.addAction (avbryt) tilstede (varsel, animert: true, fullføring: null)

De UIAlertController håndterer ikke arrays av handlinger, så vi må legge dem en etter en. Til slutt presenterer vi varselet som vi ville noen annen kontroller - med nåværende() funksjon.

I vår demo-app har vi innebygd all koden ovenfor i en Knapp, så hvis du kjører appen og trykker på den, bør du se noe slikt:

Hvis du skriver noe i det tomme tekstfeltet og klikker Sende inn, Xcode-konsollen vil skrive ut den.

Alert med tre tekstfelt

La oss nå lage et nytt varsel med flere Tekstfelt å opprette en påloggingsprompt. Vi starter igjen med de tre linjene som initialiserer varselet vårt:

 la varsel = UIAlertController (tittel: "Innloggingseksempel", melding: "Sett inn brukernavn, passord og telefonnummer", preferredStyle: .alert)

Vi har fortsatt to knapper, en for å utføre en påloggingshandling og avbryt-knappen:

 // Logg inn knappen la loginAction = UIAlertAction (tittel: "Logg inn", stil: .default, handler: (handling) -> Gyldig inn // Få TextFields tekst la brukernavnTxt = alert.textFields! [0] la passordTxt = varsel. TextFields! [1] la phoneTxt = alert.textFields! [2] print ("USERNAME: \ (brukernavnTxt.text!) \ nPASSWORD: \ (passwordTxt.text!) \ nPHONE NO .: \ (phoneTxt.text!)" ))

Som du kan se, har vårt varsel tre tekstfelter. Disse er indeksert av deres posisjon. Vi behandler den øverste som brukernavn, den midterste som passordet, og den siste som et telefonnummer. 

Legg nå til en Avbryt knapp:

 // Avbryt-knappen la kansellere = UIAlertAction (tittel: "Avbryt", stil: .destructive, handler: (handling) -> Gyldig inn) 

Deretter skal vi lage og tilpasse brukernavnet Tekstfelt:

 // Legg til 1 textField (for brukernavn) alert.addTextField (textField: UITextField) i textField.keyboardAppearance = .dark textField.keyboardType = .default textField.autocorrectionType = .default textField.placeholder = "Skriv inn brukernavnet" textField.textColor = UIColor.green 

Koden ovenfor ser ganske lik vår første eksempel, med tillegg av textcolor forekomst.

På samme måte for det andre tekstfeltet:

 // Legg til 2. textField (for passord) alert.addTextField (textField: UITextField) i textField.keyboardAppearance = .dark textField.keyboardType = .default textField.placeholder = "Skriv inn passordet ditt" textField.isSecureTextEntry = true textField.textColor = UIColor .rød 

Siden passord må vanligvis være skjult, har vi satt inn isSecureTextEntry attributt på vår Tekstfelt. Denne kommandoen erstatter tegn du skriver med prikker, som passordfelt gjør på et nettsted. Vi har også satt tekstfargen til rød.

Og det tredje tekstelementet, for telefonnummerfeltet:

 // Legg til 3. textField (for telefonnummer) alert.addTextField (textField: UITextField) i textField.keyboardAppearance = .dark textField.keyboardType = .numberPad textField.placeholder = "Skriv inn telefonnummeret ditt." textField.textColor = UIColor.blue textField.font = UIFont (navn: "AmericanTypewriter", størrelse: 14)

De keyboardType Attributtet er satt som .numberpad her, så appen vil bare vise det numeriske tastaturet. Du kan også merke at vi har endret skrifttypen til dette tekstfeltet til Amerikansk skrivemaskin i den siste linjen med kode.

Vi er nesten ferdige - vi trenger bare å legge til våre handlinger og presentere AlertController en gang til:

 // Legg til handlingsknapper og present Alert alert.addAction (loginAction) alert.addAction (avbryt) tilstede (varsling, animert: true, ferdigstillelse: null)

Nå, hvis du kjører appen og brann dette varselet, ser du noe slikt:

Hvis du prøver å skrive noe i tekstfeltene, ser du den tilpassede stylingen vi brukte.

Advarsel med fire knapper

For et siste eksempel vil jeg vise deg et varsel med fire handlinger og noe annet styling.

Siden vi vil tilpasse tittel- og meldingsattributtene til dette varselet senere, vil vår initialiseringskode ha tomme strenger for nå:

 la varsel = UIAlertController (tittel: "", melding: "", preferredStyle: .alert)

Slik oppretter du skriften og størrelsen på tittel- og meldingsfeltene:

 // Endre skrift av tittelen og meldingen la titleFont: [String: AnyObject] = [NSFontAttributeName: UIFont (navn: "AmericanTypewriter", størrelse: 18)! ] la messageFont: [String: AnyObject] = [NSFontAttributeName: UIFont (navn: "HelveticaNeue-Thin", størrelse: 14)! ] la attributedTitle = NSMutableAttributedString (streng: "Flere knapper", attributter: titleFont) la attributedMessage = NSMutableAttributedString (streng: "Velg en handling", attributter: messageFont) alert.setValue (attributedTitle, forKey: "attributedTitle") alert.setValue attributedMessage, forKey: "attributedMessage") 

I de to første linjene setter vi skriftnavn og -størrelse som en Ordbok av NSFontAttributeName. Vær oppmerksom på at du må skrive inn det riktige PostScript-navnet på skrifttypen du vil bruke, ellers vil Xcode ikke gjenkjenne det og vise standardfonten. IOS-fontsiden er en referanse til de riktige skriftnavnene.

Her vil vi også sette tittel og meldingsstrenger med en forekomst av NSMutableAttributedString

La oss lage fire handlinger, inkludert standard Avbryt en:

la action1 = UIAlertAction (tittel: "Handling 1", stil: .default, handler: (handling) -> Gyldig i utskrift ("ACTION 1 valgt!")) la action2 = UIAlertAction (tittel: "Action 2" stil: .default, handler: (handling) -> Opphevet i print ("ACTION 2 valgt!")) action3 = UIAlertAction (tittel: "Action 3", stil: .default, handler:  > Feil i utskrift ("ACTION 3 valgt!")) // Avbryt-knappen la kansellere = UIAlertAction (tittel: "Avbryt", stil: .destructive, handler: (handling) -> Ugyldig i) 

Før vi legger disse handlingene i varsel, la oss stilte det litt.

 // Restyler visningen av Alert alert.view.tintColor = UIColor.brown // endre tekstfarge på knappene alert.view.backgroundColor = UIColor.cyan // endre bakgrunnsfarge alert.view.layer.cornerRadius = 25 // endre hjørneradius

Selv om UIAlertController API er begrenset, slik at utviklere ikke kan endre sin standardstruktur helt, kan vi redigere stilen som vi har gjort med koden ovenfor.

Til slutt kan vi legge til alle handlinger og presentere varselet vårt:

 // Legg til handlingsknapper og present Alert-varsel.addAction (action1) alert.addAction (action2) alert.addAction (action3) alert.addAction (avbryt) tilstede (varsling, animert: true, fullføring: null)

Nå, hvis du kjører koden din, får du noe slikt:

Konklusjon

I denne opplæringen har vi opprettet en serie tilpassede UIAlertViews med tekstfelt og tilpasset styling. Jeg håper du kan sette denne kunnskapen i bruk for din neste iOS-app.

Lær Swift

Vi har bygget en komplett guide for å hjelpe deg med å lære Swift, enten du er bare i gang med det grunnleggende eller du vil utforske mer avanserte emner.

Du kan også sjekke ut noen av våre andre opplæringsprogrammer på Swift og iOS app utvikling.

  • Lag iOS-programmer med Swift

    IOS 10 er nettopp blitt utgitt, og med det, Swift 3. Swift er et nytt programmeringsspråk fra Apple, designet spesielt for å lage iOS, macOS og ...
    Markus Mühlberger
    Fort
  • Bruk fotofilter med kjerne bilde i Swift

    Hvis du vil finne ut hvordan du legger til bildeeffekter i iOS, har du kommet til rett sted. I denne opplæringen lager du en enkel app som vil gjelde noen ...
    Francesco Franchini
    iOS SDK
  • iOS 10: Opprette tilpassede varslingsgrensesnitt

    I denne opplæringen lærer du hvordan du bruker det nye UserNotificationsUI-rammeverket i iOS 10 for å lage egendefinerte grensesnitt for appens lokale og presse ...
    Davis Allie
    iOS SDK
  • Kom i gang med en iOS-appmal på 60 sekunder

    CodeCanyon har hundrevis av iOS app maler som du kan bruke til å hoppe på utviklingen din. Denne videoen viser deg hvordan du installerer og tilpasser en ...
    Derek Jensen
    iOS