Tietojen Sitominen Androidissa: aloittaminen

kooditiedostojen yhdistäminen käyttöliittymiin on yksi yleisimmistä tehtävistä, joita Android-Kehittäjä kohtaa. Niin yksinkertaista kuin se kuulostaakin, tämä prosessi aiheuttaa monia ajonaikaisia virheitä ja kuluttaa paljon aikaa. Eikö olisi hienoa, jos kirjasto hoitaisi sen?

tietoja sitova kirjasto on täällä pelastamassa! Android esitteli tämän kirjaston osana Google I/O 2018-kirjastojen Jetpack-sarjaa.

tietojen Sitominen mahdollistaa näkymien ja tietolähteiden välisen viestinnän luotettavasti ja yksinkertaisesti. Tämän mallin noudattaminen on kriittistä monille tärkeille Android-arkkitehtuureille, erityisesti MVVM: lle, joka on tällä hetkellä yksi käytetyimmistä Android-arkkitehtuureista.

tässä opetusohjelmassa rakennetaan ostoslista-sovellus GoBuy, jonka avulla opetellaan, miten tietojen sitova kirjasto integroidaan olemassa oleviin Android-projekteihin. Matkan varrella opit:

• kuinka mahdollistaa tietojen Sitominen projektissasi
• miten muuntaa olemassa oleva layout-tiedosto sellaiseksi, joka toimii tietojen sitomisen kanssa
• miten toimia tietojen sitomisen kirjaston tuottaman koodin kanssa toiminnassasi ja fragmentteina
• kuinka käyttää tietojen sitomista RecyclerView-ja ViewHolder-ohjelmissa

aloittaminen

Lataa aloitusprojekti klikkaamalla opetusohjelman ylä-tai alareunassa olevaa Download Materials-painiketta ja pura se. Pura sekä aloita että lopeta kansiot zip-tiedostosta. Avaa Aloita projekti valitsemalla Tuo projekti (Gradle, Eclipse ADT jne.) Android Studio 3.5: n tai uudemman aloitusnäytön näytöltä.

odota Gradlen synkronoinnin valmistumista. Katso projektin rakennetta.

kuten yllä olevasta kuvakaappauksesta näkyy, kansiorakenne noudattaa MVVM-arkkitehtuuria. Mallille on tiedosto, toinen näkymälle ja yksi Viewmallille. Tämän opetusohjelman aikana, voit työskennellä tiedostojen View-kansiossa, sekä asettelu XML-tiedostoja resursseja/layout, kuten alla olevassa kuvakaappauksessa.

Rakenna ja aja. Näet alkuperäisen version ostoslistastasi.

sovellus on toimiva ja helppo navigoida. Kokeile tuotteen lisäämistä klikkaamalla Lisää kohde-painiketta näytön vasemmassa yläkulmassa. Täytä avautuva ikkuna ja napsauta Tallenna-painiketta. Kohde näkyy luettelossa, jossa on mahdollisuus muokata tai poistaa sitä.

sano, että haluat tehdä voileipiä ystävillesi. Sinun täytyy ostaa yksi leipä, yksi purkki hilloa, kaksi pakettia juustoa ja purkki majoneesia. Lisää nämä ostoslistallesi.

saitko samanlaisen tuloksen kuin yllä oleva kuvakaappaus? Kokeile pelata eri arvoilla, kunnes tunnet olosi mukavaksi navigoidessasi sovelluksen kautta.

ennen kuin sukellat projektiin, on tärkeää oppia hieman lisää tietojen sitomisesta.

Miksi käyttää tiedon sitomista

jokainen kehittäjä haluaa puhdasta ja ymmärrettävää koodia, mutta sen luominen on helpommin sanottu kuin tehty. Ihmiset kiirehtivät, julkaisuja tulee yksi toisensa jälkeen, asiakkaat haluavat tuloksia ja ennen kuin huomaatkaan, koodisi on sekaisin.

tämän tietäen Android-tiimi päätti helpottaa tilannetta standardisoimalla kehitystä. Tätä varten he käynnistivät Jetpack-kirjastot, joihin kuuluu tietojen sitova kirjasto. Tämä kirjasto tarjoaa useita etuja:

