Как да настроите полезен автоматично попълващ UITextField с помощта на CoreData в Swift

Всичко, което трябва да знаете, за да изградите лентата си за търсене с автоматично довършване с UITableView и CoreData.

В тази статия ще представя как създадох персонализирано поле за търсене с функция за автоматично довършване за извличане на данни от CoreData. Това е компонент, който ми беше необходим в едно от приложенията ми и който в много случаи може да бъде много полезен за подобряване на потребителското изживяване.

Ще видим:

  • Как да настроите просто приложение с търсене UITextField
  • Как да конфигурирам TableView да показва резултатите от търсенето
  • Как да правим запитвания в реално време към колекции CoreData

1. Създаване на проекта

Просто създайте приложение с един изглед със следните компоненти (проверете CoreData при създаването на проекта!). За да бъдем по-конкретни, нека си представим, че това е за приложение за препоръки за пътуване и потребителят трябва да предостави име на град, за да получи цялата информация за мястото.

UILabel: Ще го наречем topLabel. Няма да имаме нужда от него.

UITextField: Това е полето, което ще персонализираме, за да има поле за автоматично довършване, така че нека го наречем searchTextField.

UIButton: Това е бутонът, който ще бъде натиснат, когато потребителят намери мястото, което иска. Нека го наречем searchButton .

TableView ще бъде добавен програмно, така че ще видите как да го настроите във всякакъв вид ситуация.

За да има красива визуализация, добавих UIImageView на фона с прекрасно плажно изображение.

За да свържете всички тези компоненти с нашия View Controller, изберете всеки от тях и плъзнете референтната им стойност, като използвате ( Control (или Ctrl) ⌃ + Щракнете ) към основния си бърз файл на View Controller

2. Конфигурирайте нашия клас CustomSearchTextField

За да създадем нашия нов клас, ние създаваме нов файл, наречен CustomSearchTextField.swift. В този клас, който наследява от UITextField, ние ще вградим всички функции, които са ни необходими, за да приложим нашето поле за търсене с автоматично довършване.

Създаване на TableView с резултатите:

За да можем да покажем резултатите от завършването, трябва да създадем екземпляр на UITableView, който ще показва най-подходящите резултати, както е показано по-долу:

За целта трябва да създадем обект tableView и след това да го добавим към текущия изглед. За да се справим с този нов обект, трябва да заменим конкретни методи, както е показано по-долу. Целият код, необходим за изграждане на searchTableView, ще бъде обработен по този метод: buildSearchTableView () .

Инсталирането на tableView е толкова просто, колкото създаването на нов обект UITableView, но за да получим достъп до всички функционалности на този нов обект tableView, трябва да наследим от методите TableViewDelegates и TableViewDataSource. Важно е да се обърне внимание на две важни променливи:

  • Делегат на tableView: Тази променлива ще ни позволи да посочим кой обект на изгледа трябва да бъде информиран, когато в tableView настъпят някои промени (в нашия случай този обект е нашият SearchTextField, който в този контекст е самостоятелният обект)
  • TableView DataSource: Тази променлива ще ни позволи да посочим как ще бъдат създадени всички компоненти на tableView и от кои данни. Тук отново трябва да го настроим на себе си .

Задаването на тези две променливи ни позволява да обработваме някои действия, свързани с UITableView в нашия клас CustomSearchTextField.

Сега, когато изгледът на таблицата е създаден, трябва да добавим данни в него и по-конкретно, тези данни ще се съхраняват в клетки. Използваме методи, наследени от класа TableViewDataSource, за да конфигурираме нашите клетки и да ги добавим към tableView. В допълнение към това методът TableViewDelegates ще ни позволи да задействаме мястото, където потребителят щракне, и ще отпечата съдържанието на съответната клетка в конзолата.

Но ако се опитате да стартирате кода по-горе, нищо няма да се случи, тъй като рамката tableView не е настроена и не сме изнесли изгледа отпред. За да поправим това, сега трябва да добавим метод updateTableView () :

Нашият TableView е настроен и сега трябва да работи перфектно! Но по това време трябва да добавим данни в нашия dataList, ако искаме да покажем нещо. За да го направим просто засега, ние просто ще добавим фиктивни данни към нашия списък: текстът, който потребителят въвежда в нашата лента за търсене.

Но основната цел на всичко това е да даде на нашите потребители резултати от автоматично довършване, докато те пишат в нашата лента за търсене, така че трябва да наблюдаваме кога потребителят пише нова буква и да актуализираме данните на tableView според това.

