The playground

More information here

Legarea datelor în Android: Noțiuni de bază

conectarea fișierelor de cod cu interfețele utilizatorului este una dintre cele mai frecvente sarcini cu care se confruntă un dezvoltator Android. Pe cât de simplu pare, acest proces provoacă multe erori de rulare și consumă mult timp. Nu ar fi minunat dacă ar exista o bibliotecă care să se ocupe de asta? Biblioteca de legare […]

conectarea fișierelor de cod cu interfețele utilizatorului este una dintre cele mai frecvente sarcini cu care se confruntă un dezvoltator Android. Pe cât de simplu pare, acest proces provoacă multe erori de rulare și consumă mult timp. Nu ar fi minunat dacă ar exista o bibliotecă care să se ocupe de asta?

Biblioteca de legare a datelor este aici pentru salvare! Android a introdus această bibliotecă ca parte a suitei de biblioteci Jetpack la Google I/O 2018.

legarea datelor vă permite să gestionați comunicarea între vizualizări și sursele de date în mod fiabil și simplu. Urmarea acestui model este esențială pentru multe arhitecturi importante în dezvoltarea Android, în special MVVM, în prezent una dintre cele mai utilizate arhitecturi Android.

în acest tutorial, veți construi GoBuy, o aplicație pentru lista de cumpărături, pentru a afla cum să integrați Biblioteca de legare a datelor în proiectele Android existente. Pe parcurs, veți învăța:

  • cum să activați legarea datelor în proiectul dvs.
  • cum să convertiți un fișier de aspect existent într-unul care funcționează cu legarea datelor
  • cum să lucrați cu codul generat de Biblioteca de legare a datelor în activitățile și fragmentele dvs.
  • cum să utilizați legarea datelor în RecyclerView și ViewHolder
Notă: Acest tutorial presupune că cunoașteți elementele de bază ale dezvoltării Android cu Kotlin. Dacă sunteți nou la Kotlin, consultați acest tutorial de introducere Kotlin. Dacă sunteți complet nou în dezvoltarea Android, citiți acest tutorial de dezvoltare Android pentru a vă familiariza cu elementele de bază.

Noțiuni de bază

descărcați proiectul starter făcând clic pe butonul Descărcare materiale din partea de sus sau de jos a tutorialului și dezarhivați-l. Extrageți atât folderele de început, cât și cele de sfârșit din fișierul zip. Deschideți proiectul begin selectând Import project (Gradle, Eclipse ADT etc.) din ecranul de întâmpinare al Android Studio 3.5 sau o versiune ulterioară.

așteptați ca sincronizarea Gradle să se termine. Uită-te la structura proiectului.

după cum puteți vedea în captura de ecran de mai sus, structura folderului urmează arhitectura MVVM. Există un fișier pentru Model, altul pentru vizualizare și unul pentru ViewModel. În timpul acestui tutorial, veți lucra cu fișierele din folderul vizualizare, precum și cu fișierele XML de aspect din resurse/aspect, așa cum se arată în captura de ecran de mai jos.

Construiți și rulați. Veți vedea versiunea inițială a listei de cumpărături.

aplicația este funcțională și ușor de navigat. Încercați să adăugați un produs făcând clic pe butonul Adăugare element din colțul din stânga sus al ecranului. Completați dialogul care apare și faceți clic pe butonul Salvare. Elementul apare în listă cu opțiunea de a-l edita sau șterge.

spuneți că doriți să faceți sandvișuri pentru prietenii dvs. Trebuie să cumpărați o bucată de pâine, un borcan de gem, două pachete de brânză și un borcan de maioneză. Adăugați-le pe lista dvs. de cumpărături.

ați obținut un rezultat similar cu captura de ecran de mai sus? Încercați să jucați cu valori diferite până când vă simțiți confortabil navigând prin aplicație.

înainte de a vă scufunda în proiect, este important să aflați mai multe despre legarea datelor.

De ce să folosiți legarea datelor

fiecare dezvoltator dorește un cod curat și ușor de înțeles, dar crearea acestuia este mai ușor de spus decât de făcut. Oamenii se grăbesc, lansările vin una după alta, clienții vor rezultate și înainte să-ți dai seama, codul tău este o mizerie.

