Stili di navigazione

 

Benvenuti

Ogni tanto riesco a liberarmi dalle mie due puffette 👧👶 ed accendere un po' il pc, mi sento arrugginito 😂 Da una domanda sul gruppo telegram ( che vi invito a raggiungere 👉 QUI ) è nata l'idea di questo tutorial. Probabilmente a molti sembreranno informazioni banali ma consideriamo anche che non tutti partono dallo stesso livello. Oggi andremo a vedere tutte le possibili personalizzazioni che kodular ci mette a disposizione per la navigazione in app, possibilità che prima erano accessibili solo con estensioni oppure giri infiniti di codice per cercare di ricreare quel determinato stile.

View Pager

Il più semplice e facile da utilizzare e credo anche quello che funzioni meglio , classico menu in alto con scritte che identificano la pagina in visualizzazione , in automatico è già attivo lo swipe e anche la selezione con il tap. Non permette la personalizzazione con icone e non è possibile spostarlo in basso però se ne possono inserire due per esempio 😅 Non ho osato oltre ma se provate fatemi sapere se ne accetta un terzo e a questo punto se c'è un massimo 🙈 Il codice è molto semplice come anche i blocchi presenti che permettono l'aggiunta e la rimozione e l'evento che restituisce la posizione selezionata. Ecco il codice della doppietta, ogni componente che si vuole aggiungere dovrà avere un nome e un arrangement che lo accoglie, lanciato il codice l'accoppiamento andrà in automatico nascondendo quello non attivo e mostrando quello selezionato, funzione swipe compresa.

Tab layout

Molto più carino del precedente ci permette di aggiungere una barra con all'interno tanti Tab , tante linguette cliccabili, e questa volta abbiamo la possibilità di personalizzare sia con il testo che con un'icona. Per il resto il funzionamento è totalmente relegato al nostro codice in quanto l'unica cosa automatizzata sarà solo la barra. Al click sull'elemento verrà selezionato, cambieranno i colori , potremo personalizzare ma non avverrà niente a livello di screen o di pagine visualizzate. Avremo i soliti blocchi per la gestione dei Tab, tipo inserimento , inserimento in posizione x, per eliminare e ottenere il numero di Tab presenti. L'evento item selezionato poi ci restituisce sia la posizione che il nome del Tab cliccato. Tutti questi blocchi li potremo utilizzare per la gestione di ciò che vogliamo realizzare, nel nostro esempio parliamo di navigazione in app quindi faremo scorrere i vari screen della nostra app. Vedremo l'esempio solo al tap della selezione perché anche se attivabile dalle impostazioni non sono riuscito a capire come utilizzare lo swipe, il primo che lo capisce avvisa gli altri 😂 

Come anticipato gli elementi dell'app e la barra sono slegate tra loro quindi dovremo per prima cosa inserire tanti arrangement quante sezioni vorremo ricreare, io ne ho inserite tre, tutti vertical ma solo per velocità. Adesso vediamo come gestire il passaggio da una sezione all'altra, questo é il primo metodo che mi è venuto in mento ma sono sicuro ce ne saranno tanti. Tu che codice useresti?

Io ho preferito utilizzare any component quindi mi servirà una variabile lista in cui salverò i tre vertical arrangement, all'inizializzazione dello screen aggiungiamo i vari Tab personalizzando con nome e icona. Per chi ancora non ci avesse fatto caso tra i molti blocchi inseriti per lo Screen abbiamo anche una variabile per selezionale velocemente gli elementi salvati come asset, grande comodità visto che prima dovevi scriverli a mano nelle textbox e ti incavolavi quando per fretta ti dimenticavi di rinominarli e ti trovavi con file image2548syencopy(2).png da scrivere ogni volta. Non dire che non ti è capitato 💪 

Fatto questo al click sull'icona come prima cosa grazie ad un for each setto invisibili tutti gli arrangement presenti nella lista Screen e poi setto visibile solo quello cliccato utilizzando il select list item e position come index passato dall'evento stesso. Naturalmente questo funziona se l'ordine dei Tab è il medesimo degli arrangement nella lista Screen. Visto che non è legato strettamente alla visualizzazione possiamo aggiungere la barra anche sotto o eventualmente in mezzo e anche più di una.

Bottom navigation

Molto simile alla precedente anche a livello di personalizzazione e funzionamento ma cambia leggermente lo stile grafico , fondamentalmente anche i blocchi sono simili tranne qualche piccola variante tipo il blocco per aggiornare un elemento è la presenza dell'id come parametro.

La solita lista di arrangement e blocco inizializzazione per impostare la barra, sempre i miei carri blocchi any con codice leggermente diverso per non annoiarsi 😂 Questa volta invece di aggiungere separatamente il blocco da rendere visibile ho impostato il controllo direttamente nel for each rendendo visibile proprio il blocco che ha id uguale a quello controllato in quel momento dal ciclo. 

Non devo ricordare che la sequenza degli elementi nella lista e quelli posizionati sulla barra hanno un'importanza fondamentale. Anche qui possiamo aggiungere più barre e niente swipe.

Side menu

Probabilmente quella più desiderata quando non c'era, mi ricordo che ognuno cercava la sua strategia per realizzare un'animazione del genere. E ricordo che non tutte erano carine 😂

Oggi invece bastano pochi click. La grafica parla da sola e anche i pochi blocchi disponibili che però fanno il loro dovere.

Il blocco aggiungi permette la creazione e personalizzazione tramite nome e immagine, se la sezione è attiva e quale visualizzare come selezionata alla partenza.

In alto abbiamo Titolo e Sottotitolo insieme ad un'immagine di background e una più piccola tipo immagine di profilo che si può settare anche come circolare. Il codice ormai lo conoscete meglio di me 😂 

ATTENZIONE che spesso l'app va in crash quando si prova l'app tramite companion mentre si utilizza questa componente, una volta installata invece nessun problema.  

Credo sia proprio arrivato il momento di salutarci e ci vediamo alla prossima puntata. Mi raccomando scrivete nei commenti , seguitemi sui social , fatemi sapere se vi piacciono i contenti.

Insomma supportatemi e sopportatemi 😂 Ti piacciono i miei reel ? 

Hai apprezzato il mio lavoro?Se ti va puoi offrirmi un bel caffè 😍