The playground

More information here

Vázání dat v Android: začínáme

Propojení kódu soubory s uživatelské rozhraní je jedním z nejčastějších úkolů, Android developer tváře. Jak jednoduché to zní, tento proces způsobuje mnoho runtime chyb a spotřebovává spoustu času. Nebylo by skvělé, kdyby se o to postarala knihovna? Knihovna vázání dat je zde k záchraně! Android představil tuto knihovnu jako součást sady knihoven Jetpack na Google […]

Propojení kódu soubory s uživatelské rozhraní je jedním z nejčastějších úkolů, Android developer tváře. Jak jednoduché to zní, tento proces způsobuje mnoho runtime chyb a spotřebovává spoustu času. Nebylo by skvělé, kdyby se o to postarala knihovna?

Knihovna vázání dat je zde k záchraně! Android představil tuto knihovnu jako součást sady knihoven Jetpack na Google i / o 2018.

vazba dat umožňuje spolehlivě a jednoduše zvládnout komunikaci mezi pohledy a zdroji dat. Sledování tohoto vzoru je rozhodující pro mnoho důležitých architektur ve vývoji Androidu, zejména MVVM, v současné době jedna z nejpoužívanějších architektur Androidu.

v tomto tutoriálu vytvoříte GoBuy, aplikaci nákupního seznamu, abyste se naučili integrovat knihovnu vázání dat do stávajících projektů systému Android. Cestou se naučíte:

  • Jak povolit datové vazby v projektu
  • Jak převést existující rozložení souboru, aby se ten, který pracuje s datové vazby
  • Jak pracovat s kód vygenerovaný Vázání Dat Knihovna ve vaší Činnosti a Fragmenty
  • Jak používat datové vazby v RecyclerView a ViewHolder
Poznámka: Tento kurz předpokládá, že jste znát základy vývoje pro Android s Kotlin. Pokud jste v Kotlinu nováčkem, podívejte se na tento úvodní tutoriál Kotlin. Pokud jste ve vývoji systému Android zcela noví, přečtěte si tento úvodní návod pro vývoj systému Android, abyste se seznámili se základy.

Začínáme

Stáhněte si Projekt starter kliknutím na tlačítko Stáhnout materiály v horní nebo dolní části tutoriálu a rozbalte jej. Extrahujte počáteční i koncové složky ze souboru zip. Otevřete projekt begin výběrem Import project (Gradle, Eclipse ADT atd.) z uvítací obrazovky Android Studio 3.5 nebo novější.

počkejte na dokončení synchronizace Gradle. Podívejte se na strukturu projektu.

jak můžete vidět na obrázku výše, struktura složek sleduje architekturu MVVM. K dispozici je soubor pro Model, další pro zobrazení a jeden pro ViewModel. Během tohoto tutoriálu budete pracovat se soubory ve složce Zobrazit, stejně jako soubory XML rozvržení ve zdrojích / rozvržení, jak je znázorněno na obrázku níže.

sestavení a spuštění. Uvidíte počáteční verzi nákupního seznamu.

aplikace je funkční a snadno ovladatelné. Zkuste přidat produkt kliknutím na tlačítko Přidat položku v levém horním rohu obrazovky. Vyplňte zobrazené dialogové okno a klikněte na tlačítko Uložit. Položka se zobrazí v seznamu s možností úpravy nebo odstranění.

řekněte, že chcete udělat sendviče pro své přátele. Musíte si koupit jeden bochník chleba, jednu sklenici džemu, dva balíčky sýra a sklenici majonézy. Přidejte je do svého nákupního seznamu.

dostali jste výsledek podobný výše uvedenému snímku obrazovky? Zkuste hrát s různými hodnotami, dokud se nebudete cítit pohodlně při procházení aplikací.

než se ponoříte do projektu, je důležité se dozvědět něco více o vazbě dat.

Proč používat vázání dat

každý vývojář chce čistý a srozumitelný kód, ale jeho vytvoření se snadněji řekne, než udělá. Lidé spěchají, zprávy přicházejí jeden po druhém, klienti chtějí výsledky a než se nadějete, váš kód je nepořádek.

