Contenuto

• Cos'è il componente Architecture Architecture?
• Aggiunta dell'editor di navigazione ad Android Studio
• Dipendenze del progetto: frammento di navigazione e interfaccia utente di navigazione
• Ottieni una panoramica visiva della navigazione della tua app
• Popolazione del grafico di navigazione: aggiunta di destinazioni
• Aggiornamento dei layout dei frammenti
• Fragment_first.xml
• Fragment_second.xml
• Fragment_third.xml
• Connetti le tue destinazioni con azioni
• Ospitare il grafico di navigazione
• Attivazione delle transizioni con NavController
• Aggiunta di più navigazione
• Creazione di animazioni di transizione personalizzate
• Avvolgendo

Durante la conferenza I / O del 2018, Google ha annunciato un nuovo approccio per lo sviluppo di app Android.

La raccomandazione ufficiale di Google è quella di creare una singola attività che funga da punto di ingresso principale della tua app, quindi fornire il resto del contenuto della tua applicazione come frammenti.

Mentre il pensiero di destreggiarsi tra tutte quelle diverse transazioni di frammenti e cicli di vita può sembrare un incubo, all'I / O 2018 Google ha anche lanciato il componente Architecture Architecture che è stato progettato per aiutarti ad adottare questo tipo di singola struttura di attività.

In questo articolo, ti mostreremo come aggiungere il componente di navigazione al tuo progetto e come puoi usarlo per creare rapidamente e facilmente un'applicazione a singola attività, con più frammenti, con un piccolo aiuto dal nuovo editor di navigazione di Android Studio. Dopo aver creato e collegato i tuoi frammenti, miglioreremo le transizioni standard dei frammenti di Android utilizzando il componente di navigazione e l'editor per creare una gamma di animazioni di transizione completamente personalizzabili.

Cos'è il componente Architecture Architecture?

Parte di Android JetPack, il componente Architecture Architecture ti aiuta a visualizzare le diverse rotte attraverso la tua applicazione e semplifica il processo di implementazione di queste rotte, in particolare quando si tratta di gestire le transazioni di frammenti.

Per utilizzare il componente Navigazione, devi creare un Grafico di navigazione, che è un file XML che descrive il modo in cui le attività e i frammenti della tua app sono correlati.

Un grafico di navigazione è costituito da:

• Destinazioni: Le singole schermate a cui l'utente può accedere
• Azioni: I percorsi che l'utente può percorrere tra le destinazioni della tua app

Puoi visualizzare una rappresentazione visiva del grafico di navigazione del tuo progetto nell'editor di navigazione di Android Studio. Di seguito troverai un grafico di navigazione composto da tre destinazioni e tre azioni come appare nell'Editor di navigazione.

Il componente di navigazione è progettato per aiutarti a implementare la nuova struttura di app consigliata di Google, in cui una singola attività "ospita" il grafico di navigazione e tutte le destinazioni sono implementate come frammenti. In questo articolo seguiremo questo approccio consigliato e creeremo un'applicazione che consiste in un MainActivity e tre destinazioni frammentate.

Tuttavia, il componente Navigazione non è solo per le applicazioni che hanno questa struttura consigliata. Un progetto può avere più grafici di navigazione ed è possibile utilizzare frammenti e attività come destinazioni all'interno di tali grafici di navigazione. Se stai migrando un progetto grande e maturo al componente Navigazione, potresti trovare più semplice separare i flussi di navigazione della tua app in gruppi, dove ogni gruppo è costituito da un'attività "principale", alcuni frammenti correlati e un proprio grafico di navigazione.

Aggiunta dell'editor di navigazione ad Android Studio

Per aiutarti a ottenere il massimo dal componente di navigazione, Android Studio 3.2 Canarie e versioni successive dispongono di un nuovo editor di navigazione.

Per abilitare questo editor:

• Seleziona "Android Studio> Preferenze ..." dalla barra dei menu di Android Studio.
• Nel menu a sinistra, seleziona "Sperimentale".
• Se non è già selezionato, seleziona la casella di controllo "Abilita Editor di navigazione".

• Fai clic su "OK".
• Riavvia Android Studio.

Dipendenze del progetto: frammento di navigazione e interfaccia utente di navigazione

Crea un nuovo progetto con le impostazioni che preferisci, quindi apri il suo file build.gradle e aggiungi il frammento di navigazione e la navigazione come dipendenze del progetto:

dipendenze {implementazione fileTree (dir: libs, include:) implementazione com.android.support:appcompat-v7:28.0.0 implementazione com.android.support.constraint: layout di vincolo: 1.1.3 // Aggiungi quanto segue // implementazione "android.arch.navigation: navigation-fragment: 1.0.0-alpha05" // Navigation-UI fornisce l'accesso ad alcune funzioni di supporto // implementazione "android.arch.navigation: navigation-ui: 1.0.0-alpha05" implementazione com .android.support: support-v4: 28.0.0 testImplementazione junit: junit: 4.12 androidTestImplementation com.android.support.test: runner: 1.0.2 androidTestImplementation com.android.support.test.espresso: espresso-core: 3.0.2 }

Ottieni una panoramica visiva della navigazione della tua app

Per creare un grafico di navigazione:

• Fai clic tenendo premuto il tasto Ctrl sulla directory "res" del tuo progetto e seleziona "Nuovo> Directory risorse Android".
• Apri il menu a discesa "Tipo di risorsa" e scegli "navigazione".
• Seleziona "OK".
• Fai clic tenendo premuto il tasto Ctrl sulla nuova directory "res / navigation" e seleziona "Nuovo> File delle risorse di navigazione".
• Apri il menu a discesa "Tipo di risorsa" e seleziona "Navigazione".

• Dai questo nome al file; Sto usando "nav_graph".
• Fai clic su "OK".

Apri il tuo file "res / navigation / nav_graph" e il Navigation Editor si avvierà automaticamente. Simile all'editor di layout, l'editor di navigazione è suddiviso nelle schede "Progettazione" e "Testo".

Se selezioni la scheda "Testo", vedrai il seguente XML:

<? xml version = "1.0" encoding = "utf-8"?> // Navigation ’è il nodo principale di ogni grafico di navigazione //

La scheda "Progettazione" consente di creare e modificare visivamente la navigazione della tua app.

Da sinistra a destra, l'editor di navigazione è costituito da:

• Un elenco di destinazioni: Questo elenca tutte le destinazioni che compongono questo particolare grafico di navigazione, oltre all'attività in cui è ospitato il grafico di navigazione.
• L'editor grafico: Il Graph Editor fornisce una panoramica visiva di tutte le destinazioni del grafico e delle azioni che le collegano.
• L'editor degli attributi: Se si seleziona una destinazione o un'azione nell'Editor grafico, il pannello "Attributi" visualizzerà le informazioni sull'elemento attualmente selezionato.

Popolazione del grafico di navigazione: aggiunta di destinazioni

Il nostro grafico di navigazione è attualmente vuoto. Aggiungiamo alcune destinazioni.

È possibile aggiungere attività o frammenti già esistenti, ma è anche possibile utilizzare il grafico di navigazione per creare rapidamente e facilmente nuovi frammenti:

• Fai un clic sul pulsante "Nuova destinazione" e seleziona "Crea destinazione vuota".

• Nel campo "Nome frammento", inserisci il nome della classe del tuo frammento; Sto usando "FirstFragment".
• Assicurati che la casella di controllo "Crea layout XML" sia selezionata.
• Completa il campo "Nome layout frammento"; Sto usando "fragment_first".
• Fai clic su "Fine".

Una sottoclasse FirstFragment e il corrispondente file di risorse di layout "fragment_first.xml" verranno ora aggiunti al progetto. FirstFragment apparirà anche come destinazione nel Grafico di navigazione.

Se selezioni FirstFragment nell'Editor di navigazione, il pannello "Attributi" visualizzerà alcune informazioni su questa destinazione, come il nome della sua classe e l'ID che utilizzerai per fare riferimento a questa destinazione altrove nel tuo codice.

Risciacqua e ripeti per aggiungere un SecondFragment e ThirdFragment al tuo progetto.

Passa alla scheda "Testo" e vedrai che l'XML è stato aggiornato per riflettere queste modifiche.

Ogni grafico di navigazione ha una destinazione iniziale, che è la schermata visualizzata quando l'utente avvia la tua app. Nel codice sopra, stiamo usando FirstFragment come destinazione iniziale della nostra app. Se passi alla scheda "Design", noterai un'icona di casa, che segna anche FirstFragment come destinazione iniziale del grafico.

Se preferisci utilizzare un punto di partenza diverso, seleziona l'attività o il frammento in questione, quindi seleziona "Imposta destinazione iniziale" dal pannello "Attributi".

In alternativa, puoi apportare questa modifica a livello di codice:

Aggiornamento dei layout dei frammenti

Ora abbiamo le nostre destinazioni, aggiungiamo alcuni elementi dell'interfaccia utente in modo che sia sempre chiaro quale frammento stiamo attualmente visualizzando.

Aggiungerò quanto segue a ciascun frammento:

• Un oggetto TextView che contiene il titolo del frammento
• Un pulsante che consentirà all'utente di spostarsi da un frammento al successivo

Ecco il codice per ogni file di risorse del layout:

Fragment_first.xml

Fragment_second.xml

Fragment_third.xml

Connetti le tue destinazioni con azioni

Il prossimo passo è collegare le nostre destinazioni tramite azioni.

Puoi creare un'azione nell'editor di navigazione usando il semplice trascinamento della selezione:

• Assicurati che la scheda "Progettazione" dell'Editor sia selezionata.
• Passa il mouse sopra il lato destro della destinazione che desideri navigare a partire dal, che in questo caso è FirstFragment. Dovrebbe apparire un cerchio.
• Fare clic e trascinare il cursore sulla destinazione che si desidera navigare a, che è SecondFragment. Dovrebbe apparire una linea blu. Quando SecondFragment è evidenziato in blu, rilasciare il cursore per creare un collegamento tra queste destinazioni.

Ora dovrebbe esserci una freccia di azione che collega FirstFragment a SecondFragment. Fare clic per selezionare questa freccia e il pannello “Attributo” verrà aggiornato per visualizzare alcune informazioni su questa azione, incluso l'ID assegnato al sistema.

Questa modifica si riflette anche nell'XML del grafico di navigazione:

… … …

Sciacquare e ripetere per creare un'azione che collega SecondFragment a ThirdFragment e un'azione che collega ThirdFragment a FirstFragment.

Ospitare il grafico di navigazione

Il grafico di navigazione fornisce una rappresentazione visiva delle destinazioni e delle azioni della tua app, ma per richiamare queste azioni è necessario un codice aggiuntivo.

Dopo aver creato un grafico di navigazione, devi ospitarlo all'interno di un'attività aggiungendo un NavHostFragment al file di layout di tale attività. Questo NavHostFragment fornisce un contenitore in cui può avvenire la navigazione e sarà anche responsabile dello scambio di frammenti dentro e fuori mentre l'utente naviga nella tua app.

Apri il file "activity_main.xml" del tuo progetto e aggiungi un NavHostFragment.

<? xml version = "1.0" encoding = "utf-8"?> // Crea un frammento che fungerà da NavHostFragment //

Nel codice sopra, app: defaultNavHost = "true" consente all'host di navigazione di intercettare ogni volta che si preme il pulsante "Indietro" del sistema, quindi l'app rispetta sempre la navigazione descritta nel grafico di navigazione.

Attivazione delle transizioni con NavController

Successivamente, dobbiamo implementare un NavController, che è un nuovo componente responsabile della gestione del processo di navigazione all'interno di NavHostFragment.

Per passare a una nuova schermata, è necessario recuperare un NavController utilizzando Navigation.findNavController, chiamare il metodo navigate (), quindi passare l'ID della destinazione verso cui si sta navigando o l'azione che si desidera richiamare. Ad esempio, sto invocando "action_firstFragment_to_secondFragment", che trasporterà l'utente da FirstFragment, a SecondFragment:

NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.action_firstFragment_to_secondFragment);