știind acest lucru, echipa Android a decis să ușureze lucrurile prin standardizarea dezvoltării. În acest scop, au lansat bibliotecile Jetpack, care includ Biblioteca de legare a datelor. Această bibliotecă oferă mai multe avantaje:

  1. Mai puțin cod: prin păstrarea cod în activități și fragmente mici, vă ajută să scrie cod mai curat și mai ușor de citit.
  2. mai puține erori: legarea este verificată la momentul compilării.
  3. aplicații mai rapide: deoarece legarea nu se face înonCreate, aplicația dvs. rulează mai repede.
  4. conexiune mai sigură între vizualizări și cod: deoarece nu se leagă în timpul rulării, este mai sigur să obțineți componentele UI decât findViewById().
  5. conexiune mai sigură între vizualizări și acțiune: legarea datelor este mai sigură decât să vă bazați peonClick(), care se poate bloca dacă nu ați implementat metoda solicitată.
  6. mai ușor: deoarece are mai puțin cod și provoacă mai puține erori, este mai ușor de testat și de întreținut.

acum, că ați înțeles beneficiile, este timpul pentru a discuta despre modul în care funcționează de legare a datelor.

cum funcționează legarea datelor

legarea datelor se referă la conectarea vizualizărilor în aspectul XML cu obiecte de date: în acest caz, codul Kotlin. Biblioteca de legare a datelor generează clasele necesare pentru acest proces.

Layout fișierele XML care utilizează legarea datelor sunt diferite deoarece încep cu o etichetă rădăcinălayout urmată de un elementdata și un elementview root. Acest element rădăcină de vizualizare este ceea ce ar fi rădăcina dvs. într-un fișier de aspect fără caracter obligatoriu.

fiecare fișier de aspect are apoi propria clasă de legare a datelor generate. Biblioteca Jetpack face treaba pentru tine. În mod implicit, numele clasei este numele fișierului de aspect în cazul Pascal și cu cuvântul obligatoriu la sfârșit.

de exemplu, în acest proiect, activity_grocery_list.xml are clasa de legare ActivityGroceryListBinding.

legarea datelor are trei utilizări principale:

  • afișarea datelor.
  • gestionarea evenimentelor utilizatorului.
  • invocarea acțiunilor asupra variabilelor de aspect.

având în vedere acest lucru, este timpul să pregătim proiectul pentru legarea datelor.

configurarea pentru legarea datelor

Mai întâi, veți configura proiectul pentru legarea datelor. Deschideți construcția.gradle din directorul app. LocalizațiTODO comentariu în partea de jos a acestui fișier și adăugați următorul cod acolo:

dataBinding { enabled true}

aceasta îi spune lui Gradle că doriți să vă construiți proiectul cu Biblioteca de legare a datelor.

Construiți și rulați. Veți vedea același ecran pe care l-ați făcut la început.

apoi, veți converti un aspect XML existent pentru a lucra cu legarea datelor.

transformarea unui aspect XML standard într-un aspect de legare a datelor

pentru a converti un fișier de aspect XML obișnuit în aspect de legare a datelor, trebuie să urmați trei pași simpli:

  1. înfășurați aspectul cu o etichetălayout.
  2. adăugați variabile de aspect (opțional).
  3. Adăugați expresii de aspect (opțional).

veți repeta pasul unu în fiecare dintre cele trei machete XML din proiect. Începeți prin deschiderea activity_grocery_list.xml. Veți găsi un TODO în partea de sus a acestui fișier.

trebuie să închideți această etichetă chiar în partea de jos a fișierului. Deci, mergeți la linia 63, adăugați o nouă linie și închideți-o cu următorul cod:

</layout>

cu acest cod adăugat, acest aspect poate utiliza legarea datelor. În caz contrar, ar fi un fișier standard de aspect și de a genera fișierele automate de legare.

curățarea erorilor

eticheta aspect constrângere arată acum un avertisment cu privire la declarațiile redundante. Pentru a remedia acest lucru, eliminați cele trei linii care încep cu xmlns:androidxmlns:appșixmlns:tools

Notă: Android studio are o comandă rapidă pentru a crea această etichetă de aspect: Control / Opțiune + Enter sau faceți clic dreapta + Afișați acțiunile de context pentru conversia la aspectul de legare a datelor.
notă: Observați că indentarea nu este corectă după adăugarea acestor fragmente de cod. Pentru a remedia problema, faceți clic pe meniul Cod Din Android Studio și selectați reformat code. Acest idents codul corect.

repetați pașii de mai sus încă o dată în grocery_list_item.xml

construi și rula. Încercați să adăugați, să editați și să ștergeți câteva elemente și să vedeți că nimic nu se blochează.

clase de legare autogenerate

anterior, ați aflat că biblioteca de legare a datelor generează automat clase pentru legare. Acum, Puteți vedea clasele generate. Aruncați o privire la captura de ecran de mai jos pentru a vedea unde se află în structura fișierului.

Notă: există un fișier separat pentruJava(generated) care conține diferite instanțe de cod. Nu le veți edita în acest tutorial, dar este bine să știți că există.

activarea legării datelor în activități, fragmente și cod aferent

acum, când aplicația și aspectele știu că vor folosi legarea datelor, trebuie să faceți modificări la codul dvs. Așa cum am menționat mai devreme, veți lucra cu cele trei fișiere din folderul vizualizare.

adăugarea de date obligatorii pentru activități

deschideți GroceryListActivity.kt. Notă există mai multe TODOs în fișier. Le veți înlocui de sus în jos pe măsură ce aflați cum legarea datelor configurează aspectele XML cu codul.

primulTODO, în linia 53, Vă spune să eliminați elementele de vizualizare, care sunt Button, RecyclerView și TextView. Toate aceste obiecte fac referire la elementele din aspect.activity_grocery_list. Cu Biblioteca de legare a datelor, nu este nevoie să creați variabile pentru fiecare, deoarece biblioteca face asta pentru dvs.

înlocuiți aceste trei linii cu următoarea linie de cod.

private lateinit var binding: ActivityGroceryListBinding

acest cod creează o instanță a clasei de legare create automat pentru activity_grocery_list.xml. Mai târziu, veți inițializa prin onCreate.

când adăugați acest cod, Android Studio vă solicită să importați unele dependențe. Fă cum ți-am sugerat. Nu vă faceți griji cu privire la erori, deoarece le veți remedia într-un minut.

import com.raywenderlich.android.gobuy.databinding.ActivityGroceryListBinding

importând această clasă, faceți o referință la clasa de legare din pasul anterior.

legarea vizualizării

apoi, înlocuiți apelul lasetContentView(R.layout.plain_activity) înonCreate cu:

binding = DataBindingUtil.setContentView(this, R.layout.activity_grocery_list)

acest cod folosește o clasă de bibliotecă de legare a datelor numită DataBindingUtil pentru a seta vizualizarea conținutului. Această linie este foarte asemănătoare cu cea pe care ați eliminat-o înainte, dar acum asociază codul cu legarea datelor.

3. Eliminați liniile de cod findViewById.

acum Puteți elimina cele trei linii cufindViewById înonCreate, care probabil arată o eroare după ultima modificare. Puteți elimina aceste linii, deoarece nu trebuie să căutați vizualizările după ID-uri, deoarece le veți popula prin variabile de aspect.

înainte de legarea datelor,findViewById() a fost cel mai comun mod de a conecta aspectul și Codul. A cauzat multe probleme, deoarece erorile s-au întâmplat în timpul rulării și, uneori, aceste erori nu au fost detectate decât după producție.

accesarea vizualizării copii

eliminați liniile de cod rămase în onCreate și înlocuiți-le cu următoarele:

Iată o defalcare pas cu pas:

  1. prima parte leagă RecyclerView la managerul de aspect corespunzător din fișierul XML. RecyclerViews sunt un subiect separat, dar la un nivel ridicat, managerul de aspect liniar este elementul din vizualizare care afișează lista articolelor alimentare.
  2. RecyclerView are, de asemenea, un adaptor care devine elementele și le atribuie aspectul
  3. în cele din urmă, vă lega addItemButton la metoda de clic.

ești un pic confuz de toate TODO elemente? Aruncați o privire la următoarea captură de ecran pentru a vedea cum ar trebui să arate acum onCreate:

observați că ultimele trei metode au încă erori. Le vei repara în secțiunea următoare.

eliminarea erorilor

înlocuiți ultimele linii din interiorul deleteGroceryItem cu:

//groceriesTotal.text = viewModel.getTotal().toString()binding.rvGroceryList.adapter?.notifyDataSetChanged()

linia de mai sus spune RecyclerView, care afișează lista dvs. de alimente, că ați eliminat un element din listă și trebuie să se reîmprospăteze. Veți remedia suma totală mai târziu în tutorial, așa că comentați această linie deocamdată.

este posibil să observați schimbarea necesară pentruonDialogPositiveClick este foarte asemănătoare cu cea pe care tocmai ați făcut-o. Schimbați linia cu o eroare la:

binding.rvGroceryList.adapter?.notifyDataSetChanged()

această linie informează RecyclerView că ori de câte ori faceți clic pe butonul Adăugare din alertă, lista dvs. s-a schimbat.

așa cum ați făcut în trecut metoda, comentați codul pentru total până când reveniți la el mai târziu:

//groceriesTotal.text = viewModel.getTotal().toString()

sunteți la două erori în fișier! Ambele se referă la addItemButton. După cum probabil ați ghicit, trebuie să schimbați aceste linii pentru a face referire la obiectul obligatoriu. Înlocuiți linia cu o eroare în interiorul onDialogPositiveClick la:

Snackbar.make(binding.addItemButton, "Item Added Successfully", Snackbar.LENGTH_LONG).setAction("Action", null).show()

și eroarea din onDialogNegativeClick cu:

Snackbar.make(binding.addItemButton, "Nothing Added", Snackbar.LENGTH_LONG).setAction("Action", null).show()

diferența în ambele metode este acum addItemButton este asociată cu legarea prin binding.addItemButton.

ai rezolvat toate erorile! Puteți testa în cele din urmă modificările.

Construiți și rulați. Testați-l așa cum ați făcut în secțiunile anterioare. Observi ceva diferit?

aplicația funcționează ca înainte, dar totalul nu se afișează. Nu-ți face griji! Acest lucru se întâmplă din cauza celor două linii de cod pe care le-ați comentat mai sus. Vei rezolva asta în continuare.

adăugarea de date de legare la adaptoare

apoi, veți conecta GroceryAdapter la clasele de legare, așa cum ați făcut pentru GroceryListActivity. Procesul este destul de simplu și implică pași foarte asemănători.

deschideți Băcănieadaptor.kt și începând de jos, înlocuiți întreaga ViewHolder cu următorul cod:

Uită-te la cod înainte și după. Anterior, ViewHolder a făcut referire doar la punctele de vedere. Aplicând legarea cu noul cod, setați și valoarea pentru articol și preț. Două linii au fost comentate pentru că ar arunca erori pe care le veți remedia mai târziu.

după această modificare,onBindViewHolder nu mai recunoaște obiectele de vizualizare, deoarece acestea nu mai există. Pentru a remedia acest lucru, înlocuiți codul din această metodă cu următoarele:

cu acest cod, atribuiți ascultătorii butoanelor de editare și ștergere. De asemenea, legați fiecare element din listă în vizualizarea recycler.

efectuați o ultimă modificare a adaptorului. Înlocuiți codul onCreateViewHolder cu:

deoarece adaptorul este o clasă pe care o utilizați pentru a afișa fiecare dintre rânduri în vizualizarea recycler și ați legat suportul de vizualizare la clasele de legare, aspectul folosește acum legarea. Cu acest cod, creați o instanță a suportului de vizualizare pentru rândul corespunzător prin clasele de legare.

Construiți și rulați. Testați aplicația și adăugați un element. Oh nu! Textul listei a dispărut!

nu vă faceți griji! În pasul următor, veți adăuga lista și etichetele totale înapoi pe ecran cu legarea datelor.

legarea valorii

legarea valorii se referă la crearea variabilelor pentru clasele de legare. Kotlin, machetele se actualizează automat ca și cum ar observa direct rezultatele codului. Există două moduri de actualizare a valorilor: variabile de aspect și expresii de aspect.

variabile de aspect

variabilele din etichetele de date pe care le-ați adăugat în partea de sus a fișierelor de aspect descriu o proprietate dintr-un aspect de legare a datelor. Dacă nu sunteți sigur care sunt etichetele de date, deschideți oricare dintre cele trei fișiere de aspect pe care le-ați modificat la începutul acestui tutorial. Iată o captură de ecran pentru a vă ajuta să le fața locului:

expresii aspect

puteți scrie, de asemenea, expresii prin așa-numitul limbaj de Expresie. Puteți gestiona evenimentele din vizualizări și puteți actualiza sau formata datele în consecință.

notă: conform documentației Android, expresiile de aspect ar trebui să fie mici și simple, deoarece nu pot fi testate unitar și au suport IDE limitat. În schimb, Android recomandă utilizarea adaptoarelor de legare. Nu veți lucra cu adaptoare de legare în acest tutorial; este un subiect mai mare care ar putea fi propriul tutorial.

acum că ați aflat că puteți adăuga valori între etichetele de date din machete, puteți vedea de ce etichetele din aplicație au încetat să funcționeze. Vei rezolva asta în continuare.

valori de legare în activități

mergeți la activity_grocery_list.xml și localizați etichetele de date în partea de sus a fișierului. Adăugați următorul cod între etichetele de date:

<variable name="totalAmount" type="String" />

prin adăugarea acestei variabile, codul dvs.

localizați unTODO în partea de jos a fișierului. Notăandroid:text="" este gol. Între ghilimele, faceți referire la variabila creată:

android:text="@{totalAmount}"

cu această referință, anunțați aspectul unde să plasați valoareatotalAmount.

apoi, capul înapoi la GroceryListActivity și decomentați următoarea linie:

binding.totalAmount = viewModel.getTotal().toString()

aceasta spune obiectului de legare a datelor să localizeze suma totală pe care ați creat-o în aspect și să o actualizeze cu valoarea returnată din metoda getTotal în viewModel.

găsiți cealaltă linie comentată și eliminați comentariul astfel încât valoareatotalAmount să fie atribuită. Ar trebui să arate după cum urmează:

binding.totalAmount = String.format("%.2f", viewModel.getTotal())

codul de aici localizează totalAmount și îl formatează pentru a afișa până la două zecimale.

Construiți și rulați. Adăugați un element și observați că suma totală este acolo. Bun început, dar tot trebuie să obțineți etichetele listei înapoi. Între timp, aplicația dvs. ar trebui să arate astfel:

valori de legare în Adaptoare

pașii pentru adaptor sunt similari cu cei din activitatea pe care ați fixat-o. Același lucru ar fi valabil și pentru orice alt fișier de aspect, de exemplu, un fragment. mai întâi, deschideți grocery_list_item.xml și localizați eticheta de date în partea de sus. Adăugați aceste variabile acolo:

<variable name="itemName" type="String"/><variable name="price" type="String" />

prima face referire la numele articolului pe care l-ați adăugat în listă, cum ar fi pâinea sau brânza. Al doilea face referire la prețul unitar, care este un număr ca 10 sau 200.

Acum, plasați variabilele corespunzătoare în atributele textului. Le puteți localiza cu ușurință, deoarece au TODO comentarii înaintea lor. Pentru numele elementului, adăugați acest cod:

android:text="@{itemName}"

codul de mai sus face referire la conținutul variabil pe care l-ați creat în etichetele de date.

faceți același lucru pentru preț:

android:text="@{price}"

în acest caz, faceți referire la valoarea variabilei de preț din etichetele de date.

deschideți GroceryAdapter și localizați codul comentat. În acest caz, nu este nevoie să îl schimbați, deci eliminați comentariul. Acum funcționează!

Construiți și rulați. Aplicația dvs. este pe deplin funcțională acum!

Joacă-te cu el și asigură-te că totul funcționează așa cum era de așteptat. După cum puteți vedea în captura de ecran, utilizatorul s-a răzgândit cu privire la utilizarea gemului în sandvișurile lor și l-a schimbat în șuncă. De aceea, având un buton de editare este la îndemână.

Felicitări că ați ajuns aici!

unde să mergem de aici?

descărcați fișierele de proiect finalizate făcând clic pe butonul Descărcare materiale din partea de sus sau de jos a acestui tutorial.

felicitări pentru Conversia unei aplicații existente pentru a utiliza o abordare mai sigură și mai modernă a dezvoltării aplicațiilor în Android folosind legarea datelor.

dacă doriți să aflați mai multe despre acest subiect, aruncați o privire la:

  • MVVM și legarea datelor: modele de Design Android
  • componente de arhitectură Android Jetpack: Noțiuni de bază
  • componente de arhitectură Android: Date Live

Dacă aveți sugestii, întrebări sau dacă doriți să arătați ce ați făcut pentru a îmbunătăți acest proiect, Alăturați-vă discuției de mai jos.

raywenderlich.com săptămânal

raywenderlich.com buletinul informativ este cel mai simplu mod de a fi la curent cu tot ceea ce trebuie să știți ca dezvoltator mobil.

obțineți un rezumat săptămânal al tutorialelor și cursurilor noastre și primiți un curs gratuit de e-mail aprofundat ca bonus!

evaluare medie

4.9/5

adăugați o evaluare pentru acest conținut

Conectați-vă pentru a adăuga o evaluare

15 evaluări

Lasă un răspuns

Adresa ta de email nu va fi publicată.