s tímto vědomím se tým Android rozhodl věci usnadnit standardizací vývoje. Za tímto účelem spustili knihovny Jetpack, které zahrnují knihovnu vázání dat. Tato knihovna nabízí několik výhod:

  1. méně kódu: udržováním kódu v činnostech a fragmentech malých vám pomůže psát čistší a čitelnější kód.
  2. méně chyb: vazba je kontrolována v době kompilace.
  3. rychlejší aplikace: protože vazba není provedena v onCreate, aplikace běží rychleji.
  4. bezpečnější spojení mezi pohledy a kódem: protože se neváže za běhu, je bezpečnější získat komponenty UI než findViewById().
  5. Bezpečnější spojení mezi názory a akce: vázání Dat je bezpečnější než se spoléhat na onClick(), který může selhat, pokud jste neměli provádět požadovaná metoda.
  6. jednodušší: protože má méně kódu a způsobuje méně chyb, je snazší testovat a udržovat.

Nyní, když pochopíte výhody, je čas diskutovat o tom, jak funguje vazba dat.

jak funguje vazba dat

vazba dat je o propojení pohledů v rozvržení XML s datovými objekty: v tomto případě Kotlin kód. Knihovna vázání dat generuje třídy potřebné pro tento proces.

Rozvržení XML soubory, které používají datové vazby jsou jiné, protože oni začít s root layout tag následuje data prvek a view root elementu. Tento kořenový prvek zobrazení je to, co by váš kořen byl v nezávazném souboru rozvržení.

každý soubor rozvržení má pak svou vlastní třídu vázání generovaných dat. Knihovna Jetpack dělá práci za vás. Ve výchozím nastavení je název třídy název souboru rozvržení v Pascalu a na konci je slovo vazba.

například v tomto projektu activity_grocery_list.xml má třídu vazby ActivityGroceryListBinding.

vazba dat má tři hlavní použití:

  • zobrazení dat.
  • zpracování uživatelských událostí.
  • vyvolání akcí na proměnných rozvržení.

s ohledem na to je čas připravit Projekt na vazbu dat.

konfigurace pro vazbu dat

nejprve nakonfigurujete projekt pro vazbu dat. Otevřete sestavu.gradle z adresáře aplikace. Vyhledejte TODO komentář v dolní části tohoto souboru a přidejte tam následující kód:

dataBinding { enabled true}

to říká Gradle, že chcete vytvořit svůj projekt s knihovnou pro vázání dat.

sestavení a spuštění. Uvidíte stejnou obrazovku jako na začátku.

dále převedete existující rozložení XML pro práci s vazbou dat.

Transformovat Standardní Rozvržení XML Do Datové Vazby Rozložení

převést pravidelné rozvržení XML souboru do datové vazby layout, musíte to sledovat tři jednoduché kroky:

  1. Zabalte své rozvržení s layout tag.
  2. přidat proměnné rozvržení (volitelné).
  3. přidat výrazy rozvržení (volitelné).

zopakujete první krok v každém ze tří rozvržení XML v projektu. Začněte otevřením seznamu activity_grocery_list.datum. V horní části tohoto souboru najdete TODO.

tuto značku musíte zavřít v dolní části souboru. Takže, jděte na řádku 63, přidejte nový řádek a zavřete jej s následující kód:

</layout>

tento kód přidán, toto rozložení lze použít datové vazby. V opačném případě by to byl standardní soubor rozvržení a generoval automatické vázací soubory.

vyčištění chyb

značka rozvržení omezení nyní zobrazuje varování týkající se redundantních prohlášení. Chcete-li to, vyjměte tři řádky začínající xmlns:androidxmlns:appxmlns:tools

Poznámka: Android studio má zkratku k vytvoření tohoto uspořádání tag: Control/Alt + Enter nebo Pravým tlačítkem myši + Show rámci akce ▸ Převést na data, závazný layout.
Poznámka: Všimněte si, že odsazení není správné po přidání těchto úryvků kódu. Chcete-li to opravit, klikněte na nabídku kód v aplikaci Android Studio a vyberte přeformátovat kód. To identifikuje kód správně.

opakujte výše uvedené kroky ještě jednou v grocery_list_item.xml