1. vähemmän koodia: pitämällä koodin toiminnassa ja fragmentit pieninä, se auttaa kirjoittamaan puhtaampaa ja luettavampaa koodia.
2. vähemmän virheitä: Sidonta tarkistetaan käännösaikaan.
3. nopeammat sovellukset: koska sidontaa ei tehdä onCreate, sovellus toimii nopeammin.
4. turvallisempi yhteys näkymien ja koodin välillä: koska se ei sido suorituksen aikana, on turvallisempaa saada KÄYTTÖLIITTYMÄKOMPONENTIT kuin findViewById().
5. turvallisempi yhteys näkymien ja toiminnan välillä: tietojen sitominen on turvallisempaa kuin turvautuminen onClick(), joka voi kaatua, jos et toteuttanut pyydettyä menetelmää.
6. helpompaa: koska siinä on vähemmän koodia ja se aiheuttaa vähemmän virheitä, sitä on helpompi testata ja ylläpitää.

nyt kun ymmärrät hyödyt, on aika keskustella siitä, miten tietojen Sitominen toimii.

miten tietojen Sitominen toimii

tietojen sitomisessa on kyse näkymien yhdistämisestä XML-asettelussa tietoobjekteihin: tässä tapauksessa Kotlin-koodiin. Tietoja sitova kirjasto luo tähän prosessiin tarvittavat luokat.

tietojen sitomista käyttävät XML-tiedostot ovat erilaisia, koska ne alkavat juurella layout tag, jota seuraa data elementti ja view root Elementti. Tämä näkymä root elementti on mitä root olisi ei-sitova asettelutiedosto.

jokaisella layout-tiedostolla on tällöin oma luotu tiedon sidontaluokkansa. Jetpack-kirjasto tekee työn puolestasi. Oletuksena luokan nimi on asettelutiedoston nimi Pascalin tapauksessa ja sanan sitova lopussa.

esimerkiksi tässä projektissa activity_grocery_list.xml on sitova Luokka ActivityGroceryListBinding.

tietojen sitomisella on kolme pääasiallista käyttötarkoitusta:

• tietojen osoittaminen.
• käsittelee käyttäjätapahtumia.
• kutsumalla toimintoja asettelumuuttujista.

tätä silmällä pitäen on aika valmistella hanke tietojen sitomiseksi.

konfiguroitaessa tietojen sitomista

ensin määrität projektin tietojen sitomista varten. Avaa rakennus.gradle sovelluksen hakemistosta. Etsi TODO kommentti tämän tiedoston alalaidasta ja lisää siihen seuraava koodi:

dataBinding { enabled true}

Tämä kertoo Gradlelle, että haluat rakentaa projektisi Data Binding Libraryn avulla.

Rakenna ja aja. Näet saman näytön kuin alussa.

seuraavaksi muunnat olemassa olevan XML-asettelun toimimaan tietojen sitomisella.

tavallisen XML-asettelun muuttaminen Tietojen sitovaksi asetteluksi

tavallisen XML-asettelutiedoston muuntamiseksi tietojen sitovaksi asetteluksi on noudatettava kolmea yksinkertaista vaihetta:

1. kääri asettelu layout tag.
2. lisää asettelumuuttujat (valinnainen).
3. lisää asettelulausekkeet (valinnainen).

toistat vaiheen yksi jokaisessa projektin kolmessa XML-asettelussa. Aloita avaamalla activity_grocery_lista.xml. Löydät TODO tämän tiedoston yläreunasta.

sinun täytyy sulkea Tämä tagi aivan tiedoston alareunassa. Joten, Mene riville 63, lisää uusi rivi ja sulje se seuraavalla koodilla:

</layout>

kun tämä koodi on lisätty, tämä asettelu voi käyttää tietojen sitomista. Muuten, se olisi standardi layout tiedosto ja luoda automaattinen sitova tiedostoja.

virheiden siivoaminen

rajoituksen asettelutunnisteessa näkyy nyt varoitus turhista ilmoituksista. Voit korjata tämän poistamalla kolme riviä, jotka alkavat kirjaimilla xmlns:androidxmlns:app ja xmlns:tools

toista yllä mainitut vaiheet vielä kerran grocery_list_itemissä.XML

Rakenna ja suorita. Yritä lisätä, muokata ja poistaa muutamia kohteita ja nähdä, että mikään kaatuu.

