Hyödyllisen automaattisen UITextFieldin määrittäminen Swiftin CoreDatan avulla

Kaikki mitä sinun tarvitsee tietää rakentaaksesi automaattisen täydennyksen hakupalkin UITableView- ja CoreData-tiedostoilla.

Tässä artikkelissa aion esitellä, kuinka rakensin mukautetun hakukentän automaattisen täydennystoiminnon avulla tietojen hakemiseksi CoreDatasta. Se on komponentti, jota tarvitsin yhdessä sovelluksessani ja josta voi olla erittäin hyötyä monissa tapauksissa parantaa käyttäjäkokemusta.

Nähdään:

  • Yksinkertaisen sovelluksen määrittäminen haun UITextField avulla
  • Kuinka määrittää TableView näyttämään hakutulokset
  • Kuinka tehdä reaaliaikaisia ​​kyselyjä CoreData-kokoelmiin

1. Projektin perustaminen

Luo vain yhden näkymän sovellus seuraavilla komponenteilla (tarkista CoreData projektin luomisen yhteydessä!). Tarkemmin sanottuna kuvitellaan, että tämä koskee matkasuositussovellusta ja käyttäjän on annettava kaupungin nimi saadakseen kaikki paikkatiedot.

UILabel: Kutsumme sitä topLabeliksi. Emme tarvitse sitä.

UITextField: Kenttä, jonka mukautamme automaattisen täydennyksen hakukentäksi, joten kutsumme sitä nimellä searchTextField.

UIButton: Se on painike, jota painetaan, kun käyttäjä löytää haluamasi paikan. Kutsutaan sitä hakupainikkeeksi .

TableView lisätään ohjelmallisesti, jotta näet, kuinka se asetetaan missä tahansa tilanteessa.

Saada kaunis renderöinti, lisäsin UIImageView taustalle upean rantakuvan.

Yhdistä kaikki nämä komponentit View Controller -ohjelmaan valitsemalla kukin niistä ja vetämällä niiden viitteet käyttämällä ( Control (tai Ctrl) ⌃ + Click ) View Controller -päätiedostoon.

2. Määritä CustomSearchTextField-luokka

Uuden luokan luomiseksi luomme uuden tiedoston nimeltä CustomSearchTextField.swift. Tähän luokkaan, joka periytyy UITextFieldistä, upotamme kaikki ominaisuudet, joita tarvitsemme automaattisen täydennyksen hakukentän toteuttamiseksi.

TableView-ohjelman luominen tuloksilla:

Jotta voimme näyttää valmistumistulokset, meidän on luotava UITableView, joka näyttää olennaisimmat tulokset seuraavasti:

Tätä varten meidän on luotava tableView-objekti ja lisättävä se sitten nykyiseen näkymään. Tämän uuden objektin käsittelemiseksi meidän on ohitettava tietyt menetelmät alla esitetyllä tavalla. Kaikki searchTableView: n rakentamiseen tarvittava koodi hoidetaan tällä menetelmällä: buildSearchTableView () .

TableViewin alustaminen on yhtä helppoa kuin uuden UITableView-objektin luominen, mutta jotta voimme käyttää tämän uuden tableView-objektin kaikkia toimintoja, meidän on perittävä TableViewDelegates- ja TableViewDataSource-menetelmistä. On tärkeää kiinnittää huomiota kahteen tärkeään muuttujaan:

  • Taulukkonäkymää edustaja: Tämä muuttuja olkaamme mitkä kohde näkymän joudutaan tiedon kun muutoksia esiintyy taulukkonäkymää (tässä tapauksessa, tämä esine on meidän SearchTextField joka on tässä yhteydessä itse objekti)
  • TableView DataSource: Tämän muuttujan avulla voimme määrittää, miten kaikki tableView-komponentit luodaan ja mistä tiedoista. Tässäkin meidän on asetettava se itselleen .

Näiden kahden muuttujan asettaminen antaa meille mahdollisuuden käsitellä joitain UITableView-toimintoihin liittyviä toimintoja CustomSearchTextField-luokassa.

Nyt kun taulukonäkymä on luotu, meidän on lisättävä siihen tietoja, ja konkreettisemmin nämä tiedot tallennetaan soluihin. Käytämme TableViewDataSource-luokasta perittyjä menetelmiä solujemme määrittämiseen ja niiden lisäämiseen tableView-kansioon. Tämän lisäksi TableViewDelegates-menetelmä antaa meille mahdollisuuden laukaista, missä käyttäjä napsauttaa, ja tulostaa vastaavan solun sisällön konsolissa.

Mutta jos yrität suorittaa yllä olevan koodin, mitään ei tapahdu, koska tableView-kehystä ei ole asetettu, emmekä tuonut näkymää eteen. Tämän korjaamiseksi meidän on nyt lisättävä updateTableView () -menetelmä:

TableView on asetettu ja sen pitäisi nyt toimia täydellisesti! Mutta tällä hetkellä meidän on lisättävä tietoja dataListiin, jos haluamme näyttää jotain. Tehdäkseen sen yksinkertaisesti toistaiseksi, lisäämme vain valetiedot luetteloomme: teksti, jonka käyttäjä syöttää hakupalkkiin.

Mutta kaiken tämän päätavoitteena on antaa käyttäjille automaattisen täydennyksen tulokset, kun he kirjoittavat hakupalkkiin, joten meidän on tarkkailtava, milloin käyttäjä kirjoittaa uuden kirjaimen, ja päivitettävä tableView-tiedot sen mukaan.

Kuten yllä voit nähdä, muutimme willMove () -menetelmää määrittääkseen, miten käsitellään kutakin käyttäjän vuorovaikutusta textFieldin kanssa. Kiinnostavaa on, kun tekstikenttä muuttuu (kun käyttäjä kirjoittaa). Joten joka kerta, kun tämä toiminto aktivoidaan, lisätään tietoja luetteloomme ja päivitämme tableView-tietomme.

Käyttökokemuksen parantaminen:

Vaikka searchField ei hae lainkaan, sinun on pitänyt nähdä, että kun kirjoitamme ja tulokset alkavat näkyä, kaikki tulokset ovat pelkkänä tekstinä. Tämä ei näytä niin paljon kuin automaattisen täydennyksen hakupalkki. Käyttäjäystävällisyyden lisäämiseksi olisi mukavaa korostaa tekstiosaan jo kirjoittamamme tekstin osa ja suodattaa tulokset siten, että ne vastaavat sitä, mitä kirjoitamme. Tehdäänkö tämä ?

On aika luoda suodatinmenetelmämme. Tämä menetelmä suodattaa asiaankuuluvat kohteet dataLististä (ne, jotka vastaavat sitä, mitä käyttäjä alkaa kirjoittaa). Käytämme NSMutableAttributedString-luokkaa voidaksemme korostaa osan tekstistä, jonka käyttäjä kirjoitti tekstikenttään .

Ensin luomme SearchItem- luokan, joka edustaa kaikkia suodatettuja tuloksia. Kun rakennamme upeaa matkasuositussovellustamme, katsomme, että nämä kohteet ovat kaupunkien nimiä. Tässä on SearchItem- luokka:

Meidän on nyt muutettava globaalia muuttujaa ja lisättävä uusi, jotta suodatetut kohteemme voidaan tallentaa:

Luodaan sitten suodatinmenetelmämme:

Muuntamalla merkkijonomme NSStringiksi voimme käyttää menetelmäaluetta (), joka palauttaa merkkijonon ensimmäisen esiintymän alueen merkkijonossa. Tämän menetelmän avulla tiedämme molemmat, vastaako merkkijono käyttäjän kirjoittamaa tekstiä ja vastaavan merkkijonon sijaintia! Se on kaikki mitä meidän on korostettava tätä osaa tuotteestamme. Teemme tämän setAttributes- menetelmillä ja lisätään sitten tuotteemme resultsList-luetteloon. Lopuksi lataamme tiedot uudelleen tableView-näkymään.

Luodaan uusia testitietoja kokeillaksemme toteutusta:

Kaiken pitäisi toimia täydellisesti, olemme melkein valmiita! ?

3. Tee kyselyjä CoreDatalle

On mukavaa saada kaunis hakupalkki mukautetulla taulukonäkymällä automaattisen täydennyksen suodatettujen tulosten näyttämiseksi, mutta ilman tietoja se ei ole kovin hyödyllinen?

Yhdistä haun tekstikenttä CoreData-tallennustilaan.

Luo CoreData-tietokanta:

Pysyvien tietojen tallentamiseksi luomme tietokantaamme uuden entiteetin (taulukon) kahdella attribuutilla (rivillä). Voit tehdä niin napsauttamalla .xcdatamodeld-tiedostoa tiedostonhallinnassa ja luomalla uuden entiteetin nimeltä Kaupungit, lisäämällä kaksi tarvitsemiamme attribuuttia: cityName ja countryName.

Silloin me tyyppiä voidaan muokata meidän DataList vuonna CustomSearchField.swift olla lista kaupungeista sijaan listan SearchItems:

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

Tee kyselyitä luotuun tietokantaan:

Nyt meidän on luotava joitain menetelmiä uusien tietojen tallentamiseen ja hakemiseen tietokantaan. Tätä varten meidän on luotava konteksti. Konteksti on erityinen vyöhyke, johon tallennamme kaikki muutoksemme ennen kuin annamme ne tietokantaan. Jos käytät git, tämä on kuin lavastusalue. Lisää ensin tiedostosi lavastusalueelle, ja kun olet valmis muutoksiin, sitoudut heidät gitillesi.

Muutamme filter () -menetelmän alkua kysyäksemme käyttäjän syötettä vastaavia tietoja sen sijaan, että haemme kaikki tiedot tietokannasta:

Viimeinen asia on lisätä uusi addData () -menetelmä tietokantamme täyttämiseen. Ole varovainen, tätä toimintoa on kutsuttava vain kerran, koska tallennetut tiedot pysyvät pysyvinä, joten kommentoi vastaava rivi koodissasi (juuri ennen tableView: n luomista buildSearchTableView (): ssa ) ensimmäisen puhelun jälkeen! Vaikka sovellus käynnistettäisiin uudelleen, tiedot ovat silti käytettävissä laitteen sisäisessä muistissa.

Se siitä ! Olemme valmiit ! ?

Aloin sukeltaa Swift-ohjelmointiin muutama viikko sitten mielenkiintoisella MOOC: lla, jonka löysin Udemysta. Kun olin hankkinut Swiftin ja Xcode-kehityksen perusteet, aloin työskennellä omissa projekteissani kaikilla hyödyllisillä asiakirjoilla, jotka löysin verkosta. Tämä ensimmäinen opetusohjelma on minulle mahdollisuus jakaa kaikki hankkimasi tiedot, joten toivon, että se on auttanut sinua!

Jos sinulla on kysyttävää, älä epäröi kertoa minulle kommenteissa! Ja älä unohda antaa minulle taputusta, jos pidit artikkelista ???

Kaikki projektin lopullinen koodi on saatavana täältä:

sinitame / customSearchField-medium

Keskikokoisen artikkelin lähdekoodi: UITextFieldin automaattisen täydennyksen luominen CoreDatan avulla Swiftissä… github.com