sestavení a spuštění. Zkuste přidat, upravit a odstranit několik položek a uvidíte, že se nic nestane.

automaticky generovaný Závazné třídy

Dříve jste se naučili, že Údaje Závazné Knihovna automaticky generuje třídy za závazné. Nyní můžete vidět generované třídy. Podívejte se na snímek obrazovky níže a zjistěte, kde jsou ve struktuře souborů.

Poznámka: existuje samostatný soubor pro Java(generated), který obsahuje různé instance kódu. V tomto tutoriálu je nebudete upravovat, ale je dobré vědět, že existují.

povolení vazby dat v aktivitách, fragmentech a souvisejícím kódu

Nyní, když aplikace a rozvržení vědí, že budou používat vazbu dat, musíte provést změny kódu. Jak již bylo zmíněno, budete pracovat se třemi soubory uvnitř složky Zobrazit.

přidání vazby dat k aktivitám

otevřete GroceryListActivity.kt. Všimněte si, že v souboru je několik TODO. Nahradíte je shora dolů, jak se dozvíte, jak vazba dat konfiguruje rozvržení XML s kódem.

první TODO, v souladu 53, vám řekne, odstranit zobrazení položek, které jsou Tlačítko, RecyclerView a TextView. Všechny tyto objekty odkazují na položky v rozvržení.activity_grocery_list. S knihovnou pro vázání dat nemusíte vytvářet proměnné pro každou z nich, protože Knihovna to dělá za vás.

nahraďte tyto tři řádky následujícím řádkem kódu.

private lateinit var binding: ActivityGroceryListBinding

tento kód vytvoří instanci automaticky vytvořené třídy vazby pro activity_grocery_list.datum. Později, inicializujete prostřednictvím onCreate.

Když přidáte tento kód, Android Studio vás požádá o import některých závislostí. Udělejte, co jste navrhli. Nedělejte si starosti s chybami, protože je opravíte za minutu.

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

importem této třídy vytvoříte odkaz na třídu vazby z předchozího kroku.

Závazný Názor

Next, nahradit volání setContentView(R.layout.plain_activity)onCreate s:

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

Tento kód používá Data Binding Knihovny třídy s názvem DataBindingUtil nastavit zobrazení obsahu. Tento řádek je velmi podobný tomu, který jste dříve odstranili, ale nyní spojuje kód s vazbou dat.

3. Odstraňte findViewById řádky kódu.

Nyní můžete odstranit tři řádky s findViewByIdonCreate, které jsou pravděpodobné, ukazující chyba po poslední změně. Tyto řádky můžete odstranit, protože nemusíte hledat pohledy podle ID, protože je vyplníte pomocí proměnných rozvržení.

před vázáním dat byl findViewById() nejběžnějším způsobem připojení rozvržení a kódu. To způsobilo mnoho problémů, protože chyby se staly za běhu, a někdy tyto chyby nebyly detekovány až po výrobě.

Přístup k Zobrazení, Děti

Odstranit zbývající řádky kódu v onCreate a nahradí je následující:

Zde je krok-za-krokem členění:

  1. první část váže RecyclerView na odpovídající Správce rozvržení v souboru XML. RecyclerViews jsou samostatné téma, ale na vysoké úrovni je správce lineárního rozvržení položkou v zobrazení, která zobrazuje seznam položek s potravinami.
  2. RecyclerView má také adaptér, který dostane položky a přiřadí je do rozvržení
  3. Konečně, svázat addItemButton do jeho klepněte na tlačítko metoda.

jste trochu zmateni všemi položkami TODO? Podívejte se na následující snímek obrazovky a podívejte se, jak by měl váš onCreatevypadat nyní:

Všimněte si, že poslední tři metody mají stále chyby. Opravíte je v další části.

jak se Zbavit Chyb

Nahradit poslední řádky uvnitř deleteGroceryItem s:

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

řádek výše vypráví RecyclerView, která zobrazí seznam potravin, které jste odstranili položku v seznamu a je třeba aktualizovat. Celkovou částku opravíte později v tutoriálu, takže tento řádek prozatím komentujte.