Autogeneroidut Sidontaluokat

aiemmin selvisi, että tiedon Sidontakirjasto luo automaattisesti sidontaluokkia. Nyt, näet luotu luokat. Tutustu alla olevaan kuvakaappaukseen nähdäksesi, missä ne ovat tiedostorakenteessa.

tietojen sitomisen mahdollistaminen toiminnoissa, fragmenteissa ja niihin liittyvässä koodissa

nyt kun sovellus ja asettelut tietävät käyttävänsä tietojen sitomista, sinun on tehtävä muutoksia koodiisi. Kuten aiemmin mainittiin,voit työskennellä kolme tiedostoa näkymäkansiossa.

tietojen Sitominen toimintaan

avoin Päivittäistavarakauppa.kt. Huomaa, että tiedostossa on useita TODOs. Voit korvata ne ylhäältä alas kuin opit, miten tietojen Sitominen määrittää XML asetteluja koodin.

ensimmäinen TODO, rivillä 53, kehottaa poistamaan katselukappaleet, jotka ovat Button, RecyclerView ja TextView. Kaikki nämä esineet viittaavat kohteisiin layout.activity_grocery_lista. Tietoja sitovan kirjaston avulla sinun ei tarvitse luoda muuttujia jokaiselle, koska kirjasto tekee sen puolestasi.

korvaa nämä kolme riviä seuraavalla koodirivillä.

private lateinit var binding: ActivityGroceryListBinding

tämä koodi luo ilmentymän automaattisesti luodusta sitovasta luokasta activity_grocery_listille.xml. Myöhemmin, voit alustaa kautta onCreate.

kun lisäät tämän koodin, Android Studio pyytää sinua tuomaan joitain riippuvuuksia. Tee kuten ehdotin. Älä huolehdi virheistä, sillä korjaat ne hetkessä.

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

tuomalla tähän luokkaan viitataan edellisen vaiheen sitovaan luokkaan.

sitova näkymä

korvaa seuraavaksi kutsu setContentView(R.layout.plain_activity) in onCreate kanssa:

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

tämä koodi käyttää DataBindingUtil-nimistä Tietokirjastoluokkaa sisältönäkymän asettamiseen. Tämä rivi on hyvin samanlainen kuin se, jonka poistit aiemmin, mutta nyt se yhdistää koodin tietojen sitomiseen.

3. Poista

koodirivit.

Nyt voit poistaa kolme riviä findViewById in onCreate, joissa on todennäköisesti virhe viimeisen muutoksesi jälkeen. Voit poistaa nämä rivit, koska sinun ei tarvitse etsiä näkymiä tunnuksilla, koska täytät ne asettelumuuttujien avulla.

ennen tietojen sitomista findViewById() oli yleisin tapa yhdistää asettelu ja koodi. Se aiheutti monia ongelmia, koska virheet tapahtuivat ajon aikana, ja joskus ne virheet havaittiin vasta tuotannon jälkeen.

näkymän lapset

poista jäljellä olevat koodirivit onCreate ja korvaa ne seuraavasti:

tässä vaiheittainen jaottelu:

1. ensimmäinen osa sitoo XML-tiedoston Kierrätysnäytteen vastaavaan layout Manageriin. RecyclerViews on erillinen aihe, mutta korkealla tasolla lineaarinen layout manager on kohde näkymässä, joka näyttää luettelon päivittäistavarakaupan kohteita.
2. Kierrätyskatsomossa on myös adapteri, joka saa kohteet ja antaa ne asetteluun
3. lopuksi sidotaan addItemButton klikkaustapaansa.

Oletko hieman hämmentynyt kaikista TODO kappaleista? Katso seuraavasta kuvakaappauksesta, miltä onCreatepitäisi näyttää nyt:

huomaa, että kolmessa viimeisessä menetelmässä on vielä virheitä. Korjaat nämä seuraavassa jaksossa.

virheiden poistaminen

korvaa viimeiset rivit deletegroceryitemin sisällä:

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

yllä oleva rivi kertoo Kierrätysnäytölle, joka näyttää ostosluettelosi, että olet poistanut listasta jonkin esineen ja sen täytyy päivittyä. Korjaat loppusumman myöhemmin opetusohjelmassa, joten kommentoi tuo rivi toistaiseksi.

