Navigation Editor

O Android Studio contém uma GUI que permite criar e editar um gráfico de navegação. Ele é essencialmente um editor do arquivo de recursos XML subjacente.

Visão geral

Depois de adicionar um gráfico XML ao app, o Android Studio abre o gráfico no Navigation Editor. No Navigation Editor, você pode editar visualmente os gráficos de navegação ou editar diretamente o XML subjacente.

Figura 1. O Navigation Editor.
  1. Painel Destinations: lista seu host de navegação e todos os destinos no Graph Editor.
  2. Graph Editor: contém uma representação visual do seu gráfico de navegação. Você pode alternar entre a visualização Design e a representação XML subjacente na visualização Text.
  3. Attributes: mostra atributos para o item selecionado no gráfico de navegação.

Clique na guia Text para ver o XML correspondente, que precisa ser semelhante ao seguinte snippet:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/nav_graph">

</navigation>

<navigation> é o elemento raiz de um gráfico de navegação. À medida que você adiciona destinos e conecta ações ao seu gráfico, é possível conferir os elementos <destination> e <action> correspondentes aqui como elementos filhos. Se você tiver gráficos aninhados, eles vão aparecer como elementos <navigation> filhos.

Adicionar destinos

Você pode criar um destino a partir de um fragmento ou uma atividade existente. Também é possível usar o Navigation Editor para criar um novo destino ou criar um marcador para depois substituir por um fragmento ou uma atividade.

Este exemplo demonstra como criar um novo destino. Para adicionar um novo destino usando o Navigation Editor, faça o seguinte:

  1. No Navigation Editor, clique no ícone New Destination e, em seguida, clique em Create new destination.
  2. Na caixa de diálogo New Android Component exibida, crie seu fragmento. Para ver mais informações sobre fragmentos, consulte a visão geral de fragmentos.

De volta ao Navigation Editor, observe que o Android Studio adicionou esse destino ao gráfico.

A Figura 2 mostra um exemplo de destino e um destino de marcador.

Figura 2. Um destino e um marcador.

Para outras maneiras de adicionar destinos ao seu gráfico de navegação, consulte Outros destinos.

Criar um destino usando um fragmento ou uma atividade

No Navigation Editor, se você tiver um tipo de destino que gostaria de adicionar ao seu gráfico de navegação, clique em New Destination .

Em seguida, clique no destino correspondente no menu suspenso exibido. Agora você pode ter uma prévia do destino na visualização Design com o XML correspondente na visualização Text do gráfico de navegação.

Criar um novo destino de fragmento

Para adicionar um novo tipo de destino usando o Navigation Editor, faça o seguinte:

  1. No Navigation Editor, clique no ícone New Destination .

    Em seguida, clique em Criar novo destino.

  2. Na caixa de diálogo New Android Component exibida, crie seu fragmento.

De volta ao Navigation Editor, observe que o Android Studio adicionou esse destino ao gráfico.

A Figura 3 mostra um exemplo de destino e um destino de marcador.

Figura 3. Um destino e um marcador.

Anatomia de um destino

Clique em um destino para selecioná-lo e observe os seguintes atributos no painel Attributes:

  • O campo Type indica se o destino é implementado como um fragmento, uma atividade ou outra classe personalizada no código-fonte.
  • O campo Label contém o nome legível pelo usuário para o destino. Isso pode ser mostrado à interface, por exemplo, se você conectar NavGraph a um Toolbar usando setupWithNavController(). Por esse motivo, use strings de recurso para esse valor.
  • O campo ID contém o ID de destino, que é usado para se referir ao destino no código.
  • O menu suspenso Class mostra o nome da classe associada ao destino. Clique nesse menu suspenso para alterar a classe associada para outro tipo de destino.

Clique na guia Text para exibir a visualização XML do seu gráfico de navegação. O XML contém os mesmos atributos id, name, label e layout do destino, como no snippet abaixo:

<?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    app:startDestination="@id/blankFragment">
    <fragment
        android:id="@+id/blankFragment"
        android:name="com.example.cashdog.cashdog.BlankFragment"
        android:label="@string/label_blank"
        tools:layout="@layout/fragment_blank" />
</navigation>

Você também pode usar o Layout Editor para adicionar um NavHostFragment a uma atividade fazendo o seguinte:

  1. Na lista de arquivos de projeto, clique duas vezes no arquivo XML de layout da atividade para abri-lo no Layout Editor.
  2. No painel Palette, escolha a categoria Containers. Como alternativa, pesquise "NavHostFragment".
  3. Arraste a visualização NavHostFragment até sua atividade.
  4. Na caixa de diálogo Navigation Graphs exibida, escolha o gráfico de navegação correspondente a ser associado a esse NavHostFragment e clique em OK.

Conectar destinos

Uma ação é uma conexão lógica entre destinos. As ações são representadas como setas no gráfico de navegação. As ações geralmente conectam um destino ao outro, embora você também possa criar ações globais que levam a um destino específico partindo de qualquer lugar no app.

Com as ações, você representa os diferentes caminhos que os usuários podem seguir no app. Para navegar até os destinos, você ainda precisa criar o código para executar a navegação.

Você pode usar o Navigation Editor para conectar dois destinos fazendo o seguinte:

  1. Na guia Design, mantenha o ponteiro do lado direito do destino que você quer acessar com os usuários. Um círculo vai aparecer sobre o lado direito do destino, conforme mostrado na Figura 4.

    Figura 4. Um destino com um círculo de conexão de ação.

  2. Arraste o cursor sobre o destino que você quer que os usuários acessem e solte. A linha resultante entre os dois destinos representa uma ação, conforme mostrado na Figura 5.

    Figura 5. Como conectar destinos a uma ação.

  3. Clique na seta para destacar a ação. Os seguintes atributos aparecem no painel Attributes:

    • O campo Type contém "Action".
    • O campo ID contém o ID da ação.
    • O campo Destination contém o ID do fragmento ou da atividade de destino.

  4. Clique na guia Text para alternar para a visualização XML. Agora, um elemento de ação é adicionado ao destino de origem. A ação tem um ID e um atributo de destino que contém o ID do próximo destino, como mostrado no exemplo a seguir.

    <?xml version="1.0" encoding="utf-8"?>
<navigation xmlns:app="http://schemas.android.com/apk/res-auto"
   xmlns:tools="http://schemas.android.com/tools"
   xmlns:android="http://schemas.android.com/apk/res/android"
   app:startDestination="@id/blankFragment">
   <fragment
       android:id="@+id/blankFragment"
       android:name="com.example.cashdog.cashdog.BlankFragment"
       android:label="@string/label_blank"
       tools:layout="@layout/fragment_blank" >
       <action
           android:id="@+id/action_blankFragment_to_blankFragment2"
           app:destination="@id/blankFragment2" />
   </fragment>
   <fragment
       android:id="@+id/blankFragment2"
       android:name="com.example.cashdog.cashdog.BlankFragment2"
       android:label="@string/label_blank_2"
       tools:layout="@layout/fragment_blank_fragment2" />
</navigation>

No gráfico de navegação, as ações são representadas por elementos <action>. No mínimo, uma ação contém o respectivo ID e o ID do destino ao qual um usuário deve ser levado.

Destinos de marcador de posição

Você pode usar marcadores para representar destinos não implementados. Um marcador serve como uma representação visual de um destino. No Navigation Editor, você pode usar marcadores como faria com qualquer outro destino.