můžete si všimnout, že změna potřebná pro onDialogPositiveClick je velmi podobná té, kterou jste právě udělali. Změňte řádek s chybou:

binding.rvGroceryList.adapter?.notifyDataSetChanged()

Tento řádek říká, RecyclerView, že vždy, když klepnete na tlačítko přidat do záznamu, seznam změnil.

stejně Jako v minulosti metoda, komentář mimo kód pro celkem až budete vrátit se k němu později:

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

dole máš dvě chyby v souboru! Oba odkazují na addItemButton. Jak jste možná uhodli, musíte tyto řádky změnit, abyste odkazovali na závazný objekt. Nahraďte řádek chybou uvnitř onDialogPositiveClick na:

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

A chyba v onDialogNegativeClick s:

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

rozdíl v obou těchto metod je teď addItemButton je přidružen závazné přes binding.addItemButton.

vyřešili jste všechny chyby! Můžete konečně vyzkoušet své změny.

sestavení a spuštění. Vyzkoušejte to stejně jako v předchozích částech. Všimli jste si něčeho jiného?

aplikace funguje jako dříve,ale celkový nezobrazuje. Neboj se! To se děje kvůli dvěma řádkům kódu, které jste komentovali výše. Příště to napravíš.

přidání vazby dat do adaptérů

dále připojíte GroceryAdapter k třídám vazby, jako jste to udělali pro GroceryListActivity. Tento proces je velmi jednoduchý a zahrnuje velmi podobné kroky.

otevřít GroceryAdapter.kt a počínaje zdola nahraďte celý držák zobrazení následujícím kódem:

podívejte se na kód před a po. Dříve, výhledový uživatel odkazoval pouze na pohledy. Použitím vazby s novým kódem také nastavíte hodnotu položky a cenu. Dva řádky byly komentovány, protože by házely chyby, které opravíte později.

po této změně přestane onBindViewHolder rozpoznávat objekty zobrazení, protože již neexistují. Chcete-li to opravit, nahraďte kód v této metodě následujícím způsobem:

tímto kódem přiřadíte posluchačům tlačítka Upravit a odstranit. Můžete také vázat každou položku ze seznamu v zobrazení recycler.

proveďte poslední změnu adaptéru. Nahradit onCreateViewHolder kód:

Protože adaptér je třída, můžete použít k zobrazení jednotlivých řádků v recycler view, a jste svázaný zobrazení držitele závazné třídy, rozložení nyní používá závazné. Pomocí tohoto kódu vytvoříte instanci držáku pohledu pro odpovídající řádek prostřednictvím tříd vazby.

sestavení a spuštění. Otestujte aplikaci a přidejte položku. Ale ne! Text seznamu je pryč!

nebojte se! V dalším kroku přidáte seznam a celkové štítky zpět na obrazovku s vazbou dat.

Value Binding

Value Binding se týká vytváření proměnných pro vázací třídy. S nimi, když se něco změní ve vašem kódu Kotlin, rozvržení se automaticky aktualizují, jako by přímo sledovaly výsledky kódu. Existují dva způsoby aktualizace hodnot: proměnné rozvržení a výrazy rozvržení.

proměnné rozvržení

proměnné v datových značkách, které jste přidali v horní části souborů rozvržení, popisují vlastnost v rozvržení vazby dat. Pokud si nejste jisti, které datové značky jsou, otevřete některý ze tří souborů rozvržení, které jste upravili na začátku tohoto tutoriálu. Tady je screenshot, aby vám pomohou na místě je:

Rozvržení Výrazy

můžete také psát výrazy prostřednictvím tzv. expression language. Události můžete zpracovávat v zobrazení a podle toho aktualizovat nebo formátovat data.

Poznámka: Podle Android dokumentace, rozložení výrazy by měly být malé a jednoduché, protože nemůžou být jednotky testovány a mají omezenou podporu IDE. Místo toho Android doporučuje používat vazebné adaptéry. V tomto tutoriálu nebudete pracovat s vazebnými adaptéry; je to větší téma, které by mohlo být jeho vlastním tutoriálem.