L'utente passerà a una nuova schermata facendo clic su un pulsante, quindi dobbiamo anche implementare un OnClickListener.

Dopo aver apportato queste modifiche, FirstFragment dovrebbe assomigliare a questo:

import android.os.Bundle; import android.support.annotation.NonNull; import android.support.annotation.Nullable; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.Button; import androidx.navigation.NavController; import androidx.navigation.Navigation; public class FirstFragment estende Fragment {public FirstFragment () {} @Override public void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); if (getArguments ()! = null) {}} @Override public Visualizza onCreateView (gonfiatore LayoutInflater, contenitore ViewGroup, Bundle savedInstanceState) {return inflater.inflate (R.layout.fragment_first, container, false); } @Override public void onViewCreated (vista Vista @NonNull, pacchetto @Nullable salvatoInstanceState) {Button button = (Button) view.findViewById (R.id.button); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.Frag) }}); }}

Quindi, apri MainActivity e aggiungi quanto segue:

• NavigationView.OnNavigationItemSelectedListener: Un ascoltatore per la gestione di eventi su elementi di navigazione
• SecondFragment.OnFragmentInteractionListener: Un'interfaccia che è stata generata quando hai creato SecondFragment tramite l'Editor di navigazione

MainActivity deve anche implementare il metodo onFragmentInteraction (), che consente la comunicazione tra il frammento e l'attività.

import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.net.Uri; import android.view.MenuItem; import android.support.design.widget.NavigationView; import android.support.annotation.NonNull; la classe pubblica MainActivity estende AppCompatActivity implementa NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener {@Override protetto void onCreate (Bundle savedInstanceState) {super.onCreate (savedInstanceState); setContentView (R.layout.activity_main); } @Override pubblica booleana onNavigationItemSelected (elemento MenuNome @NonNull) {return false; } @Override public void onFragmentInteraction (Uri uri) {}}

Aggiunta di più navigazione

