Sådan oprettes QR-kode scanner-app i Swift

Så hvad er QR-kode? Jeg tror, ​​de fleste af jer ved, hvad en QR-kode er. I tilfælde af at du ikke har hørt om det, skal du bare se på ovenstående billede - det er en QR-kode.

QR (kort for hurtig respons) -kode er en slags to-dimensionel stregkode udviklet af Denso. Oprindeligt designet til sporing af dele i fremstillingen, har QR-kode vundet popularitet i forbrugerområdet i de senere år som en måde at kode URL'en på en destinationsside eller markedsføringsinformation på. I modsætning til den grundlæggende stregkode, som du er bekendt med, indeholder en QR-kode oplysninger i både vandret og lodret retning. Dette bidrager således til dens evne til at gemme en større mængde data i både numerisk og bogstavsform. Jeg ønsker ikke at gå ind på de tekniske detaljer om QR-koden her. Hvis du er interesseret i at lære mere, kan du tjekke det officielle websted med QR-kode.

Med den stigende udbredelse af iPhone- og Android-telefoner er brugen af ​​QR-koder steget dramatisk. I nogle lande kan QR-koder findes næsten overalt. De vises i magasiner, aviser, reklamer, reklametavler, navnekort og endda madmenu. Som iOS-udvikler kan du undre dig over, hvordan du kan give din app mulighed for at læse en QR-kode. Før iOS 7 var du nødt til at stole på tredjepartsbiblioteker for at implementere scanningsfunktionen. Nu kan du bruge den indbyggede AVFoundation-ramme til at finde og læse stregkoder i realtid.

Oprettelse af en app til scanning og oversættelse af QR-koder har aldrig været så let.

Hurtigtips: Du kan generere din egen QR-kode. Gå blot til http://www.qrcode-monkey.com

Oprettelse af en QR-kodelæserapp

Demo-appen, som vi skal bygge, er ret enkel og ligetil. Før vi fortsætter med at opbygge demo-appen, er det dog vigtigt at forstå, at enhver stregkodescanning i iOS, inklusive QR-kodescanning, er fuldstændigt baseret på videooptagelse. Derfor tilføjes stregkodescanningsfunktionen i AVFoundation-rammen. Husk dette punkt, da det vil hjælpe dig med at forstå hele kapitlet.

Så hvordan fungerer demo-appen?

Se på skærmbilledet nedenfor. Sådan ser app-UI'en ud. Appen fungerer stort set som en videooptagelsesapp, men uden optagefunktionen. Når appen lanceres, drager den fordel af iPhones bageste kamera for at få vist QR-koden og genkender den automatisk. De dekodede oplysninger (f.eks. En URL) vises lige nederst på skærmen.

QR-kode læser demo

Det er så enkelt.

For at bygge appen kan du starte med at downloade projektskabelonen fra http://www.appcoda.com/resources/swift42/QRCodeReaderStarter.zip. Jeg har forudbygget storyboardet og linket meddelelsesetiketten til dig. Hovedskærmen er tilknyttet klassen QRCodeViewController, mens scannerskærmen er knyttet til klassen QRScannerController.

Startprojektet

Du kan køre startprojektet for at se. Efter lancering af appen kan du trykke på scanningsknappen for at få vist scanningsvisningen. Senere implementerer vi denne visningskontroller til scanning af QR-koder.

Nu hvor du forstår, hvordan startprojektet fungerer, så lad os komme i gang og udvikle QR-scanningsfunktionen i appen.

Import AVFoundation Framework

Jeg har oprettet brugergrænsefladen til appen i projektskabelonen. Mærkaten i brugergrænsefladen bruges til at vise de dekodede oplysninger om QR-koden, og den er tilknyttet egenskaben messageLabel i klassen QRScannerController.

Som jeg nævnte tidligere, er vi afhængige af AVFoundation-rammen for at implementere QR-kodescanningsfunktionen. Åbn først filen QRScannerController.swift og importer rammeverket:

Senere er vi nødt til at implementere AVCaptureMetadataOutputObjectsDelegate-protokollen. Vi vil tale om det om et stykke tid. For øjeblikket vedtager protokollen med en udvidelse:

