The playground

More information here

Wiązanie danych w Androidzie: pierwsze kroki

łączenie plików kodu z interfejsami użytkownika jest jednym z najczęstszych zadań, przed którymi stoi programista Androida. Choć wydaje się to proste, proces ten powoduje wiele błędów wykonawczych i pochłania dużo czasu. Czy nie byłoby wspaniale, gdyby istniała biblioteka, która się tym zajęła? Biblioteka wiązań danych jest tutaj na ratunek! Android wprowadził tę bibliotekę jako część […]

łączenie plików kodu z interfejsami użytkownika jest jednym z najczęstszych zadań, przed którymi stoi programista Androida. Choć wydaje się to proste, proces ten powoduje wiele błędów wykonawczych i pochłania dużo czasu. Czy nie byłoby wspaniale, gdyby istniała biblioteka, która się tym zajęła?

Biblioteka wiązań danych jest tutaj na ratunek! Android wprowadził tę bibliotekę jako część pakietu bibliotek Jetpack na Google I/O 2018.

powiązanie danych umożliwia niezawodną i prostą obsługę komunikacji między widokami a źródłami danych. Podążanie za tym wzorcem ma kluczowe znaczenie dla wielu ważnych architektur w rozwoju Androida, w szczególności MVVM, obecnie jednej z najczęściej używanych architektur Androida.

w tym samouczku zbudujesz GoBuy, aplikację do listy zakupów, aby dowiedzieć się, jak zintegrować bibliotekę wiązania danych z istniejącymi projektami Androida. Po drodze nauczysz się:

  • Jak włączyć powiązanie danych w projekcie
  • Jak przekonwertować istniejący plik układu na taki, który działa z wiązaniem danych
  • jak pracować z kodem generowanym przez Bibliotekę wiązania danych w swoich działaniach i fragmentach
  • Jak korzystać z wiązania danych w RecyclerView i ViewHolder
Uwaga: Ten poradnik zakłada, że znasz podstawy programowania Androida z Kotlin. Jeśli jesteś nowy w Kotlinie, zapoznaj się z tym samouczkiem wprowadzającym do Kotlina. Jeśli jesteś zupełnie nowy w rozwoju Androida, przeczytaj ten początkujący samouczek rozwoju Androida, aby zapoznać się z podstawami.

pierwsze kroki

Pobierz projekt startowy, klikając przycisk Pobierz Materiały na górze lub na dole samouczka i rozpakuj go. Rozpakuj zarówno folder początkowy, jak i końcowy z pliku zip. Otwórz rozpocznij projekt, wybierając Importuj projekt (Gradle, Eclipse ADT itp.) z ekranu powitalnego Android Studio 3.5 lub nowszego.

poczekaj na zakończenie synchronizacji Gradle. Spójrz na strukturę projektu.

jak widać na powyższym zrzucie ekranu, struktura folderów jest zgodna z architekturą MVVM. Jest plik dla modelu, drugi dla widoku i jeden dla Viewmodela. Podczas tego samouczka będziesz pracować z plikami w folderze Widok, a także z plikami XML układu w zasobach / układzie, jak pokazano na zrzucie ekranu poniżej.

Zbuduj i uruchom. Zobaczysz początkową wersję listy zakupów.

aplikacja jest funkcjonalna i łatwa w nawigacji. Spróbuj dodać produkt, klikając przycisk Dodaj artykuł w lewym górnym rogu ekranu. Wypełnij wyświetlone okno dialogowe i kliknij przycisk Zapisz. Element pojawi się na liście z opcją jego edycji lub usunięcia.

powiedz, że chcesz zrobić kanapki dla znajomych. Musisz kupić jeden bochenek chleba, jeden słoik dżemu, dwie paczki sera i słoik majonezu. Dodaj je do listy zakupów.

Czy otrzymałeś wynik podobny do powyższego zrzutu ekranu? Spróbuj grać z różnymi wartościami, aż poczujesz się komfortowo poruszając się po aplikacji.

zanim przejdziesz do projektu, ważne jest, aby dowiedzieć się trochę więcej o wiązaniu danych.

po co używać wiązania danych

każdy programista chce czystego i zrozumiałego kodu, ale jego tworzenie jest łatwiejsze do powiedzenia niż do zrobienia. Ludzie się spieszą, wydania przychodzą jeden po drugim, klienci chcą wyników i zanim się zorientujesz, twój kod to bałagan.

wiedząc o tym, zespół Androida postanowił uprościć sprawy poprzez standaryzację rozwoju. W tym celu uruchomiono biblioteki Jetpack, które obejmują bibliotekę wiązania danych. Ta biblioteka oferuje kilka zalet:

  1. mniej kodu: poprzez utrzymywanie kodu w małych działaniach i fragmentach, pomaga pisać czystszy i bardziej czytelny kod.
  2. mniej błędów: powiązanie jest sprawdzane podczas kompilacji.
  3. szybsze aplikacje: ponieważ wiązanie nie jest wykonywane w onCreate, Twoja aplikacja działa szybciej.
  4. bezpieczniejsze połączenie między widokami a kodem: ponieważ nie jest bindowany w czasie wykonywania, bezpieczniej jest uzyskać komponenty interfejsu użytkownika niż findViewById().
  5. bezpieczniejsze połączenie między widokami i akcją: powiązanie danych jest bezpieczniejsze niż poleganie na onClick(), które może ulec awarii, jeśli Nie zaimplementowano żądanej metody.
  6. łatwiej: ponieważ ma mniej kodu i powoduje mniej błędów, łatwiej jest go testować i utrzymywać.

teraz, gdy rozumiesz korzyści, nadszedł czas, aby omówić, jak działa powiązanie danych.

jak działa powiązanie danych

powiązanie danych polega na połączeniu widoków w układzie XML z obiektami danych: w tym przypadku kod Kotlina. Biblioteka powiązania danych generuje klasy potrzebne do tego procesu.

pliki XML układu, które używają powiązania danych, są różne, ponieważ zaczynają się od znacznika głównegolayout, po którym następujedata Iview root. Ten element główny widoku jest tym, czym byłby twój root w niewiążącym pliku układu.

każdy plik układu ma własną wygenerowaną klasę powiązania danych. Biblioteka Jetpack zrobi to za Ciebie. Domyślnie nazwa klasy jest nazwą pliku układu w Pascalu i z wiązaniem słowa na końcu.

na przykład w tym projekcie activity_grocery_list.xml ma klasę wiążącą ActivityGroceryListBinding.

powiązanie danych ma trzy główne zastosowania:

  • wyświetlanie danych.
  • Obsługa zdarzeń użytkownika.
  • wywoływanie akcji na zmiennych układu.

Mając to na uwadze, nadszedł czas na przygotowanie projektu do powiązania danych.

Konfigurowanie powiązania danych

najpierw skonfigurujesz projekt powiązania danych. Otwórz budynek.gradle z katalogu aplikacji. Znajdź komentarzTODO na dole tego pliku i dodaj tam następujący kod:

dataBinding { enabled true}

To mówi Gradle, że chcesz zbudować swój projekt z biblioteką wiązań danych.

Zbuduj i uruchom. Zobaczysz ten sam ekran, co na początku.

następnie przekonwertujesz istniejący układ XML do pracy z powiązaniami danych.

przekształcenie standardowego układu XML w układ wiązania danych

aby przekonwertować zwykły plik układu XML na układ wiązania danych, musisz wykonać trzy proste kroki:

  1. zawiń swój układ za pomocą znacznikalayout.
  2. Dodaj zmienne układu (opcjonalnie).
  3. Dodaj wyrażenia układu (opcjonalnie).

powtórzysz krok pierwszy w każdym z trzech układów XML w projekcie. Zacznij od otwarcia activity_grocery_list.xml. W górnej części tego pliku znajduje się TODO.

musisz zamknąć ten znacznik na samym dole pliku. Przejdź do linii 63, Dodaj nową linię i zamknij ją następującym kodem:

</layout>

Po dodaniu tego kodu ten układ może używać powiązania danych. W przeciwnym razie byłby to standardowy plik układu i generował automatyczne pliki wiązania.

Usuwanie błędów

znacznik constraint layout wyświetla teraz ostrzeżenie dotyczące nadmiarowych deklaracji. Aby to naprawić, Usuń trzy linie zaczynające się od xmlns:androidxmlns:app I xmlns:tools

Uwaga: Android studio ma skrót do utworzenia tego znacznika układu: Control/Option + Enter lub kliknij prawym przyciskiem myszy + Pokaż akcje kontekstowe ▸ Konwertuj na układ wiązania danych.
Uwaga: Zauważ, że wcięcia nie są poprawne po dodaniu tych fragmentów kodu. Aby to naprawić, kliknij Menu kod w Android Studio i wybierz sformatuj kod. To identyfikuje kod poprawnie.

