Componente de navegação, desenho de gráfico de navegação

(9 de setembro de 2020)

Neste blog, gostaria de apresentar um gráfico aninhado e uma discussão sobre como passar dados entre dois destinos.

Gráfico de navegação aninhado

Um gráfico de navegação pode ser usado para agrupar uma série de destinos e reutilizá-los. Por exemplo, você usa uma visualização que pode ser usada em vários locais em seu aplicativo. Portanto, você cria um arquivo de layout separado e apenas o inclui onde quiser para reutilizá-lo. O mesmo vale para o gráfico de navegação. Um fluxo comum pode ser incluído em vários lugares, separando-o em um arquivo XML diferente.

Explicando com um exemplo: A Refeição Personalizada

O recurso de Refeição Personalizada no aplicativo Healthify ajudaria o usuário a criar combinações de refeições. Se um usuário gosta de frutas e torradas no café da manhã, ele não precisa adicionar ambos, todos os dias. Ele poderia criar uma refeição combinada desses dois itens e verificar a combinação específica. Esta é uma grande vantagem na economia de tempo.

Fluxo de refeição personalizado @ (eyepoppper)

O fluxo de refeição personalizado é mostrado acima; o usuário pode nomear sua refeição e adicionar os itens em sua refeição para criar o combo. Se o prato simples não estiver disponível, ele pode adicionar os ingredientes.

O botão adicionar leva o usuário a uma tela de pesquisa e o alimento pesquisado pode ser adicionado à lista e, por fim, armazene-o clicando em no botão Salvar, e o usuário verá uma tela de sucesso e então voltamos para a tela de onde este fluxo começou.

Vamos criar um gráfico de navegação para Criar fluxo de combinação.



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"/>

Então aqui temos CreateMealFragment com 2 ações:

  1. action\_createMealFragment\_to\_save -> quando o usuário clicar em salvar após inserir o nome da refeição e os ingredientes, ele irá para ProcessMealFragment Portanto, o destino para essa ação é processMealFragment.
  2. action\_createMealFragment\_to\_add -> Quando o usuário clica no ícone de mais para adicionar mais ingredientes no combo, passamos para a tela de pesquisa onde você pode pesquise por comida e adicione-a, de forma que o destino para esta ação seja searchFoodFragment.

Este fluxo tem 3 ganchos de diferenças.

Criar ganchos de refeição

Um usuário pode entrar neste fluxo clicando no botão CRIAR COMBO na tela do rastreador de refeição (fig. 1) ou no botão CRIAR UM COMBO na tela de combinação de refeições (fig. 2) ou no botão ADICIONAR COMIDA no fluxo de pesquisa (fig. 3).

HOOK 1 : Tela do rastreador de refeições



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" />
...

Aqui temos MealTrackerFragment e incluímos a criação de um gráfico de refeição. Ao clicar no botão CRIAR COMBO, o usuário entrará em criar fluxo de refeição.

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

HOOK 2 : Tela de combinação de refeição



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" />
...

Aqui temos MyMealFragment e temos incluído create\_meal\_graph. Ao clicar no botão CRIAR UM COMBO, o usuário entrará em criar fluxo de refeição.

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

Gancho 3 : Fluxo de pesquisa, aqui entenderemos o gráfico aninhado, bem como como passar dados entre dois destinos

A navegação permite que você anexe dados a uma operação de navegação definindo argumentos para um destino. Por exemplo, neste caso, podemos passar o Tipo de refeição (café da manhã, almoço, jantar) como um argumento em Criar fragmento de refeição.

Em geral, você deve preferir passar apenas a quantidade mínima de dados entre os destinos . Por exemplo, você deve passar uma chave para recuperar um objeto em vez de passar o próprio objeto, já que o espaço total para todos os estados salvos é limitado no Android. Se você precisar passar grandes quantidades de dados, considere usar um ViewModel.

Para passar dados, você precisa definir um argumento no fragmento de destino onde deseja receber dados.

Neste exemplo, estamos enviando o tipo de refeição de 3 ganchos diff, e será recebido por CreateMealFragment. Portanto, precisamos definir arg em 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="" />

Se um tipo de argumento suportar valores nulos, você pode declarar um valor padrão nulo usando android:defaultValue="@null".

Você pode verificar todos os tipos de argumento suportados em AQUI .

Também podemos passar argumentos por meio de “Link direto”.

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

A partir do fragmento do remetente, crie um pacote de argumentos e passe-o ao controlador de navegação.



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)

Esta foi uma pequena discussão sobre gráficos aninhados, como usar um gráfico de navegação e como passar dados entre dois destinos.

Espero o artigo foi informativo para você. Se você tiver algum feedback ou dúvida, escreva de volta para mim.

Até o aprendizado feliz!

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios marcados com *