Nyní, když jste se dozvěděli, že můžete přidávat hodnoty mezi datové značky v rozvržení, můžete vidět, proč štítky ve vaší aplikaci přestaly fungovat. Příště to napravíš.

vázání hodnot v aktivitách

přejděte na activity_grocery_list.xml a vyhledejte datové značky v horní části souboru. Mezi datové značky přidejte následující kód:

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

přidáním této proměnné nyní váš kód Kotlin ví, jakou hodnotu dodržovat pro štítek celkové částky, který dříve zmizel.

vyhledejte TODO v dolní části souboru. Upozornění android:text="" je prázdné. Mezi citace, reference na vytvořené proměnné:

android:text="@{totalAmount}"

tento odkaz, dejte rozložení vědět, kde místo hodnoty totalAmount.

dále přejděte zpět na GroceryListActivity a odkomentujte následující řádek:

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

Toto říká, že datové vazby objektu k vyhledání totalAmount jste vytvořili v rozložení a aktualizovat s vrácená hodnota z getTotal metoda v viewModel.

Najděte další komentovaný řádek a odstraňte komentář, aby byla přiřazena hodnota totalAmount. To by mělo vypadat takto:

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

kód zde také lokalizuje totalAmount a formáty, zobrazení až na dvě desetinná místa.

sestavení a spuštění. Přidejte položku a všimněte si, že celková částka je tam. Skvělý začátek, ale stále musíte získat seznam štítků zpět. Mezitím, vaše aplikace by měly vypadat takto:

Závazné Hodnoty v Adaptéry

kroky pro adaptér jsou podobné těm, které v činnosti, kterou opravena. Totéž by platilo pro jakýkoli jiný soubor rozvržení, například fragment.

nejprve otevřete grocery_list_item.xml a vyhledejte datovou značku nahoře. Přidejte zde tyto proměnné:

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

první odkazuje na název položky, kterou jste přidali do seznamu, jako je chléb nebo sýr. Druhá odkazuje na jednotkovou cenu, což je číslo jako 10 nebo 200.

Nyní umístěte odpovídající proměnné do atributů textu. Můžete je snadno najít, protože mají TODO Komentáře před nimi. Pro název položky, přidejte tento kód:

android:text="@{itemName}"

výše uvedený kód odkazuje na proměnnou obsah, který jste vytvořili v datové značky.

proveďte totéž pro cenu:

android:text="@{price}"

v tomto případě odkazujete na hodnotu cenové proměnné z datových značek.

otevřete GroceryAdapter a vyhledejte komentovaný kód. V takovém případě není třeba jej měnit, takže komentář odstraňte. Teď to funguje!

sestavení a spuštění. Vaše aplikace je nyní plně funkční!

Pohrajte si s ním a ujistěte se, že vše funguje podle očekávání. Jak můžete vidět na snímku obrazovky, uživatel změnil názor na použití džemu ve svých sendvičích a přepnul jej na šunku. Proto je užitečné mít tlačítko pro úpravy.

Gratulujeme, že jste se sem dostali!

kam odtud?

stáhněte dokončené soubory projektu kliknutím na tlačítko Stáhnout materiály v horní nebo dolní části tohoto tutoriálu.

Gratulujeme k převodu existující aplikace na bezpečnější a modernější přístup k vývoji aplikací v systému Android pomocí vazby dat.

Pokud se chcete dozvědět více o tomto tématu, podívejte se na to:

  • MVVM a Vázání Dat: Android Návrhové Vzory
  • Android Jetpack Architektura Komponent: začínáme
  • Android Architektura Komponenty: Živá Data

Pokud máte nějaké návrhy, dotazy nebo chcete předvést, co jste udělali pro zlepšení tohoto projektu, připojte se k diskusi níže.

raywenderlich.com Týdenní

raywenderlich.com newsletter je nejjednodušší způsob, jak zůstat up-to-date na vše, co potřebujete vědět jako mobilní vývojáře.

Získejte týdenní přehled našich výukových programů a kurzů a jako bonus obdržíte bezplatný e-mailový kurz do hloubky!

Průměrné hodnocení

4.9/5

Přidat hodnocení pro tento obsah

přihlaste se pro přidání hodnocení

15 hodnocení

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna.