1. Introduzione
I componenti Material (MDC) aiutano gli sviluppatori a implementare Material Design. Creati da un team di ingegneri e progettisti UX di Google, i componenti MDC includono decine di componenti UI belli e funzionali e sono disponibili per Android, iOS, web e Flutter.material.io/develop |
I componenti Material per Android (MDC Android) non sono 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 migliorano immediatamente il design della 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
- Conoscenze di base dello sviluppo 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 Android?
2. Configurazione dell'ambiente di sviluppo
Scarica l'app del codelab di avvio
L'app di base si trova nella directory material-components-android-codelabs-111-starter/java. Assicurati di utilizzare cd in questa directory prima di iniziare.
...o clonala 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
Carica il codice di avvio in Android Studio
- Una volta completata la procedura guidata di configurazione e visualizzata la finestra Benvenuto in Android Studio, fai clic su Apri un progetto Android Studio esistente. Vai alla directory in cui hai installato il codice campione e seleziona java -> shipping (o cerca shipping sul computer) per aprire il progetto Shipping.
- Attendi un attimo 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 compilazione perché mancano l'SDK Android o gli strumenti di compilazione, come quello mostrato di seguito. Segui le istruzioni in Android Studio per installare/aggiornare questi elementi e sincronizzare il progetto.
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-alpha06'
Esegui l'app di base
|
|
Operazione riuscita. Dovresti vedere l'app e il relativo modulo.
3. Aggiorna i campi di testo
I campi di testo di 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, è più probabile che gli utenti interagiscano con il modulo o identifichino i campi di testo all'interno di contenuti più complessi.
Sostituisci 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.TextInputLayout
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 sono stati aggiornati per utilizzare i design più recenti in MDC.
Aggiungi 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 rosso.
In ShippingInfoActivity.java, aggiorna il metodo onCreate() in modo che abbia il seguente aspetto:
ShippingInfoActivity.java
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.shipping_info_activity);
View rootView = findViewById(android.R.id.content);
final List<TextInputLayout> textInputLayouts = Utils.findViewsWithType(
rootView, TextInputLayout.class);
Button button = findViewById(R.id.save_button);
button.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
boolean noErrors = true;
for (TextInputLayout textInputLayout : textInputLayouts) {
String editTextString = textInputLayout.getEditText().getText().toString();
if (editTextString.isEmpty()) {
textInputLayout.setError(getResources().getString(R.string.error_string));
noErrors = false;
} else {
textInputLayout.setError(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 contengono testo di errore.
4. Aggiorna il pulsante
MDC ha pulsanti con:
- Ondulazioni di inchiostro
- Angoli arrotondati
- Supporto per l'applicazione di temi
- Layout e tipografia perfetti in pixel
- Basati su AppCompatButton (la classe di pulsanti Android standard), quindi sai come utilizzarli nel codice.
(Facoltativo) Sostituisci la classe del 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 in modo da poter accedere a metodi aggiuntivi disponibili solo in un MaterialButton, ad esempio la modifica del raggio dell'angolo. I pulsanti MDC sono un componente semplice plug-and-play. Basta sostituire il nome del componente XML Button con MaterialButton e applicare lo stile MaterialButton predefinito 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:
- Elevazione e stile corretti
- Attributi di larghezza e colore del tratto
Inserisci i contenuti in una scheda
Inserisci il LinearLayout contenente i 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 inserito in una scheda:
Il componente Material Card View è un modo familiare ma nuovo per inserire facilmente i contenuti in una scheda.
6. Riepilogo
Hai sostituito alcuni componenti comuni per mostrare un valore immediato: campi di testo, pulsanti e schede e non hai dovuto riprogettare completamente l'app. Anche altri componenti possono fare una grande differenza, come la barra dell'app principale e TabLayout.
Passaggi successivi
Puoi esplorare altri componenti in MDC-Android visitando il catalogo dei widget Android.