Както можете да видите по-горе, модифицирахме метода willMove () , за да зададем как да се справя с всяко от потребителските взаимодействия с textField. Това, което ни интересува, е когато текстовото поле се промени (когато потребителят пише). Така че всеки път, когато това действие се активира, ние добавяме данни към нашия списък и актуализираме нашия tableView.

Подобряване на потребителското изживяване:

Дори ако searchField изобщо не търси, сигурно сте забелязали, че когато въвеждаме и резултатите започват да се показват, всички резултати са в обикновен текст. Това не прилича толкова много на лентата за търсене с автоматично довършване. За да бъдем по-лесни за ползване, би било хубаво да подчертаем частта от текста, която вече сме въвели в текстовото поле, а също и да филтрираме резултатите, така че да съответстват на това, което всъщност въвеждаме. Нека да направим това ?

Време е да създадем нашия метод за филтриране. Този метод ще филтрира съответните елементи от списъка с данни (тези, съответстващи на това, което потребителят започва да пише). Ще използваме клас NSMutableAttributedString, за да можем да маркираме частта от текста, която потребителят е въвел в текстовото поле .

Първо, ние създаваме клас SearchItem, който ще представя всеки от нашите филтрирани резултати. Докато изграждаме нашето прекрасно приложение за препоръки за пътуване, ще считаме, че тези елементи са имена на градове. Ето класа SearchItem :

Сега трябва да променим нашата глобална променлива и да добавим нова, за да съхраняваме нашите филтрирани елементи:

Тогава нека създадем нашия метод на филтриране:

Чрез преобразуване на нашия низ в NSString , можем да използваме метода range (), който връща диапазона на първото появяване на даден низ в низа. Чрез използването на този метод и двамата знаем дали низът съответства на това, което потребителят пише и позицията на съответния низ! Това е всичко, от което се нуждаем, за да подчертаем тази част от нашия артикул. Правим това с помощта на методите setAttributes и след това добавяме елемента си към списъка с резултати. И накрая, презареждаме данните в нашия tableView.

Нека създадем нови тестови данни, за да опитаме нашето изпълнение:

Всичко трябва да работи перфектно, почти сме готови! ?

3. Правете запитвания до CoreData

Хубаво е да имате красива лента за търсене с персонализиран изглед на таблица, за да покажете нашите филтрирани резултати за автоматично довършване, но без данни не е много полезно?

Нека свържем нашето текстово поле за търсене със хранилището CoreData.

Създайте база данни CoreData:

За да съхраним нашите постоянни данни, ние ще създадем нов обект (таблица) в нашата база данни с два атрибута (редове). За целта щракваме върху файла .xcdatamodeld във файловия изследовател и създаваме нов обект с име Cities, добавяме двата атрибута, които са ни необходими: cityName и countryName.

След това ще се промени типа на нашата dataList в CustomSearchField.swift да бъде списък на градовете, вместо списък на SearchItems:

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

Направете заявки към създадената база данни:

Сега трябва да създадем някои методи за справяне със запазването и извличането на нови данни в базата данни. За целта трябва да създадем контекст. Контекстът е специфична зона, в която ще съхраняваме всички наши промени, преди да ги ангажираме в базата данни. Ако използвате git, това е като началната зона. Първо добавяте файла си в променителната област и когато сте готови с промените, ги ангажирате към вашия git.

Променяме началото на нашия метод filter () , за да поискаме данните, които съответстват на потребителския вход, вместо да извличаме всички данни от базата данни:

Последното нещо, което трябва да добавите, е нов метод addData () за попълване на нашата база данни. Внимавайте, тази функция трябва да бъде извикана само веднъж, тъй като съхранените данни ще станат постоянни, затова коментирайте съответния ред във вашия код (точно преди създаването на tableView в buildSearchTableView () ) след първото извикване! Дори ако приложението се рестартира, данните пак ще са налични във вградената памет на устройството.

Това е ! Приключихме! ?

Започнах да се ровя в Swift програмирането преди няколко седмици с интересен MOOC, който намерих на Udemy. След като придобих основите на разработката на Swift и Xcode, започнах да работя върху собствените си проекти с цялата полезна документация, която намерих в мрежата. Този първи урок е възможност за мен да споделя всички знания, които придобих, така че се надявам, че това ви е помогнало!

Ако имате въпрос, не се колебайте да ми кажете в коментарите! И не забравяйте да ме пляскате, ако хареса статията ???

Всички окончателни кодове на проекта са достъпни тук:

sinitame / customSearchField-medium

Изходен код за Medium статия: Как да създадете автоматично довършване UITextField с помощта на CoreData в Swift ... github.com