Opplæring 3: iOS Shipment Tracker med påminnelser

Noen ganger er den beste måten å lære å gjøre arbeidet på. Når du kommer til slutten av disse opplæringsprogrammene, vil du ha en applikasjonssporing for iOS.

Statiske celler og tekstfelter

Nå som vi er klare til å legge til forsendelser, må vi endre tabellvisningen vi opprettet for bare å få den vist en celle. Tross alt vil vi bare legge til en sending av gangen. For dette vil vi bruke statiske celler i stedet for dynamiske prototyper. En dynamisk prototype er en celle som vil masseproduseres dynamisk (på farten). En statisk celle brukes til å lage en eller noen få individuelt distinkte celler i henhold til et begrenset sett med krav. For eksempel trenger vi bare en av nevnte celler, og de vil ikke kreve dynamisk endring av data. Vår unike celle krever bare et tekstfelt brukeren kan fylle ut.

I storyboard velger du tabellvisning AddShipmentViewController og bytter fra dynamiske prototype-celler til statiske celler. ( Figur A )

Figur A

Slett de to nederste cellene, da du ikke trenger dem. Bare klikk på dem og trykk på slett-tasten. Nå for å gjøre det mer profesjonelt, sett tabellvisningsstilen til "gruppert" slik at cellen din ser ut som figur B.

Figur B

Dra nå en tekstfeltkontroll fra Objekt-biblioteket inn i cellen og sentrer den. La oss nå størrelse opp til å være omtrent på størrelse med selve cellen og sett den til kantløs, slik at du i utgangspunktet ikke kan si at tekstfeltet er der. Legg merke til at vi brukte et tekstfelt, og det er fordi det er en kontroll som er gjort for å motta brukerinput av ulik størrelse, og det kan svare på brukerinteraksjon på en måte som etiketter ikke kan. Så din celle ser nå ut som figur C.

Figur C


Dette er når det hierarkiske synet på storyboard-scener og -objekter kommer godt med. Det skal se ut som figur D.

Figur D

Dette gjør det klart at AddShipmentVC inneholder tabellvisningen, som inneholder seksjonen med en celle som inneholder tekstfeltet. Noen ganger vil du ved et uhell slippe et tekstfelt eller etikett utenfor en celle, og når du kjører appen, vil du bli gal og prøve å finne den.

Kjør appen og legg merke til at så snart du trykker på tekstfeltet (inne i cellen) glir tastaturet inn og du kan skrive. Legg imidlertid merke til hva som skjer hvis du trykker på høyre kant av cellen, der tekstfeltet slutter og det fortsatt er litt celle igjen. ( Figur E )

Figur E

Du tappet på den faktiske cellen, slik at cellen svarer på sin klassemetode for å svare på et trykk ved å utheve den blå. La oss deaktivere den ved å legge denne metoden til AddShipmentVC .m-filen:

 - (NSIndexPath *) tableView: (UITableView *) tableView willSelectRowAtIndexPath: (NSIndexPath *) indexPath {return nil; } 

Og gå videre og sett cellens valgstil til Ingen i Attributtsinspektøren på storyboardet.

La oss nå bruke en annen avansert XCode-funksjon (som Editor Embed In-funksjonen). Se øverst til høyre ( figur F ) og legg merke til disse knappene.

Figur F

Jeg har Standard Editor åpen, men ikke Assistent Editor eller Version Editor. Jeg har også navigasjonsruten og verktøyruten åpen, men ikke feilsøkingsruten. Vi kommer til å bruke Assistant Editor for å lage et utløp denne gangen, men slik at det ikke blir så overfylt vil vi lukke ruten Verktøy. Gå foran og åpne Assistent Editor. Siden det er så overfylt nå, fortsett og lukk verktøyruten. Hvis du ikke lukker verktøyet-ruten, vil XCode-vinduet se ut som figur G.

Figur G

Gå videre og lukk ruten Verktøy, slik at du har mer handlingsrom. Hvis du vil ha et renere utseende, kan du til og med lukke Navigator-ruten helt til venstre. I alle fall skal AddShipmentVC vises i storyboard, og Assistant Editor skal ha valgt den respektive .h-filen automatisk og vist den. Nå er den interessante delen - Ctrl + dra fra tekstfeltet i storyboard til AddShipmentVC .h-grensesnittet.

Du vil få en popup som figur H.

Figur H

Merk: Sørg for å dra til @ -grensesnittet til AddShipmentViewController og ikke til det til AddShipmentViewControllerDelegate-protokollen.

Legg merke til at den prøver å opprette et UITabelViewCell-uttak. Det er ikke bra! Vi prøver å lage et utløp for tekstfeltet slik at vi kan få tilgang til det i kode og fange brukerens innspill. Klikk på Avbryt og sørg for at du velger tekstfeltkontrollen på storyboardet og gjenta Ctrl + dra-operasjonen. Du vil se noe som ligner på figur I.

Figur I

Når du drar riktig, viser hierarkiruten at du har valgt tekstfeltet riktig. Storyboard viser håndtakene rundt tekstfeltet. Endelig viser popup-vinduet dette uttaket av typen UITextField.

Forsikre deg om at feltene er satt til disse verdiene:

  • Tilkobling: Outlet
  • Navn: textField
  • Type: UITextField
  • Lagring: Sterk

Trykk på Connect-knappen og legg merke til hvordan den oppretter eiendomserklæringen. Ikke glem å @synthetize den nye egenskapen og still den til null i viewDidUnload-metoden.

Endre metoden AddShipmentVC gjort til denne:

 - (IBAction) gjort: (id) avsender {NSLog (@ "Innholdet i tekstfeltet:% @", self.textField.text); self.delegate addShipmentViewControllerDidSave: egenverdi: self.textField.text; } 

Vi endret delegatoppfordringen litt for å overføre verdien til textField.text. Dermed må vi endre mottaksmetoden i ViewController til denne (og logge verdien):

 - (void) addShipmentViewControllerDidSave: (AddShipmentViewController *) kontrollverdi: (NSString *) verdi {NSLog (@ "Verdien mottatt i VC er% @", verdi); self shutViewControllerAnimated: JA fullført: null; } 

På denne måten kan vi motta verdien og logge den på nytt. Ikke glem å endre protokollmetoden i AddShipmentViewController også:

 - (void) addShipmentViewControllerDidSave: (AddShipmentViewController *) kontrollverdi: (NSString *) verdi; 

Nå kjører appen og skriv inn Sko. Trykk på Ferdig-knappen og se hvordan konsollen logger verdien to ganger. En gang i AddShipmentViewController's Done-metoden og igjen i ViewControllers addShipmentControllerDidSave-metode.

Perfekt! Så vi har mottatt brukerinngangen i ett viewcontroller-objekt (vc-objekt) til et annet vc-objekt.

polering

Det er fint at når brukeren banker på tekstfeltet, dukker tastaturet opp. Men det er mer nyttig når brukeren laster inn en skjerm med tekst som skal leses og tekstfelt å fylle ut. I vårt tilfelle er det eneste du må gjøre å fylle ut tekstfeltet, så det ville være fint å bare presentere tastaturet så snart ny skjerm kommer til syne. Så se etter og legg til denne metoden til AddItemViewController.

 - (void) viewWillAppear: (BOOL) animert {super viewWillAppear: animated; self.textField wurdeFirstResponder; } 

Nå i storyboard velger du tekstfeltet og gjør følgende modifiseringer:

  • I plassholder setter du verdien til "Forsendelsesnavn"
  • Sett skrifttypen til System 17
  • Bla nedover og fjern merket for Juster til passform
  • Sett store bokstaver til setninger
  • Og sett Return Key to Done

Tilleggsfunksjoner

Det er mange forskjellige alternativer her du kan spille med. En veldig fin brukeropplevelsesorientert funksjon er å lage tastaturer av den typen verdi du legger inn i tekstfeltet. Hvis for eksempel brukeren må oppgi en postnummer, bruker du et numerisk tastatur. Hvis brukeren skriver inn en e-postadresse eller en URL, bruk det riktige tastaturet slik at brukeren ikke trenger å se på spesielle symboler osv.

Til slutt, sørg for at tekstfeltet er valgt og åpne Connections Inspector. Dra fra hendelsen Did End on Exit til visningskontrolleren og velg den utførte handlingen. Dette vil utløse den valgte velgeren når brukeren trykker på Done-knappen på tastaturet.

En annen enkel funksjon du kan legge til ved et enkelt klikk, er Auto-enable Return Key, som automatisk sjekker tekstfeltet for å sikre at det er minst en verdi i tekstfeltet før du lar deg trykke på Done-knappen.

OK, den neste funksjonen vi vil legge til er å se etter gyldige data før du klikker på Done-knappen for å returnere og avvise AddItemViewController. For det må vi gjøre visningskontrolløren til en delegat til tekstfeltet. Tekstfeltet vil sende hendelser til denne delegaten. Delegaten, som vil være vår AddItemViewController, kan deretter svare på disse hendelsene og gjøre det som er passende.

Så la oss sørge for at AddItemViewController-grensesnittlinjen ser slik ut:

 @interface AddItemViewController: UITableViewController 

AddItemViewController er nå delegat for tekstfeltobjekter generelt. I dette tilfellet må vi fortelle tekstfeltobjektet at AddItemViewController er dens delegat. Så gå til storyboard og velg tekstfeltet. Dra fra "delegat" til tilkoblingsinspektøren til AddItemViewController-dokkingstasjonen, som vist i figur J.

Figur J

Nå åpner Assistant Editor og Ctrl-dra fra Done-knappen til AddItemViewController.h og navngi det gjortBarButton. Legg til den korresponderende syntesesetningen i .m og sett den til null i metoden viewDidUnload. Til slutt legg denne metoden til AddItemViewController:

 - (BOOL) textField: (UITextField *) theTextField shouldChangeCharactersInRange: (NSRange) range replacementString: (NSString *) string {NSString * newText = theTextField.text stringByReplacingCharactersInRange: range withString: string; if (newText lengde> 0) {self.doneBarButton.enabled = YES; } else {self.doneBarButton.enabled = NEI; } return YES; } 

En siste finjustering

Det vi gjør her er å få brukeren inn og plassere den i en streng. Så sjekker vi for å se om det er tomt og tar nødvendige tiltak. Det eneste problemet er at hvis du kjører appen nå, er Done-knappen i utgangspunktet aktivert. Hvis du går til storyboard og fjerner merket for Enabled Box i tekstfeltet, fungerer det perfekt!

Les også:

  • Opplæring 1: iOS Shipment Tracker med påminnelser
  • Opplæring 2: iOS Shipment Tracker med påminnelser
  • Bedre kode: Bestem enhetstyper og iOS-versjoner


© Copyright 2020 | mobilegn.com