Hogyan állítsunk be egy hasznos automatikus kitöltési UITextField-et a Swift CoreData segítségével

Mindössze annyit kell tudni, hogy az automatikus kiegészítés keresősávját UITableView és CoreData segítségével készíthesse el.

Ebben a cikkben bemutatom, hogyan építettem egy egyéni keresőmezőt egy automatikus kiegészítés funkcióval az adatok lekéréséhez a CoreData-ból. Ez egy olyan alkatrész, amelyre szükségem volt az egyik alkalmazásomban, és amely sok esetben nagyon hasznos lehet a felhasználói élmény javításához.

Meglátjuk:

  • Hogyan állítsunk be egy egyszerű alkalmazást a keresési UITextField segítségével
  • A TableView beállítása a keresési eredmények megjelenítésére
  • Valós idejű lekérdezések a CoreData gyűjteményekről

1. A projekt beállítása

Csak hozzon létre egy nézet alkalmazást a következő összetevőkkel (ellenőrizze a CoreData-t a projekt létrehozásakor!). Konkrétabban képzeljük el, hogy ez egy utazási ajánlási alkalmazásra vonatkozik, és a felhasználónak meg kell adnia a város nevét, hogy megkapja a hely összes információját.

UILabel: TopLabel-nek fogjuk nevezni . Nem lesz rá szükségünk.

UITextField: Ezt a mezőt testreszabjuk, hogy legyen egy automatikus kiegészítéses keresőmezője, tehát nevezzük keresésnekTextField.

UIButton: Ezt a gombot kell megnyomni, amikor a felhasználó megtalálja a kívánt helyet. Nevezzük úgy, hogy searchButton .

A tableView programszerűen kerül hozzáadásra, így látni fogja, hogyan kell beállítani bármilyen helyzetben.

A gyönyörű renderelés érdekében a háttérbe egy UIImageView képet adtam, csodálatos tengerparti képpel.

Az összes összetevőnek a Nézetvezérlőhöz való csatlakoztatásához válassza ki mindegyiket, és húzza a hivatkozásukat a ( Vezérlő (vagy Ctrl) ⌃ + Kattintson ) segítségével a fő Nézetvezérlő gyors fájljához.

2. Konfigurálja a CustomSearchTextField osztályunkat

Új osztályunk létrehozásához létrehozunk egy új fájlt CustomSearchTextField.swift néven . Ebben az osztályban örökli az UITextField, hogy beágyazzuk az összes olyan funkciót, amelyre szükségünk van az automatikus kiegészítés keresőmezőnk megvalósításához.

A TableView létrehozása az eredményekkel:

A teljesítési eredmények megjelenítéséhez be kell állítanunk egy UITableView-t, amely az alábbiak szerint jeleníti meg a legrelevánsabb eredményeket:

Ehhez létre kell hoznunk egy tableView objektumot, majd hozzá kell adnunk az aktuális nézethez. Ennek az új objektumnak a kezeléséhez felül kell írnunk az alábbi módszereket. A searchTableView felépítéséhez szükséges összes kódot ez a módszer kezeli: buildSearchTableView () .

A tableView kezdeményezése ugyanolyan egyszerű, mint egy új UITableView objektum létrehozása, de ahhoz, hogy hozzáférhessünk az új tableView objektum összes funkciójához, örökölnünk kell a TableViewDelegates és a TableViewDataSource módszerekből. Fontos két fontos változóra figyelni:

  • A Tableview küldött: Ez a változó hadd nevezze célunk a nézet tájékoztatni kell, amikor néhány olyan változtatásokat a Tableview (esetünkben ez az objektum a SearchTextField ami ebben az összefüggésben az önálló tárgy)
  • A tableView DataSource: Ezzel a változóval megadhatjuk, hogy a tableView összes összetevője hogyan és miként kerüljön létrehozásra. Itt is önmagunkra kell állítanunk .

E két változó beállítása lehetővé teszi az UITableView-val kapcsolatos néhány művelet kezelését a CustomSearchTextField osztályon belül.

Most, hogy elkészült a táblázat nézet, adatokat kell hozzáadnunk, és konkrétabban ezeket az adatokat cellákba tároljuk. A TableViewDataSource osztályból örökölt módszereket használjuk celláink konfigurálásához és hozzáadásához a tableView-hoz. Ezen felül a TableViewDelegates metódus lehetővé teszi számunkra, hogy kiváltsuk, ahol a felhasználó kattint, és kinyomtatja a konzol megfelelő cellájának tartalmát.

De ha megpróbálja futtatni a fenti kódot, semmi sem fog történni, mert a tableView keret nincs beállítva, és nem a nézetet hoztuk előre. Ennek kijavításához most hozzá kell adnunk egy updateTableView () metódust:

A TableView beállítva van, és állítólag tökéletesen működik! De ekkor adatot kell felvennünk a dataList-be, ha valamit megjeleníteni akarunk. Egyszerűen egyelőre csak felveszünk dummy adatokat a listánkba: azt a szöveget, amelyet a felhasználó beír a keresősávunkba.

De mindennek a fő célja az, hogy a felhasználók automatikusan kiegészítsék a találatokat, miközben gépelnek a keresősávunkba, ezért meg kell figyelnünk, amikor a felhasználó új levelet ír be, és ennek megfelelően frissítenünk kell a tableView adatait.

