Skip to content

Latest commit

 

History

History
81 lines (46 loc) · 3.98 KB

view-design.it.md

File metadata and controls

81 lines (46 loc) · 3.98 KB
Raw

design

Il design dell'applicazione è definito su Questo progetto Figma

Consigli generali

Utilizzare Constraintlayout per organizzare i vari elementi di una pagina. Solo in rari casi servono altri tipi di layout

Constraint layout è spiegato in dettaglio in questo sito, e permette di implementare design avanzati, come in Questo esempio

Quando si impostano le dimensioni di un elemento, usare sempre match_parent oppure wrap_content. è meglio evitare il piu possibile valori numerici nel design.

In alcuni casi, come quando si impostano padding, servono valori numerici. In questi casi usare dp come unita di misura, e come valore multipli di 8: 0, 8, 16, 24, 32

Preview del design scompare

Sta roba succede spesso: A caso, la preview del design diventa nera e non si capisce piu niente. [TODO: IMG] per risolverla, premere r sulla tastiera, per ricaricare la preview

Un altro trucco che spesso risolve problemi: Build > Clean project oppure Build > Rebuild project . [TODO: IMG] è praticamente come riavviare android studio ma istantaneo.

Usare gli elementi in figma

Implementare in android studio il design su figma non è immediato.

Diversi elementi come TextInput, navbar, etch si implementano in un modo specifico. Non basta trascinare un TextInput dalla lista di elementi di android studio, perchè quelli sono elementi Materia design 2.

Quindi come si fa?

Se l'elemento è gia stato implementao da qualche parte nell'app, si può copiare da li. Nota che quando si copia un elemento l'ID va cambiato.

Altrimenti, si può consultare la documentazione, tramite questa tarantella:

  • cliccare sull'elemento in figma per scoprire il nome (a volte è accurato, a volte no, ma rende l'idea abbastanza)
  • cercare il nome dell'elemento sulla Guida material3. Ad esempio, l'input di testo è in questa pagina
  • All'interno della pagina, nella sezione Resources, trovare il link alla pagina di documentazione MDC-Android. Ad esempio, per L'input di testo la documentazione è questa
  • Usare la guida e gli esempi nella documentazione MDC-Android per implementare l'elemento in android studio. Nota che alcuni elementi non sono supportati dala nostra versione, e semplicemente non possono essere usati

Attenzione: La documentazione che segue è ancora in lavorazione

elementi di ui complessi

Quando si implementa un design la maggior parte del tempo è spesa a capire come si implementano elementi comlpessi, come liste di dati, navbar, popup, eccetera.

Le guide che seguono spiegano come implementare alcuni di questi elementi all'interno della roboapp.

navigare da una schermata ad un altra

TODO

Implementare liste di dati

https://developer.android.com/develop/ui/views/layout/recyclerview https://developer.android.com/reference/androidx/recyclerview/widget/ListAdapter

Bottom sheet

Bottom sheet è una normale schermata, che però si apre dal basso, coprendo parzialmente la schermata sotto. [TODO: IMG]

è molto facile da implementare:

  • Prima di tutto si implementa una normale schermata, come spiegato qui
  • Nel navgraph, si trova la sezione che descrive la schermata e si sostituisce il tag fragment con un tag dialog
  • Si modifica il fragment della schermata: la classe fragment deve estendere BottomSheetFragment anzichè Fragment

Queso video mostra chiaramente i passaggi

All'interno di un BottomSheetFragment non si può navigare ad altre schermate. L'unica operazione permessa è chiudere il bottomsheetfragment. Per farlo basta eseguire dismiss()