1. Introduzione
I componenti Material (MDC) aiutano gli sviluppatori a implementare Material Design. Creato da un team di ingegneri e progettisti UX di Google, MDC include decine di componenti UI belli e funzionali ed è disponibile per Android, iOS, web e Flutter.material.io/develop |
Material Components for 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 AppCompat. I componenti forniti da MDC Android possono essere utilizzati in base alle esigenze e apportare un miglioramento immediato del design alla tua app esistente.
Cosa creerai
In questo codelab, sostituirai alcuni componenti esistenti in un modulo con quelli nuovi di MDC.
Componenti MDC-Android in questo codelab
- Campi di testo
- Pulsanti
- Menu
Che cosa ti serve
- Conoscenza di base dello sviluppo per Android
- Android Studio (scaricalo qui se non lo hai già)
- Un emulatore o un dispositivo Android (disponibile tramite Android Studio)
- Il codice campione (vedi il passaggio successivo)
Come valuteresti il tuo livello di esperienza nella creazione 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 questa directory prima di iniziare.
...o clonalo da GitHub
Per clonare questo codelab da GitHub, esegui i seguenti comandi:
git clone https://github.com/material-components/material-components-android-codelabs cd material-components-android-codelabs/ git checkout 111-starter
Caricare il codice iniziale in Android Studio
- Al termine della configurazione guidata e alla visualizzazione della finestra Welcome to Android Studio (Benvenuto in Android Studio), fai clic su Open an existing Android Studio project (Apri un progetto Android Studio esistente). Vai alla directory in cui hai installato il codice di esempio e seleziona kotlin -> shipping (o cerca shipping sul computer) per aprire il progetto Shipping.
- Attendi un momento che Android Studio crei e sincronizzi il progetto, come indicato dagli indicatori di attività nella parte inferiore della finestra di Android Studio.
- A questo punto, Android Studio potrebbe generare alcuni errori di build perché mancano l'SDK Android o gli strumenti di build, ad esempio quello mostrato di seguito. Segui le istruzioni in Android Studio per installare/aggiornare questi elementi e sincronizzare il progetto.
Esegui l'app iniziale
|
|
Operazione riuscita. Dovresti vedere l'app e il relativo modulo.
3. Aggiorna i campi di testo
I campi di testo Material Design offrono un notevole miglioramento dell'usabilità rispetto ai campi di testo semplici. Definendo la zona di tocco con un contorno o un riempimento dello sfondo, gli utenti hanno maggiori probabilità di interagire con il tuo modulo o identificare i campi di testo all'interno di contenuti più complessi.
Importa MDC-Android
Vai al file build.gradle del modulo app e assicurati che il blocco dependencies includa una dipendenza da MDC 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 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 anche le decorazioni in modo che siano rosse.
In ShippingInfoActivity.kt, aggiorna onCreate() per controllare l'input di testo e impostare gli errori in modo appropriato. Dovrebbe avere un aspetto simile a questo:
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 vuoto almeno un campo di testo:
I campi di testo vuoti sono rossi e contengono un testo di errore.
4. Aggiorna il pulsante
Il telecomando MDC ha pulsanti con:
- Ondulazioni dell'inchiostro
- Angoli arrotondati
- Supporto dei temi
- Layout e tipografia perfetti
- Basati su AppCompatButton (la classe di pulsanti Android standard), quindi sai come utilizzarli nel tuo codice.
(Facoltativo) Sostituisci classe pulsante
Per impostazione predefinita, la libreria Material espande automaticamente i pulsanti normali in pulsanti MDC. Tuttavia, puoi sostituire facoltativamente tutti i riferimenti a Button con MaterialButton per accedere a metodi aggiuntivi disponibili solo in un MaterialButton, ad esempio la modifica del raggio dell'angolo. I pulsanti MDC sono un semplice componente plug-and-play. Basta sostituire il nome del componente XML Button con MaterialButton e applicare lo stile predefinito 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:
- Correzione dell'elevazione e dello stile
- Attributi di spessore e colore del tratto
Inserire contenuti in una scheda
Racchiudi il LinearLayout contenente 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 racchiuso in una scheda:
Il componente Visualizzazione scheda Material è un modo familiare ma nuovo 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, schede e non hai dovuto riprogettare completamente l'app. Anche altri componenti possono fare una grande differenza, come la barra delle app superiore e TabLayout.
Passaggi successivi
Puoi esplorare altri componenti in MDC-Android visitando il catalogo dei widget Android.