Amint a fentiekből látható, módosítottuk a willMove () metódust annak érdekében, hogy beállítsuk, hogyan kezeljük az egyes felhasználói interakciókat a textFielddel. Az érdekel minket, amikor a szövegmező megváltozik (amikor a felhasználó gépel). Tehát minden alkalommal, amikor ez a művelet aktiválódik, adatot adunk a listánkhoz, és frissítjük a tableView-t.

A felhasználói élmény javítása:

Még akkor is, ha a keresési mezőnk egyáltalán nem keres, bizonyára látta, hogy amikor gépelünk, és az eredmények megjelenni kezdenek, az összes eredmény egyszerű szöveges. Ez nem hasonlít annyira az automatikus kiegészítés keresősávjára. Felhasználóbarátabbá tétele érdekében jó lenne kiemelni a szövegnek azt a részét, amelyet már beírtunk a szövegmezőbe, és szűrni az eredményeket is, hogy azok megfeleljenek annak, amit valójában gépelünk. Csináljuk ezt ?

Itt az ideje létrehozni a szűrési módszerünket. Ez a módszer kiszűri a releváns elemeket a dataList-ből (azokat, amelyek megfelelnek annak, amit a felhasználó elkezd begépelni). Az NSMutableAttributedString osztályt fogjuk használni, hogy kiemelhessük a szöveg azon részét, amelyet a felhasználó a szövegmezőbe beírt .

Először létrehozunk egy SearchItem osztályt, amely minden szűrt eredményünket képviseli. Amint építjük csodálatos utazási ajánlási alkalmazásunkat, figyelembe vesszük, hogy ezek a tételek városnevek. Itt van a SearchItem osztály:

Most meg kell változtatnunk a globális változónkat, és hozzá kell adnunk egy újat a szűrt tételek tárolásához:

Ezután hozzuk létre a szűrési módszerünket:

Ha karaktersorozatunkat NSString- be konvertáljuk , használhatjuk a metódustartományt (), amely az adott karakterlánc első előfordulásának tartományát adja vissza. Ezzel a módszerrel mindketten tudjuk, hogy a karakterlánc megfelel-e annak, amit a felhasználó gépel, és a megfelelő karakterlánc helyzetének! Ennyi kell, hogy kiemeljük tételünk ezt a részét. Ezt a setAttributes metódusokkal végezzük, majd hozzáadjuk az elemünket az resultsList-hez . Végül feltöltjük az adatokat a tableView-ba.

Hozzunk létre új tesztadatokat a megvalósítás kipróbálására:

Mindennek tökéletesen működnie kell, majdnem készen vagyunk! ?

3. Kérdezzen a CoreData-ról

Örülök, hogy van egy gyönyörű keresősáv egyéni táblanézettel az automatikus kiegészítéssel szűrt eredményeink megjelenítéséhez, de adatok nélkül nem túl hasznos?

Csatlakoztassuk keresési szövegmezőnket a CoreData tárolóhoz.

Hozzon létre egy CoreData adatbázist:

A tartós adataink tárolása érdekében létrehozunk egy új entitást (táblázatot) az adatbázisunkban, két attribútummal (sor). Ehhez kattintson a .xcdatamodeld fájlra a fájlkezelőben, és hozzon létre egy új entitást, amelynek neve Városok, adja hozzá a két szükséges attribútumot: cityName és countryName.

Ezután a CustomSearchField.swift adatlista típusát úgy módosítjuk , hogy a városok listája legyen a SearchItems listája helyett:

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

Kérdezzen a létrehozott adatbázisról:

Most létre kell hoznunk néhány módszert az új adatok mentésére és lekérésére az adatbázisban. Ehhez létre kell hoznunk egy kontextust. A kontextus egy sajátos zóna, ahol minden változtatást tárolunk, mielőtt az adatbázis felé irányítanánk őket. Ha git-et használ, ez olyan, mint az átmeneti zóna. Először hozzáadja a fájlt az átmeneti területhez, és ha készen áll a módosításokkal, elkötelezi őket a git mellett.

Módosítjuk a filter () metódus kezdetét annak érdekében, hogy lekérdezzük a felhasználói adatbevitelnek megfelelő adatokat, ahelyett, hogy az összes adatot lekérnénk az adatbázisból:

Utoljára hozzá kell adni egy új addData () metódust az adatbázisunk feltöltésére. Vigyázzon, ezt a funkciót csak egyszer kell meghívni, mivel a tárolt adatok állandóak maradnak, ezért az első hívás után írja le a kód megfelelő sorát (közvetlenül a tableView létrehozása előtt a buildSearchTableView () fájlban) ! Még akkor is, ha az alkalmazást újraindítják, az adatok továbbra is rendelkezésre állnak a készülék belső memóriájában.

Ez az ! Végeztünk ! ?

Néhány hete kezdtem el merülni a Swift programozásban egy érdekes MOOC-tal, amelyet az Udemy-n találtam. Miután elsajátítottam a Swift és az Xcode fejlesztés alapjait, elkezdtem dolgozni saját projektjeimen, az összes hasznos dokumentációval, amelyet az interneten találtam. Ez az első bemutató alkalom arra, hogy megosszam mindazt a tudást, amelyet megszereztem, ezért remélem, hogy segített neked!

Ha kérdése van, ne habozzon elmondani nekem a megjegyzéseket! És ne felejts el adni egy tapsot, ha tetszett a cikk ???

A projekt összes végleges kódja elérhető itt:

sinitame / customSearchField-medium

Forráskód a közepes cikkhez: Hogyan készítsünk automatikus kitöltési UITextField-et a Swift CoreData használatával ... github.com