powtórz powyższe kroki jeszcze raz w grocery_list_item.XML

Budowanie i uruchamianie. Spróbuj dodać, edytować i usunąć kilka elementów i zobacz, że nic nie ulega awarii.

automatycznie generowane klasy wiązania

wcześniej dowiedziałeś się, że Biblioteka wiązania danych automatycznie generuje klasy do wiązania. Teraz możesz zobaczyć wygenerowane klasy. Spójrz na poniższy zrzut ekranu, aby zobaczyć, gdzie znajdują się w strukturze plików.

uwaga: istnieje oddzielny plik dlaJava(generated), który zawiera różne instancje kodu. Nie będziesz ich edytować w tym samouczku, ale dobrze jest wiedzieć, że istnieją.

Włączanie wiązania danych w działaniach, fragmentach i powiązanym kodzie

teraz, gdy aplikacja i układy wiedzą, że będą używać wiązania danych, musisz wprowadzić zmiany w kodzie. Jak wspomniano wcześniej, będziesz pracować z trzema plikami w folderze widok.

dodawanie powiązania danych do aktywności

Otwórz stronę.kt. Zauważ, że w pliku znajduje się kilka TODOs. Zastąpisz je od góry do dołu, gdy dowiesz się, jak powiązanie danych konfiguruje układy XML z kodem.

pierwszyTODO, w linii 53, mówi o usunięciu elementów widoku, którymi są Button, RecyclerView i TextView. Wszystkie te obiekty odwołują się do elementów w układzie.activity_grocery_list. Dzięki bibliotece wiązania danych nie musisz tworzyć zmiennych dla każdej z nich, ponieważ biblioteka robi to za Ciebie.

Zastąp te trzy linie następującym wierszem kodu.

private lateinit var binding: ActivityGroceryListBinding

ten kod tworzy instancję automatycznie utworzonej klasy powiązania dla activity_grocery_list.xml. Później zainicjujesz przez onCreate.

Po dodaniu tego kodu Android Studio poprosi o zaimportowanie niektórych zależności. Postępuj zgodnie z zaleceniami. Nie martw się o błędy, ponieważ naprawisz je w ciągu minuty.

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

importując tę klasę, tworzysz odniesienie do klasy powiązania z poprzedniego kroku.

powiązanie widoku

następnie zamień wywołanie nasetContentView(R.layout.plain_activity) wonCreate na:

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

ten kod używa klasy biblioteki wiązania danych o nazwie DataBindingUtil, aby ustawić widok zawartości. Ta linia jest bardzo podobna do tej, którą usunąłeś wcześniej, ale teraz kojarzy kod z powiązaniem danych.

3. UsuńfindViewById linie kodu.

teraz możesz usunąć trzy linie za pomocąfindViewById wonCreate, które prawdopodobnie wyświetlają błąd po ostatniej zmianie. Możesz usunąć te linie, ponieważ nie musisz szukać widoków według identyfikatorów, ponieważ będziesz je wypełniać za pomocą zmiennych układu.

przed powiązaniem danych, findViewById() był najczęstszym sposobem łączenia układu i kodu. Powodowało to wiele problemów, ponieważ błędy pojawiały się w czasie wykonywania, a czasami błędy te były wykrywane dopiero po produkcji.

dostęp do widoku dzieci

usuń pozostałe linie kodu wonCreate i zastąp je następującymi liniami:

oto podział krok po kroku:

  1. pierwsza część wiąże RecyclerView z odpowiednim menedżerem układów w pliku XML. RecyclerViews to osobny temat, ale na wysokim poziomie menedżer układu liniowego jest elementem w widoku, który wyświetla listę artykułów spożywczych.
  2. RecyclerView ma również adapter, który pobiera elementy i przypisuje je do układu
  3. na koniec wiąże addItemButton z jego metodą klikania.

czy jesteś nieco zdezorientowany wszystkimiTODO? Spójrz na poniższy zrzut ekranu, aby zobaczyć, jak powinien wyglądać twój onCreate:

zauważ, że trzy ostatnie metody nadal zawierają błędy. Naprawisz je w następnej sekcji.

usuwanie błędów

Zastąp ostatnie linie wewnątrz deleteGroceryItem:

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

powyższa linia informuje RecyclerView, który wyświetla Twoją listę artykułów spożywczych, że usunąłeś element z listy i wymaga odświeżenia. Naprawisz całkowitą kwotę później w samouczku, więc skomentuj tę linię na razie.

możesz zauważyć, że zmiana potrzebna doonDialogPositiveClick jest bardzo podobna do tej, którą właśnie zrobiłeś. Zmień wiersz z błędem na:

binding.rvGroceryList.adapter?.notifyDataSetChanged()

Ta linia informuje RecyclerView, że za każdym razem, gdy klikniesz przycisk Dodaj w alercie, Twoja lista się zmieniła.

tak jak w poprzedniej metodzie, skomentuj kod dla całości, dopóki nie wrócisz do niego później:

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

zostały Ci dwa błędy w pliku! Oba odnoszą się do . Jak można się domyślić, należy zmienić te linie, aby odnieść się do obiektu wiązania. Zastąp linię błędem wewnątrz onDialogPositiveClick, aby:

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

i błąd w onDialogNegativeClick za pomocą:

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

różnica w obu tych metod wynosi terazaddItemButton jest związana z wiązaniem poprzezbinding.addItemButton.

rozwiązałeś wszystkie błędy! Możesz w końcu przetestować swoje zmiany.

Zbuduj i uruchom. Przetestuj go tak jak w poprzednich sekcjach. Zauważyłeś coś innego?

aplikacja działa tak jak poprzednio, ale nie pokazuje całości. Nie martw się! Dzieje się tak z powodu dwóch linii kodu, które skomentowałeś powyżej. Zaraz to naprawisz.

dodawanie powiązania danych do adapterów

następnie połączysz GroceryAdapter z klasami powiązania, tak jak zrobiłeś to dla GroceryListActivity. Proces ten jest dość prosty i obejmuje bardzo podobne kroki.

Otwórz sklep spożywczy.kt i zaczynając od dołu, zastąp cały ViewHolder następującym kodem:

spójrz na kod przed i po. Wcześniej Posiadacz widoków odwoływał się tylko do widoków. Stosując wiązanie z nowym kodem, ustawiasz również wartość przedmiotu I cenę. Dwie linie zostały skomentowane, ponieważ rzucają błędy, które naprawisz później.

Po tej zmianie onBindViewHolder przestaje rozpoznawać obiekty widoku, ponieważ już nie istnieją. Aby to naprawić, zamień kod w tej metodzie na następujący:

za pomocą tego kodu przypisujesz słuchaczy do przycisków Edytuj i usuń. Możesz również powiązać każdy element z listy w widoku recyklera.

dokonaj ostatniej zmiany w adapterze. Zamień kodonCreateViewHolder na:

ponieważ adapter jest klasą używaną do wyświetlania każdego z wierszy w widoku recyklera i powiązano uchwyt widoku z klasami wiązania, układ używa teraz wiązania. Za pomocą tego kodu tworzy się instancję uchwytu widoku dla odpowiedniego wiersza za pomocą klas wiążących.

Zbuduj i uruchom. Przetestuj aplikację i dodaj element. O nie! Tekst listy zniknął!

nie martw się! W następnym kroku dodasz listę i wszystkie etykiety z powrotem do ekranu za pomocą powiązania danych.

powiązanie wartości

powiązanie wartości odnosi się do wytworzenia zmiennych dla klas powiązania. Dzięki nim, gdy cokolwiek zmieni się w kodzie Kotlina, układy automatycznie aktualizują się tak, jakby bezpośrednio obserwowały wyniki kodu. Istnieją dwa sposoby aktualizacji wartości: zmienne układu i wyrażenia układu.

zmienne układu

zmienne w znacznikach danych dodanych na górze plików układu opisują właściwość w układzie powiązania danych. Jeśli nie masz pewności, które znaczniki są danymi, Otwórz dowolny z trzech plików układu, które zmodyfikowałeś na początku tego samouczka. Oto zrzut ekranu, który pomoże Ci je zauważyć:

wyrażenia układu

Możesz również pisać wyrażenia za pomocą tak zwanego języka wyrażeń. Możesz obsługiwać zdarzenia w widokach i odpowiednio aktualizować lub formatować dane.

Uwaga: zgodnie z dokumentacją Androida, wyrażenia układu powinny być małe i proste, ponieważ nie mogą być testowane jednostkowo i mają ograniczoną obsługę IDE. Zamiast tego Android zaleca stosowanie adapterów wiążących. W tym samouczku nie będziesz pracować z Adapterami wiążącymi; jest to większy temat, który może być jego własnym tutorialem.

teraz, gdy nauczyłeś się, że możesz dodawać wartości między znacznikami danych w układach, możesz zobaczyć, dlaczego etykiety w aplikacji przestały działać. Zaraz to naprawisz.

wartości powiązania w aktywnościach

przejdź do listy aktywności_grocery_list.xml i znajdź znaczniki danych na górze pliku. Dodaj następujący kod między znacznikami danych:

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

dodając tę zmienną, Twój kod Kotlina wie teraz, jaką wartość należy obserwować dla etykiety całkowitej kwoty, która wcześniej zniknęła.

ZnajdźTODO na dole pliku. Notice android:text="" jest pusty. Pomiędzy cudzysłowami należy odwołać się do wytworzonej zmiennej:

android:text="@{totalAmount}"

dzięki temu odwołaniu, układ powinien wiedzieć, gdzie umieścić wartośćtotalAmount.

następnie wróć do sklepu spożywczego i odkomentuj poniższą linię:

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

mówi obiektowi powiązania danych, aby zlokalizował utworzony totalAmount w układzie i zaktualizował go o wartość zwróconą z metody getTotal w viewModel.

Znajdź drugą skomentowaną linię I Usuń komentarz, aby wartośćtotalAmount została przypisana. Powinien wyglądać następująco:

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

kod tutaj również lokalizujetotalAmount I formatuje go do dwóch miejsc po przecinku.

Zbuduj i uruchom. Dodaj przedmiot i zauważ, że jest tam całkowita kwota. Świetny początek, ale nadal musisz odzyskać etykiety listy. W międzyczasie Twoja aplikacja powinna wyglądać tak:

wartości Wiązania w adapterach

kroki dla adaptera są podobne do tych w aktywności, którą naprawiłeś. To samo dotyczy każdego innego pliku układu, na przykład fragmentu.

najpierw otwórz sklep_list_item.xml i zlokalizuj znacznik danych na górze. Dodaj tam te zmienne:

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

pierwszy odwołuje się do nazwy elementu dodanego do listy, takiego jak chleb lub ser. Drugi odnosi się do ceny jednostkowej, która jest liczbą taką jak 10 lub 200.

Teraz umieść odpowiednie zmienne w atrybutach tekstu. Możesz je łatwo zlokalizować, ponieważ mająTODO komentarze przed nimi. Dla nazwy elementu Dodaj ten kod:

android:text="@{itemName}"

powyższy kod odwołuje się do zawartości zmiennej utworzonej w znacznikach danych.

zrób to samo dla ceny:

android:text="@{price}"

w tym przypadku odwołujesz się do wartości zmiennej cenowej z tagów danych.

Otwórz sklep spożywczy i znajdź skomentowany kod. W tym przypadku nie ma potrzeby, aby go zmieniać, więc Usuń komentarz. Teraz działa!

Zbuduj i uruchom. Twoja aplikacja jest teraz w pełni funkcjonalna!

baw się nim i upewnij się, że wszystko działa zgodnie z oczekiwaniami. Jak widać na zrzucie ekranu, użytkownik zmienił zdanie na temat używania dżemu w kanapkach i zamienił go na szynkę. Dlatego posiadanie przycisku edycji jest przydatne.

gratulacje za przybycie!

dokąd się udać?

Pobierz ukończone pliki projektu, klikając przycisk Pobierz Materiały na górze lub na dole tego samouczka.

gratulujemy konwersji istniejącej aplikacji na bardziej bezpieczne, nowoczesne podejście do tworzenia aplikacji w Androidzie za pomocą powiązania danych.

Jeśli chcesz dowiedzieć się więcej na ten temat, spójrz na:

  • MVVM i powiązanie danych: wzorce projektowe Androida
  • Komponenty architektury Android Jetpack: pierwsze kroki
  • Komponenty architektury Androida: Dane na żywo

Jeśli masz jakieś sugestie, pytania lub chcesz pokazać, co zrobiłeś, aby ulepszyć ten projekt, dołącz do dyskusji poniżej.

raywenderlich.com tygodniowy

raywenderlich.com newsletter to najprostszy sposób, aby być na bieżąco ze wszystkim, co musisz wiedzieć jako programista mobilny.

Otrzymuj cotygodniowy przegląd naszych samouczków i kursów, a otrzymasz darmowy pogłębiony kurs e-mail jako bonus!

Średnia ocena

4.9/5

dodaj ocenę dla tej zawartości

Zaloguj się, aby dodać ocenę

15 ocen

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.