Før du går videre, skal du erklære følgende variabler i QRScannerController-klassen. Vi taler om dem en efter en senere.

Implementering af videooptagelse

Som nævnt i det tidligere afsnit er læsning af QR-koder fuldstændigt baseret på videooptagelse. For at udføre en realtidsoptagelse er alt, hvad vi skal gøre, at:

  1. Slå op bagkameraenheden.
  2. Indstil input af AVCaptureSession-objektet til den passende AVCaptureDevice til videooptagelse.

Indsæt følgende kode i viewDidLoad-metoden i QRScannerController-klassen:

Hvis du antager, at du har læst det forrige kapitel, skal du vide, at klassen AVCaptureDevice.DiscoverySession er designet til at finde alle tilgængelige capture-enheder, der matcher en bestemt enhedstype. I koden ovenfor specificerer vi at hente den enhed, der understøtter medietypen AVMediaType.video.

For at udføre en realtidsoptagelse bruger vi AVCaptureSession-objektet og tilføjer input til videooptagelsesenheden. AVCaptureSession-objektet bruges til at koordinere strømmen af ​​data fra videoindgangsenheden til vores output.

I dette tilfælde er output fra sessionen indstillet til et AVCaptureMetaDataOutput-objekt. AVCaptureMetaDataOutput-klassen er kernedelen i QR-kodelæsning. Denne klasse i kombination med AVCaptureMetadataOutputObjectsDelegate-protokollen bruges til at aflytte alle metadata, der findes i inputenheden (QR-koden, der er fanget af enhedens kamera) og oversætte den til et menneskeligt læsbart format.

Bare rolig, hvis noget lyder underligt, eller hvis du ikke helt forstår det lige nu - alt bliver klart om et stykke tid. For nu skal du fortsætte med at tilføje følgende kodelinjer i do-blokken til viewDidLoad-metoden:

Fortsæt derefter med at tilføje kodelinjerne vist nedenfor. Vi sætter mig selv som delegeret for captureMetadataOutput-objektet. Dette er grunden til, at klassen QRReaderViewController vedtager AVCaptureMetadataOutputObjectsDelegate-protokollen.

Når nye metadataobjekter indfanges, videresendes de til delegeredeobjektet til videre behandling. I ovenstående kode specificerer vi afsendelseskøen, som delegatens metoder skal udføres til. En forsendelseskø kan være enten seriel eller samtidigt. I henhold til Apples dokumentation skal køen være en seriekø. Så vi bruger DispatchQueue.main til at få standard seriekøen.

Egenskaben metadataObjectTypes er også meget vigtig; da dette er det punkt, hvor vi fortæller appen, hvilken slags metadata vi er interesseret i. AVMetadataObject.ObjectType.qr angiver klart vores formål. Vi ønsker at scanne QR-koder.

Nu, hvor vi har indstillet og konfigureret et AVCaptureMetadataOutput-objekt, er vi nødt til at vise videoen, der er optaget af enhedens kamera på skærmen. Dette kan gøres ved hjælp af en AVCaptureVideoPreviewLayer, som faktisk er en CALayer. Du bruger dette preview-lag sammen med en AV-opsamlingssession til at vise video. Preview-laget tilføjes som et underlag til den aktuelle visning. Indsæt nedenstående kode i fangstblokken:

Endelig starter vi videooptagelsen ved at kalde startRunning-metoden til capture-sessionen:

Hvis du kompilerer og kører appen på en ægte iOS-enhed, går den uventet sammen med følgende fejl, når du trykker på scanningsknappen:

I lighed med hvad vi har gjort i lydoptagelseskapitlet, kræver iOS, at appudviklere får brugerens tilladelse, før de giver adgang til kameraet. For at gøre det skal du tilføje en nøgle med navnet NSCameraUsageDescription i Info.plist-filen. Åbn filen, og højreklik på et hvilket som helst tomt område for at tilføje en ny række. Sæt nøglen til Privacy - Camera Usage Description, og værdi til Vi er nødt til at få adgang til dit kamera for at scanne QR-kode.

Redigering af Info.plist for at tilføje en ny nøgle

Når du er færdig med redigeringen, skal du installere appen og køre den på en rigtig enhed igen. Tryk på scanningsknappen skal åbne det indbyggede kamera og begynde at optage video. På dette tidspunkt er meddelelsesetiketten og den øverste bjælke imidlertid skjult. Du kan løse det ved at tilføje følgende kodelinje. Dette vil flytte meddelelsesetiketten og øverste bjælke til at vises øverst på videolaget.

Kør appen igen, når du har foretaget ændringerne. Meddelelsesetiketten Ingen QR-kode registreres skal nu vises på skærmen.

Implementering af QR-kodelæsning

Fra nu af ligner appen temmelig meget en videooptagelsesapp. Hvordan kan den scanne QR-koder og oversætte koden til noget meningsfuldt? Selve appen er allerede i stand til at registrere QR-koder. Vi er bare ikke klar over det. Sådan skal vi finjustere appen:

  • Når der registreres en QR-kode, fremhæver appen koden ved hjælp af en grøn boks
  • QR-koden dekodes, og de dekodede oplysninger vises nederst på skærmen

Initialisering af Green Box

For at fremhæve QR-koden opretter vi først et UIView-objekt og indstiller grænsen til grønt. Tilføj følgende kode i do-blokken i metoden viewDidLoad:

Variablen qrCodeFrameView er usynlig på skærmen, fordi størrelsen på UIView-objektet er indstillet til nul som standard. Senere, når der registreres en QR-kode, vil vi ændre dens størrelse og omdanne den til en grøn boks.

Afkodning af QR-koden

Som nævnt tidligere, når AVCaptureMetadataOutput-objektet genkender en QR-kode, kaldes følgende delegerede metode til AVCaptureMetadataOutputObjectsDelegate:

Indtil videre har vi ikke implementeret metoden; dette er grunden til, at appen ikke kan oversætte QR-koden. For at fange QR-koden og afkode informationen, er vi nødt til at implementere metoden til at udføre yderligere behandling på metadataobjekter. Her er koden:

Den anden parameter (dvs. metadataObjects) for metoden er et array-objekt, der indeholder alle de metadata-objekter, der er blevet læst. Den allerførste ting, vi skal gøre, er at sikre os, at denne matrix ikke er nul, og den indeholder mindst et objekt. Ellers nulstiller vi størrelsen på qrCodeFrameView til nul og indstiller messageLabel til dens standardmeddelelse.

Hvis der findes et metadataobjekt, kontrollerer vi om det er en QR-kode. Hvis det er tilfældet, fortsætter vi med at finde grænserne for QR-koden. Disse par kodelinjer bruges til at opsætte den grønne boks til fremhævning af QR-koden. Ved at kalde transformedMetadataObject (for :) -metoden til viewPreviewLayer konverteres metadataobjektets visuelle egenskaber til lagkoordinater. Fra dette kan vi finde grænserne for QR-koden til konstruktion af den grønne boks.

Til sidst afkoder vi QR-koden til information, der kan læses af mennesker. Dette trin skal være forholdsvis enkelt. De dekodede oplysninger kan fås ved hjælp af egenskaben stringValue i et AVMetadataMachineReadableCode-objekt.

Nu er du klar til at gå! Tryk på knappen Kør for at kompilere og køre appen på en ægte enhed.

Eksempel på QR-kode

Når først den er startet, skal du trykke på scanningsknappen og pege derefter enheden til QR-koden i figur 11.4. Appen registrerer straks koden og afkoder oplysningerne.

Scanning og dekodning af QR-koder

Denne artikel blev først offentliggjort på AppCoda.com og er et eksempel på et kapitel i den mellemliggende iOS 12-programmering med Swift-bogen.

Følg os på platforme på sociale medier:
Facebook: facebook.com/AppCodamobile/
Twitter: twitter.com/AppCodaMobile
Instagram: instagram.com/AppCodadotcom

Hvis du nød denne artikel, skal du klikke på knappen og dele for at hjælpe andre med at finde den! Efterlad en kommentar nedenfor.