Icone Material con Icon
Usi il set di icone integrato ovunque.
Icone Material con Icon è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 2 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Conoscere il composable Icon
Per simboli piccoli come un cuore o una freccia indietro, Compose offre Icon. È più leggero di Image e applica automaticamente il colore del tema.
Una raccolta di icone
Da Icons, il set di icone Material, può ottenere centinaia di simboli pronti all'uso. Non deve disegnare né esportare nulla: le basta richiamarne uno per nome.
Icon(imageVector = Icons.Default.Favorite, contentDescription = "Like")imageVector è il simbolo
Icon accetta un imageVector, ovvero un'immagine vettoriale del set Material. Essendo vettoriale, rimane nitida a qualsiasi dimensione.
Cinque stili visivi
Ogni simbolo è disponibile in diversi stili: Default, Outlined, Rounded, Sharp e TwoTone. Scelga quello più adatto allo stile della sua app.
Icon(Icons.Outlined.Settings, contentDescription = "Settings")Pacchetto di icone esteso
Il set di base è ridotto per mantenere leggere le app. Aggiunga la dipendenza material-icons-extended per sbloccare migliaia di simboli aggiuntivi.
Le icone applicano automaticamente la tinta
Per impostazione predefinita, un'Icona viene disegnata usando il colore del contenuto corrente del tema, mantenendo così un aspetto coerente senza dover impostare un colore.
Sostituire la tinta
Desidera un colore personalizzato? Passi un argomento tint e il simbolo verrà ridisegnato esattamente con quella tonalità.
Icon(Icons.Default.Star, contentDescription = null, tint = Color.Yellow)Dimensionare un'icona
Per impostazione predefinita, le icone vengono visualizzate a 24 dp, lo standard Material. Modifichi questa dimensione con un Modifier.size, proprio come per qualsiasi altro composable.
Icon(Icons.Default.Home, contentDescription = null, modifier = Modifier.size(32.dp))Descriverla è importante
Come Image, anche Icon richiede una contentDescription. Descriva l'azione, ad esempio "Add to favorites", oppure passi null se un'etichetta vicina la descrive già.
Icone all'interno dei pulsanti
Le icone danno il meglio all'interno di altri composable. Inserendo un'Icon in un IconButton ottiene un'azione toccabile e dimensionata perfettamente.
IconButton(onClick = {}) { Icon(Icons.Default.Delete, "Delete") }Icon da un drawable
Può anche creare un'Icon dal suo asset usando painterResource invece di imageVector, mantenendo la stessa applicazione automatica della tinta.
Verifica rapida
Qual è il colore predefinito usato da un'Icon quando non si imposta una tinta?
Riepilogo: icone Material
Ora sa usare Icon per simboli vettoriali nitidi, scegliere uno stile, sostituire la tinta e impostare le dimensioni con un modifier. Prossimo argomento: ridimensionare le immagini! 🎯
Impara Kotlin con un tutor IA — gratis
Scrivi ed esegui vero codice nel tuo browser, ricevi aiuto istantaneo da un tutor IA disponibile 24/7, e riprendi da dove hai lasciato sul web o nell'app.
- Corsi
- 30
- Lezioni
- 120
Domande Frequenti
La lezione «Icone Material con Icon» è gratuita?
Sì — il testo completo di «Icone Material con Icon» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.
Cosa imparerò in «Icone Material con Icon»?
Usi il set di icone integrato ovunque. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare Jetpack Compose Academy?
Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 2 di 4.
Quanto tempo richiede la lezione «Icone Material con Icon»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?
Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- La Composable Image
- Icone Material con Icon
- ContentScale e ritaglio
- Ritagliare e dare forma alle immagini