Per implementare il resto della navigazione della nostra app, dobbiamo solo copiare / incollare il blocco onViewCreated e apportare alcune modifiche in modo da fare riferimento ai widget dei pulsanti e alle azioni di navigazione corretti.

Apri SecondFragment e aggiungi quanto segue:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button2); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.id.Frag_Fondment) }}); }

Quindi, aggiorna il blocco onViewCreated di ThirdFragment:

@Override public void onViewCreated (@NonNull View view, @Nullable Bundle savedInstanceState) {Button button = (Button) view.findViewById (R.id.button3); button.setOnClickListener (new View.OnClickListener () {@Override public void onClick (View v) {NavController navController = Navigation.findNavController (getActivity (), R.id.my_nav_host_fragment); navController.navigate (R.f.Frragment) }}); }

Infine, non dimenticare di aggiungere l'interfaccia ThirdFragment.OnFragmentInteractionListener a MainActivity:

classe pubblica MainActivity estende AppCompatActivity implementa NavigationView.OnNavigationItemSelectedListener, SecondFragment.OnFragmentInteractionListener, ThirdFragment.OnFragmentInteractionListener {

Esegui questo progetto sul tuo dispositivo Android o Android Virtual Device (AVD) e prova la navigazione. Dovresti essere in grado di navigare tra tutti e tre i frammenti facendo clic sui diversi pulsanti.

Creazione di animazioni di transizione personalizzate

A questo punto, l'utente può spostarsi all'interno dell'app, ma la transizione tra ciascun frammento è piuttosto brusca. In questa sezione finale, utilizzeremo il componente Navigazione per aggiungere un'animazione diversa a ciascuna transizione, in modo che avvenga in modo più fluido.

Ogni animazione che si desidera utilizzare deve essere definita nel proprio file di risorse di animazione, all'interno di una directory "res / anim". Se il tuo progetto non contiene già una directory "res / anim", dovrai crearne una:

• Fai clic tenendo premuto il tasto Ctrl sulla cartella "res" del tuo progetto e seleziona "Nuovo> Directory risorse Android".
• Dai a questa directory il nome "anim".
• Apri il menu a discesa "Tipo di risorsa" e scegli "anim".
• Fai clic su "OK".

Cominciamo definendo un'animazione in dissolvenza:

• Fai clic tenendo premuto il tasto Ctrl sulla directory "res / anim" del tuo progetto.
• Seleziona "Nuovo> File delle risorse di animazione".
• Dai a questo file il nome "fade_out".
• Apri il tuo file "fade_out" e aggiungi quanto segue:

Ripetere i passaggi precedenti per creare un secondo file di risorse di animazione, denominato "slide_out_left", quindi aggiungere quanto segue:

Crea un terzo file, chiamato "slide_out_right" e aggiungi quanto segue:

Ora puoi assegnare queste animazioni alle tue azioni tramite l'editor di navigazione.Per riprodurre l'animazione di dissolvenza ogni volta che l'utente passa da FirstFragment a SecondFragment:

• Apri il tuo grafico di navigazione e assicurati che la scheda "Progettazione" sia selezionata.
• Fare clic per selezionare l'azione che collega FirstFragment a SecondFragment.
• Nel pannello "Attributi", fai clic per espandere la sezione "Transizioni". Per impostazione predefinita, ogni menu a discesa in questa sezione deve essere impostato su "Nessuno".
• Apri il menu a discesa "Invio", che controlla l'animazione che viene riprodotta ogni volta che SecondFragment passa alla parte superiore dello stack posteriore. Seleziona l'animazione "fade_out".

Se passi alla scheda "Progettazione", vedrai che questa animazione è stata aggiunta a "action_firstFragment_to_secondFragment".

Esegui il progetto aggiornato sul tuo dispositivo Android o AVD. Ora dovresti riscontrare un effetto di dissolvenza ogni volta che navighi da FirstFragment a SecondFragment.

Se dai un'altra occhiata al pannello "Attributi", vedrai che "Invio" non è l'unica parte della transizione in cui puoi applicare un'animazione. Puoi anche scegliere tra:

• Uscita: L'animazione che viene riprodotta quando un frammento lascia la pila
• Pop Enter: L'animazione che viene riprodotta quando un frammento popola la parte superiore della pila
• Uscita Pop: L'animazione che viene riprodotta quando un frammento sta passando in fondo alla pila

Prova a sperimentare applicando diverse animazioni a diverse parti delle tue transizioni. Puoi anche scaricare il progetto completato da GitHub.

Avvolgendo

In questo articolo, abbiamo esaminato come utilizzare il componente Architettura di navigazione per creare un'applicazione a singola attività, a più frammenti, completa di animazioni di transizione personalizzate. Il componente di navigazione ti ha convinto a migrare i tuoi progetti in questo tipo di struttura applicativa? Fateci sapere nei commenti qui sotto!