Како поставити корисно аутоматско довршавање УИТектФиелд користећи ЦореДата у Свифт-у

Све што треба да знате да бисте направили траку за претрагу са аутоматским довршавањем помоћу УИТаблеВиев и ЦореДата.

У овом чланку ћу представити како сам створио прилагођено поље за претрагу са функцијом аутоматског довршавања за преузимање података из ЦореДата-е. То је компонента која ми је била потребна у једној од мојих апликација и која у многим случајевима може бити врло корисна за побољшање корисничког искуства.

Видећемо:

  • Како поставити једноставну апликацију са претраживачким УИТектФиелд
  • Како конфигурисати ТаблеВиев да приказује резултате претраживања
  • Како извршити упите у реалном времену за ЦореДата колекције

1. Постављање пројекта

Само направите апликацију за један приказ са следећим компонентама (проверите ЦореДата при креирању пројекта!). Да бисмо били конкретнији, замислимо да је ово за апликацију за препоруке путовања, а корисник треба да наведе име града да би добио све информације о месту.

УИЛабел: Зваћемо га топЛабел. Неће нам требати.

УИТектФиелд: То је поље које ћемо прилагодити тако да има поље за аутоматско довршавање претраге, па га назовимо сеарцхТектФиелд.

УИБуттон: То је дугме које ће се притиснути када корисник пронађе место које жели. Назовимо то сеарцхБуттон .

ТаблеВиев ће бити додан програмски тако да ћете видети како га поставити у било којој ситуацији.

Да бих имао прелепи рендер, додао сам УИИмагеВиев у позадину са дивном сликом на плажи.

Да бисте повезали све те компоненте са нашим Виев Цонтроллер-ом, одаберите сваку од њих и превуците њихову референцу помоћу ( Цонтрол (или Цтрл) ⌃ + Цлицк ) у вашу главну брзу датотеку Виев Цонтроллер-а.

2. Конфигуришите нашу класу ЦустомСеарцхТектФиелд

Да бисмо креирали нашу нову класу, креирали смо нову датотеку која се зове ЦустомСеарцхТектФиелд.свифт. У ову класу, која наслеђује од УИТектФиелд, уградићемо све функције које су нам потребне за примену нашег поља за претрагу аутоматског довршавања.

Прављење ТаблеВиев-а са резултатима:

Да бисмо могли да прикажемо резултате завршетка, морамо да направимо инстанцу УИТаблеВиев који ће приказати најрелевантније резултате као у наставку:

Да бисмо то урадили, треба да креирамо објект таблеВиев, а затим га додамо у тренутни приказ. Да бисмо обрадили овај нови објекат, морамо да заменимо одређене методе као што је приказано у наставку. Са свим кодом потребним за изградњу сеарцхТаблеВиев обрађиваће се овом методом: буилдСеарцхТаблеВиев () .

Инстанцирање таблеВиев је једноставно као и стварање новог УИТаблеВиев објекта, али да бисмо приступили свим функционалностима овог новог таблеВиев објекта, морамо да наследимо методе ТаблеВиевДелегатес и ТаблеВиевДатаСоурце. Важно је обратити пажњу на две важне променљиве:

  • Таблевиев Делегат: Ова променљива ће нам одредити који предмет потребама приказивање да будете информисани када неке промене дешавају у Таблевиев (у нашем случају, овај објекат је наш СеарцхТектФиелд која је у овом контексту само објекат)
  • ТаблеВиев ДатаСоурце: Ова променљива ће нам омогућити да одредимо како ће се креирати све компоненте таблеВиев и од којих података. Овде опет морамо да га подесимо на себе .

Постављање те две променљиве омогућава нам да обрађујемо неке радње повезане са УИТаблеВиев у нашој класи ЦустомСеарцхТектФиелд.

Сада када је приказ табеле креиран, у њега треба да додамо податке, и конкретније, ти подаци ће се чувати у ћелијама. За конфигурисање наших ћелија и њихово додавање у таблеВиев користимо методе наслеђене из класе ТаблеВиевДатаСоурце. Поред тога, метода ТаблеВиевДелегатес ће нам омогућити да окидамо тамо где корисник кликне и штампаће садржај одговарајуће ћелије у конзоли.

Али ако покушате да покренете горњи код, ништа се неће догодити јер оквир таблеВиев није постављен и нисмо приказали поглед напред. Да бисмо то поправили, сада треба да додамо методу упдатеТаблеВиев () :

Наш ТаблеВиев је постављен и сада би требало да савршено ради! Али у овом тренутку морамо додати податке у нашу листу података ако желимо нешто да прикажемо. Да бисмо то учинили једноставно за сада, само ћемо додати лажне податке на нашу листу: текст који корисник унесе у нашу траку за претрагу.

Али главни циљ свега овога је да нашим корисницима да резултате аутоматског довршавања док пишу у нашу траку за претрагу, тако да морамо да посматрамо када корисник откуца ново слово и да према томе ажурирамо податке таблеВиев.

Као што видите горе, модификовали смо методу виллМове () како бисмо поставили начин руковања сваком корисничком интеракцијом са тектФиелдом. Оно што нас занима је када се промени поље за текст (када корисник куца). Дакле, сваки пут када се ова акција активира, додајемо податке на нашу листу и ажурирамо свој таблеВиев.

Побољшање корисничког искуства:

Чак и ако наше сеарцхФиелд уопште не претражује, сигурно сте видели да су сви резултати у обичном тексту када укуцамо и резултати се почну приказивати. Ово не личи толико на траку за аутоматско довршавање. Да бисмо били једноставнији за употребу, било би лепо истакнути део текста који смо већ откуцали у поље за текст, а такође и филтрирати резултате тако да одговарају ономе што заправо куцамо. Урадимо то ?

Време је да креирамо нашу методу филтрирања. Ова метода ће филтрирати релевантне ставке са листе података (оне које одговарају ономе што корисник почиње да куца). Ми ћемо користити НСМутаблеАттрибутедСтринг класу да би могао да укаже на део текста који је корисник унео у поље за текст .

Прво креирамо класу СеарцхИтем која ће представљати сваки наш филтрирани резултат. Док градимо нашу дивну апликацију за препоруке путовања, сматраћемо да су ти предмети имена градова. Ево класе СеарцхИтем :

Сада морамо да променимо нашу глобалну променљиву и да додамо нову за чување филтрираних ставки:

Затим креирајмо нашу методу филтрирања:

Претварањем нашег низа у НССтринг , можемо користити методу ранге () која враћа опсег првог појављивања датог низа унутар низа. Коришћењем ове методе обоје знамо да ли низ одговара ономе што корисник куца и положају одговарајућег низа! То је све што нам треба да бисмо истакли овај део наше ставке. То радимо помоћу метода сетАттрибутес , а затим додајемо нашу ставку на листу резултата. Коначно, поново учитавамо податке у нашем таблеВиев.

Створимо нове податке о тестирању да бисмо испробали нашу примену:

Све би требало да функционише савршено, скоро смо готови! ?

3. Пошаљите упите ЦореДата-и

Лепо је имати прелепу траку за претрагу са прилагођеним приказом табеле за приказ резултата филтрирања са аутоматским довршавањем, али без података то није много корисно?.

Повежимо наше поље за текст за претрагу са ЦореДата складиштем.

Направите ЦореДата базу података:

Да бисмо сачували своје трајне податке, створићемо нови ентитет (табелу) у нашој бази података са два атрибута (редове). Да бисмо то урадили, кликнемо на датотеку .кцдатамоделд у истраживачу датотека и креирамо нови ентитет под називом Цитиес, додамо два атрибута која су нам потребна: цитиНаме и цоунтриНаме.

Тада ћемо модификовати тип наше листе података у ЦустомСеарцхФиелд.свифт тако да буде листа градова уместо листе СеарцхИтемс:

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

Упитајте креирану базу података:

Сада морамо створити неке методе за руковање чувањем и преузимањем нових података у бази података. Да бисмо то урадили, морамо створити контекст. Контекст је специфична зона у коју ћемо сместити све своје промене пре него што их пребацимо у базу података. Ако користите гит, ово је попут почетне зоне. Прво додате датотеку у сценско подручје, а када сте спремни са променама, додељујете их свом гит-у.

Мењамо почетак наше методе филтер () како бисмо поставили упит подацима који одговарају корисничком уносу, уместо да дохватимо све податке из базе података:

Последње што треба додати је нова метода аддДата () за попуњавање наше базе података. Будите опрезни, ову функцију треба позвати само једном, јер ће ускладиштени подаци постати постојани, па коментаришите одговарајући ред у коду (непосредно пре стварања таблеВиев у буилдСеарцхТаблеВиев () ) након првог позива! Чак и ако се апликација поново покрене, подаци ће и даље бити доступни у интерној меморији уређаја.

То је то ! Су урадили ! ?

Почео сам да залазим у Свифт програмирање пре неколико недеља са занимљивим МООЦ-ом који сам пронашао на Удеми-у. Након што сам стекао основе Свифта и Ксцоде развоја, почео сам да радим на сопственим пројектима са свом корисном документацијом коју сам пронашао на мрежи. Овај први водич је прилика за мене да поделим сво то знање које сам стекао, па се надам да вам је помогло!

Ако имате питање, не устручавајте се да ми кажете у коментарима! И не заборавите да ми пљеснете ако сте уживали у чланку ???

Сав коначни пројектни код доступан је овде:

синитаме / цустомСеарцхФиелд-медиум

Изворни код за чланак Медиум: Како створити УИТектФиелд за аутоматско довршавање помоћу ЦореДата у Свифт-у… гитхуб.цом