saatat huomata, että onDialogPositiveClick tarvittava muutos on hyvin samankaltainen kuin juuri tehty. Muuta virherivi seuraavasti:

binding.rvGroceryList.adapter?.notifyDataSetChanged()

Tämä rivi kertoo Kierrättäjälle, että aina kun napsautat Lisää-painiketta kuulutuksessa, listasi on muuttunut.

kuten aiemmassa menetelmässäkin, kommentoi kokonaisuuden koodia, kunnes palaat siihen myöhemmin:

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

sinulla on kaksi virhettä tiedostossa! Molemmat viittaavat addItemButton. Kuten ehkä arvata, sinun täytyy muuttaa näitä rivejä tehdä viittaus sitova objekti. Korvaa rivi virheellä sisällä onDialogPositiveClick :

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

ja virhe ondialognegativeclickissä:

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

ero molemmissa menetelmissä on nyt addItemButton liittyy sitoutumiseen binding.addItemButton.

selvitit kaikki virheet! Voit vihdoin testata muutoksesi.

Rakenna ja aja. Testaa se kuten edellisissä jaksoissa. Huomaatko mitään erilaista?

sovellus toimii kuten ennenkin, mutta kokonaisuutta ei näy. Älä huoli! Tämä tapahtuu, koska kaksi riviä koodia kommentoit edellä. Korjaat sen seuraavaksi.

lisäämällä tiedon Sidonta adaptereihin

seuraavaksi yhdistetään Päivittäistavarakauppa sitoviin luokkiin, kuten teit päivittäistavarakaupan kohdalla. Prosessi on melko yksinkertainen ja sisältää hyvin samanlaisia vaiheita.

Open GroceryAdapter.kt ja alhaalta alkaen korvaa koko ViewHolder seuraavalla koodilla:

Katso koodi ennen ja jälkeen. Aiemmin ViewHolder viittasi vain näkemyksiin. Soveltamalla sitovaa uudella koodilla, asetat myös kohteen arvon ja hinnan. Kaksi riviä on kommentoitu pois, koska ne heittäisivät virheitä, jotka korjaat myöhemmin.

tämän muutoksen jälkeen onBindViewHolder lakkaa tunnistamasta näkymäobjekteja, koska niitä ei ole enää olemassa. Korjataksesi tämän, korvaa koodi tässä menetelmässä seuraavasti:

tällä koodilla määrität kuuntelijat muokkaus-ja poistopainikkeisiin. Sidot myös jokaisen kohteen kierrätysnäkymässä listalta.

tee sovittimen viimeinen muutos. Korvaa onCreateViewHolder – koodi:

koska sovitin on luokka, jota käytät näyttääksesi jokaisen kierrättäjän näkymän rivin, ja sidoit näkymän pidikkeen sidontaluokkiin, asettelu käyttää nyt sidontaa. Tällä koodilla luot näkymän haltijan esiintymän vastaavalle riville sitovien luokkien kautta.

Rakenna ja aja. Testaa sovellus ja lisää kohde. Voi ei! Listateksti on poissa!

älä huoli! Seuraavassa vaiheessa, voit lisätä luettelon ja koko etiketit takaisin näyttöön tietojen Sitominen.

Arvosidonnaisuus

Arvosidonnaisuus tarkoittaa sitovien luokkien muuttujien luomista. Heidän kanssaan, kun jokin muuttuu Kotlin koodi, asettelut automaattisesti päivittää ikään kuin ne olisivat suoraan tarkkailemalla tuloksia koodin. Arvojen päivittämiseen on kaksi tapaa: asettelumuuttujat ja asettelulausekkeet.

Asettelumuuttujat

asettelutiedostojen yläreunaan lisätyissä datatunnisteissa olevat muuttujat kuvaavat tietoja sitovan asettelun ominaisuutta. Jos et ole varma, mitkä ovat datatunnisteet, avaa jokin kolmesta muokkaamastasi asetustiedostosta tämän opetusohjelman alussa. Tässä kuvakaappaus, joka auttaa niiden bongaamisessa:

Layout Expressions

voit myös kirjoittaa ilmaisuja niin sanotun ilmaisukielen kautta. Voit käsitellä tapahtumia näkymissä ja päivittää tai muotoilla tiedot sen mukaisesti.

