Komponent nawigacji, projektowanie wykresu nawigacji

(9 września 2020 r.)

Na tym blogu chciałbym przedstawić wykres zagnieżdżony i dyskusję na temat przekazywania danych między dwoma miejscami docelowymi.

Zagnieżdżony wykres nawigacyjny

Wykres nawigacyjny może służyć do grupowania serii miejsc docelowych i ponownego ich wykorzystania. Na przykład używasz widoku, który może być używany w wielu miejscach aplikacji. Tworzysz więc oddzielny plik układu i po prostu dołączasz go tam, gdzie chcesz go ponownie wykorzystać. To samo dotyczy wykresu nawigacyjnego. Wspólny przepływ można uwzględnić w wielu miejscach, oddzielając go w pliku różnicowym XML.

Wyjaśnienie na przykładzie: Posiłek niestandardowy

Funkcja Custom Meal w aplikacji Healthify pomogłaby użytkownikowi tworzyć zestawy posiłków. Jeśli użytkownik lubi owoce i tosty na śniadanie, nie musi codziennie dodawać ich obu. Mógłby stworzyć kombinację tych dwóch elementów i sprawdzić konkretną kombinację. To ogromny plus w oszczędzaniu czasu.

Niestandardowy przepływ posiłku @ (eyepoppper)

Powyżej pokazano niestandardowy przepływ posiłków; użytkownik może nazwać swój posiłek i dodać elementy swojego posiłku, aby utworzyć kombinację. Jeśli proste danie nie jest dostępne, może dodać składniki.

Przycisk dodawania przenosi użytkownika do ekranu wyszukiwania, a wyszukaną żywność można dodać do listy, a na koniec zapisać ją, klikając na przycisku zapisywania, a użytkownik zobaczy ekran z powodzeniem, a następnie wrócimy do ekranu, z którego rozpoczął się ten przepływ.

Utwórzmy wykres Nawigacji dla tworzenia przepływu kombi.



xmlns:tools="http://schemas.android.com/tools"
xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/create\_meal\_graph"
app:startDestination="@id/createMealFragment">
android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" >
android:id="@+id/action\_createMealFragment\_to\_save"
app:destination="@id/processMealFragment" /> android:id="@+id/action\_createMealFragment\_to\_add"
app:destination="@id/searchFoodFragment" />
android:id="@+id/searchFoodFragment"
android:name="com.example.healthify.SearchFoodFragment"
android:label="search\_food"
tools:layout="@layout/fragment\_search\_food"/>

android:id="@+id/processMealFragment"
android:name="com.example.healthify.ProcessMealFragment"
android:label="done"
tools:layout="@layout/fragment\_process\_meal"/>

Mamy więc CreateMealFragment z 2 akcjami:

  1. action\_createMealFragment\_to\_save -> gdy użytkownik kliknie przycisk Zapisz po wprowadzeniu nazwy posiłku i składników, przejdzie do ProcessMealFragment, więc miejscem docelowym tej czynności jest processMealFragment.
  2. action\_createMealFragment\_to\_add -> Gdy użytkownik kliknie ikonę plusa, aby dodać więcej składników do zestawu, przechodzimy do ekranu wyszukiwania, na którym można wyszukaj jedzenie i dodaj je, więc miejscem docelowym tej akcji jest searchFoodFragment.

Ten przepływ ma 3 punkty zaczepienia.

Utwórz haczyki na posiłki

Użytkownik może wejść w ten przepływ, klikając przycisk UTWÓRZ KOMBO na ekranie śledzenia posiłków (rys. 1) lub UTWÓRZ KOMBO z ekranu menu Posiłek (rys. 2) lub przycisku DODAJ ŻYWNOŚĆ w przebiegu wyszukiwania (rys. 3).

HOOK 1 : Ekran śledzenia posiłków



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/meal\_tracker\_graph"
app:startDestination="@id/mealTrackerFragment"> android:id="@+id/mealTrackerFragment"
android:name="com.example.healthify.MealTrackerFragment"
android:label="MealTrackerFragment"
tools:layout="@layout/fragment\_meal\_tracker">
android:id="@+id/action\_merge\_flow"
app:destination="@id/create\_meal\_graph" />
...

