1. Introduzione
Material Components (MDC) consente agli sviluppatori di implementare Material Design. Creato dal team di ingegneri e designer UX di Google, MDC è dotato di decine di componenti UI belli e funzionali ed è disponibile per Android, iOS, web e Flutter.material.io/develop |
Material Components per Android (MDC Android) non è un nuovo sistema o framework che richiede un cambio di paradigma nella tua app. MDC Android si basa sulle stesse classi e API che già conosci in Android, come i pulsanti e i campi di testo di AppCompat. I componenti forniti da MDC Android possono essere utilizzati secondo necessità e apportare un miglioramento immediato al design della tua app esistente.
Cosa creerai
In questo codelab, sostituirai alcuni componenti esistenti in un modulo con altri nuovi di MDC.
Componenti MCD-Android in questo codelab
- Campi di testo
- Pulsanti
- Menu
Che cosa ti serve
- Conoscenza di base dello sviluppo di Android
- Android Studio (scaricalo qui se non l'hai ancora fatto)
- Un emulatore o un dispositivo Android (disponibile tramite Android Studio)
- Il codice di esempio (vedi il passaggio successivo)
Come giudichi il tuo livello di esperienza nello sviluppo di app per Android?
2. Configurazione dell'ambiente di sviluppo
Scarica l'app codelab iniziale
L'app iniziale si trova nella directory material-components-android-codelabs-111-starter/kotlin. Assicurati di cd in quella directory prima di iniziare.
...o clonarlo da GitHub
Per clonare questo codelab da GitHub, esegui questi comandi:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Carica il codice di avvio in Android Studio
- Al termine della configurazione guidata e visualizzata la finestra Ti diamo il benvenuto in Android Studio, fai clic su Apri un progetto Android Studio esistente. Passa alla directory in cui hai installato il codice di esempio e seleziona kotlin -> spedizione (o cerca shipping sul computer) per aprire il progetto Spedizione.
- Attendi un momento affinché Android Studio crei e sincronizzi il progetto, come mostrato dagli indicatori di attività nella parte inferiore della finestra di Android Studio.
- A questo punto, Android Studio potrebbe generare alcuni errori di generazione perché non disponi dell'SDK Android o degli strumenti di sviluppo, come quello mostrato di seguito. Segui le istruzioni in Android Studio per installarle/aggiornarle e sincronizzare il progetto.
Esegui l'app iniziale
|
|
Operazione riuscita. Dovresti vedere l'app e il relativo formato.
3. Aggiorna i campi di testo
I campi di testo Material Design presentano un notevole miglioramento in termini di usabilità rispetto ai campi di testo normale. Se definisci l'area sensibile con un contorno o un riempimento dello sfondo, è più probabile che gli utenti interagiscano con il modulo o identifichino campi di testo all'interno di contenuti più complessi.
Importa MDC-Android
Passa al file build.gradle del modulo app e assicurati che il blocco dependencies includa una dipendenza su MDC per Android:
api 'com.google.android.material:material:1.1.0-alpha05'
Sostituire gli stili dei campi di testo
In shipping_info_activity.xml, aggiungi il seguente stile a tutti i componenti XML di TextInputLayout:
shipping_info_activity.xml
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
Ogni TextInputLayout dovrebbe avere il seguente aspetto:
shipping_info_activity.xml
<com.google.android.material.textfield.TextInputLayout
android:id="@+id/name_text_input"
style="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:errorEnabled="true">
<com.google.android.material.textfield.TextInputEditText
android:id="@+id/name_edit_text"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="@string/label_name" />
</com.google.android.material.textfield.TextInputLayout>
Crea ed esegui:
Tutti i campi di testo vengono aggiornati in modo da utilizzare i design più recenti in MDC.
Aggiungere un errore
I campi di testo MDC hanno una presentazione degli errori integrata. MDC aggiunge testo rosso sotto il campo di testo e aggiorna le decorazioni in rosso.
In ShippingInfoActivity.kt, aggiorna onCreate() per controllare l'input di testo e impostare gli errori come appropriato. Dovrebbe avere un aspetto simile al seguente:
ShippingInfoActivity.kt
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.shipping_info_activity)
val rootView = findViewById<View>(android.R.id.content)
val textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout::class.java)
save_button.setOnClickListener {
var noErrors = true
for (textInputLayout in textInputLayouts) {
val editTextString = textInputLayout.editText!!.text.toString()
if (editTextString.isEmpty()) {
textInputLayout.error = resources.getString(R.string.error_string)
noErrors = false
} else {
textInputLayout.error = null
}
}
if (noErrors) {
// All fields are valid!
}
}
}
Crea ed esegui. Premi SALVA, ma lascia almeno un campo di testo vuoto:
I campi di testo vuoti sono rossi e presentano un testo di errore sotto.
4. Aggiorna il pulsante
MDC dispone di pulsanti con:
- Increspature d'inchiostro
- Angoli arrotondati
- Supporto per i temi
- Layout e tipografia perfetti per Pixel
- Basato su AppCompatButton (la classe dei pulsanti Android standard), così sai come utilizzarli nel tuo codice.
Se necessario, sostituisci la classe del pulsante
Per impostazione predefinita, la libreria Material gonfia automaticamente i pulsanti normali in pulsanti MDC. Tuttavia, puoi facoltativamente sostituire tutti i riferimenti a Pulsante con MaterialButton in modo da poter accedere a metodi aggiuntivi disponibili solo in un MaterialButton, come la modifica del raggio d'angolo. I pulsanti MDC sono un semplice componente plug-and-play. Devi solo sostituire il nome del componente XML Button con MaterialButton e applicare lo stile predefinito di MaterialButton a MaterialButton.
In shipping_info_activity.xml, modifica il pulsante da:
shipping_info_activity.xml
<Button
android:id="@+id/save_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
A:
shipping_info_activity.xml
<com.google.android.material.button.MaterialButton
android:id="@+id/save_button"
style="@style/Widget.MaterialComponents.Button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="end"
android:layout_marginTop="16dp"
android:text="@string/label_save" />
Crea ed esegui:
5. Aggiungi scheda
MaterialCardView è un componente basato su CardView con:
- Correggere l'elevazione e lo stile
- Attributi di colore e larghezza tratto
Aggregare contenuti in una scheda
Aggrega LinearLayout che include i tuoi contenuti in shipping_info_activity.xml con un componente MaterialCardView, come segue:
shipping_info_activity.xml
<com.google.android.material.card.MaterialCardView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="16dp"
app:contentPadding="16dp">
<!-- LinearLayout goes here -->
</com.google.android.material.card.MaterialCardView>
Crea ed esegui. L'intero modulo deve essere racchiusa in una scheda:
Il componente Visualizzazione schede Material è un modo familiare ma innovativo per racchiudere facilmente i tuoi contenuti in una scheda.
6. Riepilogo
Hai sostituito alcuni componenti comuni per mostrare un valore immediato: campi di testo, pulsanti e schede, senza dover riprogettare completamente la tua app. Anche altri componenti possono fare una grande differenza, come la barra superiore delle app e il layout Tab.
Passaggi successivi
Puoi esplorare altri componenti di MDC-Android visitando il catalogo di widget Android.