nyt kun olet oppinut, että voit lisätä arvoja datatunnisteiden väliin asetteluissasi, voit nähdä, miksi sovelluksen tarrat lakkasivat toimimasta. Korjaat sen seuraavaksi.

sitovat arvot toiminnoissa

siirry kohtaan activity_grocery_list.xml ja paikantaa tiedot tunnisteet yläosassa tiedoston. Lisää seuraava koodi datatunnisteiden väliin:

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

lisäämällä tähän muuttujaan Kotlin-koodisi tietää nyt, mitä arvoa aiemmin kadonneelle kokonaismäärämerkinnälle kannattaa tarkkailla.

Etsi TODO tiedoston alalaidasta. Ilmoitus android:text="" on tyhjä. Lainausmerkkien välissä viitataan luotuun muuttujaan:

android:text="@{totalAmount}"

tällä viitteellä annetaan asettelun tietää, mihin sijoitetaan totalAmount.

seuraavaksi suunnataan Takaisin ruokakauppaan ja poistetaan seuraava rivi.:

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

Tämä kertoo tietoja sitovan objektin paikantavan asettelussa luomasi kokonaismäärän ja päivittävän sen näkymämallissa getTotal-menetelmästä palautetulla arvolla.

Etsi toinen kommentoitu rivi ja poista kommentti niin totalAmount arvo saa määrityksen. Sen pitäisi näyttää seuraavanlaiselta:

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

koodi tästäkin paikantaa totalAmount ja muotoilee sen näyttämään enintään kahden desimaalin tarkkuudella.

Rakenna ja aja. Lisää kohde ja huomaa kokonaismäärä on siellä. Hyvä alku, mutta vielä pitää saada listamerkinnät takaisin. Samalla sovelluksen pitäisi näyttää tältä:

sitovat arvot adaptereissa

sovittimen vaiheet ovat samanlaiset kuin vahvistamassasi toiminnassa. Sama pätee mihin tahansa muuhun asettelutiedostoon, esimerkiksi katkelmaan.

ensimmäinen, avoin ruokakauppa_list_item.xml ja paikantaa tiedot tag yläreunassa. Lisää nämä muuttujat sinne:

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

ensimmäiset viitteet luetteloon lisäämäsi kohteen nimi, kuten leipä tai juusto. Toinen viittaa yksikköhintaan, joka on luku 10 tai 200.

nyt, laita vastaavat muuttujat tekstin attribuutteihin. Voit paikantaa ne helposti, koska niillä on TODO kommentteja ennen niitä. Kohteen nimen osalta lisätään tämä koodi:

android:text="@{itemName}"

yllä oleva koodi viittaa datatunnisteissa luomaasi muuttujasisältöön.

tee sama hinnalle:

android:text="@{price}"

tässä tapauksessa viitataan hintamuuttujan arvoon datatunnisteista.

avaa ruokakauppa ja etsi kommentoitu koodi. Tässä tapauksessa sitä ei tarvitse muuttaa, joten poista kommentti. Nyt se toimii!

Rakenna ja aja. Sovellus on täysin toimiva nyt!

leikittele Sillä ja varmista, että kaikki toimii odotetusti. Kuten kuvakaappauksesta näkyy, käyttäjä muutti mielensä hillon käytöstä voileivissään ja vaihtoi sen kinkkuun. Siksi ottaa muokata painiketta on kätevä.

onnea tänne pääsystä!

minne tästä eteenpäin?

Lataa valmiit projektitiedostot napsauttamalla tämän opetusohjelman ylä-tai alalaidassa olevaa Download Materials-painiketta.

onnittelut olemassa olevan sovelluksen muuntamisesta käyttämään turvallisempaa, nykyaikaisempaa lähestymistapaa sovelluskehitykseen Androidissa tietojen sitomisen avulla.

Jos haluat lisätietoa aiheesta, tutustu:

• MVVM and Data Binding: Android Design Patterns
• Android Jetpack Architecture Components: Getting Started
• Android Architecture Components: Live Data

Jos sinulla on ehdotuksia, kysymyksiä tai haluat esitellä, mitä teit tämän projektin parantamiseksi, liity keskusteluun alla.