Tutaj mamy MealTrackerFragment i dołączyliśmy tworzenie wykres posiłku. Po kliknięciu przycisku UTWÓRZ COMBO użytkownik przejdzie do tworzenia przepływu posiłków.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_merge\_flow)
}

HOOK 2 : Ekran kombinacji posiłków



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/my\_meal\_graph"
app:startDestination="@id/myMealFragment"> android:id="@+id/myMealFragment"
android:name="com.example.healthify.MyMealFragment"
android:label="MyMealFragment"
tools:layout="@layout/fragment\_my\_meal">
android:id="@+id/action\_create\_meal"
app:destination="@id/create\_meal\_graph" />
...

Tutaj mamy MyMealFragment i mamy uwzględnione create\_meal\_graph. Po kliknięciu przycisku UTWÓRZ KOMBO użytkownik przejdzie do tworzenia przepływu posiłków.

button.setOnClickListener{
Navigation.findNavController(view).navigate(R.id.action\_create\_meal)
}

Haczyk 3 : Przepływ wyszukiwania, tutaj zrozumiemy zagnieżdżony wykres, a także jak przekazywać dane między dwoma miejscami docelowymi

Nawigacja umożliwia dołączenie danych do operacji nawigacji poprzez zdefiniowanie argumentów dla miejsca docelowego. Na przykład w tym przypadku możemy podać typ posiłku (śniadanie, obiad, kolacja) jako argument w sekcji Utwórz fragment posiłku.

Ogólnie rzecz biorąc, zdecydowanie zalecamy przekazywanie tylko minimalnej ilości danych między miejscami docelowymi . Na przykład należy przekazać klucz, aby pobrać obiekt, zamiast przekazywać sam obiekt, ponieważ całkowita przestrzeń dla wszystkich zapisanych stanów jest ograniczona w systemie Android. Jeśli potrzebujesz przekazać duże ilości danych, rozważ użycie ViewModel.

Aby przekazać dane, musisz zdefiniować argument we fragmencie docelowym, w którym chcesz Odbierz dane.

W tym przykładzie wysyłamy posiłek z 3 haków diff, który zostanie odebrany przez CreateMealFragment. Więc musimy zdefiniować arg w CreateMealFragment.

 android:id="@+id/createMealFragment"
android:name="com.example.healthify.CreateMealFragment"
android:label="fragment\_create\_meal"
tools:layout="@layout/fragment\_create\_meal" > android:name="mealType"
app:argType="string"
android:defaultValue="" />

Jeśli typ argumentu obsługuje wartości null, możesz zadeklarować domyślną wartość null, używając android:defaultValue="@null".

Możesz sprawdzić wszystkie obsługiwane typy argumentów z TUTAJ .

Możemy również przekazywać argumenty przez „Deeplink”.

 android:id="@+id/deepLink"
app:uri="www.example.com/createMealFragment/{mealType}"
android:autoVerify="true"/>

Z fragmentu nadawcy utwórz pakiet argumentów i przekaż go do kontrolera nawigacyjnego.



xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:id="@+id/search\_meal\_graph"
app:startDestination="@id/searchMealFragment"> android:id="@+id/searchMealFragment"
android:name="com.example.healthify.SearchMealFragment"
android:label="SearchMealFragment"
tools:layout="@layout/fragment\_search\_meal">
android:id="@+id/action\_add\_meal"
app:destination="@id/create\_meal\_graph" />
...

companion object {
const val MEAL\_TYPE = "mealType"
// this value should be same as argument name in nav graph
}
val bundle = bundleOf(MEAL\_TYPE to "Breakfast")findNavController().navigate(R.id.action\_add\_meal,bundle)

To była mała dyskusja o zagnieżdżonych wykresach, o tym, jak używać wykresu nawigacyjnego i jak przekazywać dane między dwoma miejscami docelowymi.

Mam nadzieję artykuł był dla Ciebie informacyjny. Jeśli masz jakieś uwagi lub pytania, napisz do mnie.

Do udanej nauki!

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *