Sådan opsættes et nyttigt automatisk komplet UITextField ved hjælp af CoreData i Swift

Alt hvad du behøver at vide for at oprette din søgefelt til autofuldførelse med en UITableView og CoreData.

I denne artikel vil jeg præsentere, hvordan jeg byggede et tilpasset søgefelt med en autofuldførelsesfunktion for at hente data fra CoreData. Det er en komponent, som jeg havde brug for i en af ​​mine apps, og som i mange tilfælde kan være meget nyttig for at forbedre brugerens oplevelse.

Vi vil se:

  • Sådan oprettes en simpel app med en søgning UITextField
  • Sådan konfigureres en TableView til at vise søgeresultaterne
  • Sådan foretages realtidsforespørgsler til CoreData-samlinger

1. Opsætning af projektet

Opret bare en enkelt visningsapp med følgende komponenter (tjek CoreData ved projektoprettelsen!). For at være mere konkret, lad os forestille os, at dette er til en rejseanbefalingsapp, og brugeren skal angive et bynavn for at få alle oplysningerne om stedet.

UILabel: Vi kalder det topLabel. Vi har ikke brug for det.

UITextField: Det er det felt, vi vil tilpasse til at have et autofuldfør søgefelt, så lad os kalde det searchTextField.

UIButton: Det er den knap, der trykkes på, når brugeren finder det sted, de ønsker. Lad os kalde det searchButton .

TableView tilføjes programmatisk, så du kan se, hvordan du konfigurerer det i enhver form for situation.

For at få en smuk gengivelse tilføjede jeg en UIImageView i baggrunden med et vidunderligt strandbillede.

For at forbinde alle disse komponenter til vores View Controller skal du vælge hver af dem og trække deres reference ved hjælp af ( Control (eller Ctrl) ⌃ + Click ) til din hurtige hovedvisningsfil til View Controller.

2. Konfigurer vores CustomSearchTextField klasse

For at oprette vores nye klasse opretter vi en ny fil kaldet CustomSearchTextField.swift. Det er i denne klasse, der arver fra UITextField, at vi vil integrere alle de funktioner, vi har brug for til at implementere vores søgefelt til autofuldførelse.

Oprettelse af TableView med resultaterne:

For at kunne vise færdiggørelsesresultaterne er vi nødt til at starte en UITableView, der viser de mest relevante resultater som nedenfor:

For at gøre det skal vi oprette et tableView-objekt og derefter føje det til den aktuelle visning. For at håndtere dette nye objekt er vi nødt til at tilsidesætte specifikke metoder som vist nedenfor. Al den kode, der er nødvendig for at oprette searchTableView, håndteres efter denne metode: buildSearchTableView () .

Instantiering af tableView er lige så simpelt som at oprette et nyt UITableView-objekt, men for at få adgang til alle funktionerne i dette nye tableView-objekt er vi nødt til at arve fra TableViewDelegates og TableViewDataSource-metoderne. Det er vigtigt at være opmærksom på to vigtige variabler:

  • Tableview delegeret: Denne variabel vil lade os angive hvilket objekt af den opfattelse behov for at blive informeret når nogle ændringer forekommer i Tableview (i vores tilfælde, dette objekt er vores SearchTextField der er i denne sammenhæng den selvstændige objekt)
  • TableView DataSource: Denne variabel lader os specificere, hvordan alle komponenterne i tableView oprettes, og fra hvilke data. Også her er vi nødt til at sætte det til sig selv .

Indstilling af disse to variabler giver os mulighed for at håndtere nogle handlinger relateret til UITableView inden for vores CustomSearchTextField-klasse.

Nu hvor tabelvisningen er oprettet, skal vi tilføje data i den, og mere konkret vil disse data blive gemt i celler. Vi bruger metoder nedarvet fra klassen TableViewDataSource til at konfigurere vores celler og tilføje dem til tableView. Ud over dette giver TableViewDelegates-metoden os mulighed for at udløse, hvor brugeren klikker og vil udskrive indholdet af den tilsvarende celle i konsollen.

Men hvis du prøver at køre koden ovenfor, sker der intet, fordi tableView-rammen ikke er indstillet, og vi bragte ikke udsigten til fronten. For at løse dette er vi nu nødt til at tilføje en updateTableView () metode:

Vores TableView er indstillet og skal nu fungere perfekt! Men på dette tidspunkt skal vi tilføje data i vores dataliste, hvis vi vil vise noget. For at gøre det enkelt for nu tilføjer vi bare dummy-data til vores liste: den tekst, som brugeren indtaster i vores søgefelt.

Men det overordnede mål med alt dette er at give vores brugere resultaterne med autofuldførelse, mens de skriver i vores søgefelt, så vi er nødt til at observere, når brugeren skriver et nyt bogstav og opdatere dataene i tableView i henhold til det.

Som du kan se ovenfor, ændrede vi willMove () -metoden for at indstille, hvordan man skal håndtere hver af brugerinteraktionerne med textField. Det, der interesserer os, er når tekstfeltet ændres (når brugeren skriver). Så hver gang denne handling er aktiveret, føjer vi data til vores liste, og vi opdaterer vores tableView.

Forbedring af brugeroplevelsen:

Selvom vores searchField slet ikke søger, skal du have set, at når vi skriver, og resultaterne begynder at dukke op, er alle resultaterne i almindelig tekst. Dette ligner ikke så meget som en søgefelt for autofuldførelse. For at være mere brugervenlig ville det være rart at fremhæve den del af teksten, som vi allerede har skrevet i tekstfeltet, og også at filtrere resultaterne, så de svarer til det, vi faktisk skriver. Lad os gøre dette ?

Det er tid til at oprette vores filtermetode. Denne metode filtrerer de relevante emner fra datalisten (dem, der svarer til det, som brugeren begynder at skrive). Vi bruger klassen NSMutableAttributString for at kunne fremhæve den del af teksten, som brugeren skrev i tekstfeltet .

Først opretter vi en SearchItem- klasse, der repræsenterer hvert af vores filtrerede resultater. Da vi bygger vores vidunderlige app til rejseanbefalinger, vil vi overveje, at disse emner er bynavne. Her er SearchItem- klassen:

Vi skal nu ændre vores globale variabel og tilføje en ny til at gemme vores filtrerede varer:

Lad os derefter oprette vores filtermetode:

Ved at konvertere vores streng til en NSString kan vi bruge metodeområdet (), der returnerer området for den første forekomst af en given streng inden for strengen. Ved at bruge denne metode ved vi begge, om strengen svarer til det, som brugeren skriver, og placeringen af ​​den tilsvarende streng! Det er alt, hvad vi har brug for for at fremhæve denne del af vores vare. Vi gør dette ved hjælp af setAttribut- metoder, og vi tilføjer vores vare til resultatlisten. Endelig genindlæser vi dataene i vores tableView.

Lad os oprette nye testdata for at prøve vores implementering:

Alt skal fungere perfekt, vi er næsten færdige! ?

3. Foretag forespørgsler til CoreData

Det er rart at have en smuk søgefelt med en brugerdefineret tabelvisning for at vise vores filtrerede resultater for autofuldførelse, men uden data er det ikke særlig nyttigt?.

Lad os forbinde vores søgetekstfelt til CoreData-lagring.

Opret en CoreData-database:

For at gemme vores vedvarende data opretter vi en ny enhed (tabel) i vores database med to attributter (rækker). For at gøre det skal vi klikke på .xcdatamodeld-filen i filudforskeren og oprette en ny enhed ved navn Cities, tilføje de to attributter, som vi har brug for: cityName og countryName.

Så vil vi ændre typen af vores DataList i CustomSearchField.swift at være en liste over byer i stedet for en liste over SearchItems:

var dataList : [Cities] = [Cities]()

Forespørgsler til den oprettede database:

Nu skal vi oprette nogle metoder til at håndtere lagring og hentning af nye data i databasen. For at gøre det skal vi skabe en kontekst. Konteksten er en bestemt zone, hvor vi gemmer alle vores ændringer, inden vi forpligter dem til databasen. Hvis du bruger git, er det som iscenesættelseszonen. Du tilføjer først din fil til iscenesættelsesområdet, og når du er klar med dine ændringer, forpligter du dem til din git.

Vi ændrer begyndelsen på vores filter () -metode for at forespørge om de data, der svarer til brugerindgangen i stedet for at hente alle data fra databasen:

Den sidste ting at tilføje er en ny addData () metode til at udfylde vores database. Vær forsigtig, denne funktion skal kun kaldes en gang, da de gemte data bliver vedvarende, så kommenter den tilsvarende linje i din kode (lige før oprettelsen af ​​tableView i buildSearchTableView () ) efter det første opkald! Selvom appen genstartes, vil dataene stadig være tilgængelige i enhedens interne hukommelse.

Det er det ! Vi er færdige ! ?

Jeg begyndte at dykke ned i Swift-programmering for et par uger siden med en interessant MOOC, som jeg fandt på Udemy. Efter at jeg havde tilegnet mig det grundlæggende i Swift og Xcode-udvikling, begyndte jeg at arbejde på mine egne projekter med al den nyttige dokumentation, jeg fandt på internettet. Denne første tutorial er en mulighed for mig at dele al den viden, jeg har erhvervet, så jeg håber, at det har hjulpet dig!

Hvis du har et spørgsmål, tøv ikke med at fortælle mig i kommentarerne! Og glem ikke at give mig et klapp, hvis du nød artiklen ???

Al den endelige projektkode er tilgængelig her:

sinitame / customSearchField-medium

Kildekode til Medium-artikel: Sådan oprettes en autofuldførelse UITextField ved hjælp af CoreData i Swift ... github.com