MDC-104 per Android: componenti Material Advanced (Kotlin)

Material Components (MDC) aiuta 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

Nel codelab MDC-103, hai personalizzato il colore, l'elevazione e la tipografia dei componenti Material (MDC) per dare uno stile alla tua app.

Un componente del sistema Material Design svolge un insieme di attività predefinite e ha determinate caratteristiche, ad esempio un pulsante. Tuttavia, un pulsante non è solo un modo per un utente di eseguire un'azione, ma anche un'espressione visiva di forma, dimensione e colore che indica all'utente che è interattivo e che qualcosa accadrà al tocco o al clic.

Le linee guida di Material Design descrivono i componenti dal punto di vista di un designer. Descrivono un'ampia gamma di funzioni di base disponibili su tutte le piattaforme, nonché gli elementi anatomici che compongono ogni componente. Ad esempio, uno sfondo contiene un livello posteriore e i relativi contenuti, il livello anteriore e i relativi contenuti, le regole di movimento e le opzioni di visualizzazione. Ciascuno di questi componenti può essere personalizzato in base alle esigenze, ai casi d'uso e ai contenuti di ogni app. Questi componenti sono, per la maggior parte, visualizzazioni, controlli e funzioni tradizionali dell'SDK della tua piattaforma.

Sebbene le linee guida di Material Design nominino molti componenti, non tutti sono candidati ideali per il codice riutilizzabile e pertanto non si trovano in MDC. Puoi creare queste esperienze autonomamente per ottenere uno stile personalizzato per la tua app, il tutto utilizzando il codice tradizionale.

Cosa creerai

In questo codelab, aggiungerai uno sfondo a Shrine. Filtra i prodotti mostrati nella griglia asimmetrica per categoria. Utilizzerai:

• Forma
• Movimento
• Classi SDK Android tradizionali

Questo è l'ultimo di quattro codelab che ti guidano nella creazione di un'app per un prodotto chiamato Shrine. Ti consigliamo di svolgere tutti i codelab in ordine, poiché le attività vengono eseguite passo dopo passo. I codelab correlati sono disponibili all'indirizzo: MDC-101: Nozioni di base sui componenti Material (MDC) MDC-102: Material Design Structure and Layout. MDC-103: Material Design Theming con colore, forma, elevazione e tipo

Componenti MDC-Android in questo codelab

• Forma

Che cosa ti serve

• Conoscenza 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 di esempio (vedi il passaggio successivo)

Come valuteresti il tuo livello di esperienza nella creazione di app per Android?

Principiante Intermedio Avanzato

Hai seguito il corso MDC-103?

Se hai completato MDC-103, il codice dovrebbe essere pronto per questo codelab. Vai al passaggio 3.

Parti da zero?

Scarica l'app codelab iniziale

Scaricare l'app iniziale

L'app iniziale si trova nella directory material-components-android-codelabs-104-starter/kotlin. Assicurati di cd in questa directory prima di iniziare.

… oppure 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 104-starter

Per ulteriore assistenza: Clonazione di un repository da GitHub

Carica il codice di avvio in Android Studio

1. Al termine della configurazione guidata e alla visualizzazione della finestra Benvenuto in Android Studio, fai clic su Apri un progetto Android Studio esistente. Vai alla directory in cui hai installato il codice di esempio e seleziona kotlin -> shrine (o cerca shrine sul computer) per aprire il progetto Shipping.
2. 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.
3. A questo punto, Android Studio potrebbe generare alcuni errori di build perché mancano l'SDK Android o gli strumenti di build, come quello mostrato di seguito. Segui le istruzioni in Android Studio per installare/aggiornare questi elementi e sincronizzare il progetto.

Aggiungere le dipendenze del progetto

Il progetto richiede una dipendenza dalla libreria di supporto MDC Android. Il codice campione che hai scaricato dovrebbe già avere questa dipendenza elencata, ma è buona norma eseguire i seguenti passaggi per assicurarsi.

1. 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'

2. (Facoltativo) Se necessario, modifica il file build.gradle per aggiungere le seguenti dipendenze e sincronizza il progetto.

dependencies {
    api 'com.google.android.material:material:1.1.0-alpha06'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.android.volley:volley:1.1.1'
    implementation 'com.google.code.gson:gson:2.8.5'
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:1.3.21"
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'androidx.test:core:1.1.0'
    androidTestImplementation 'androidx.test.ext:junit:1.1.0'
    androidTestImplementation 'androidx.test:runner:1.2.0-alpha05'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.2.0-alpha05'
}

Eseguire l'app iniziale

Assicurati che la configurazione della build a sinistra del pulsante Esegui / Riproduci sia app. Premi il pulsante verde Esegui / Riproduci per creare ed eseguire l'app. Nella finestra Seleziona destinazione di distribuzione, se hai già un dispositivo Android elencato nei dispositivi disponibili, vai al passaggio 8. In caso contrario, fai clic su Crea nuovo dispositivo virtuale. Nella schermata Seleziona hardware, seleziona uno smartphone, ad esempio Pixel 2, e poi fai clic su Avanti. Nella schermata Immagine di sistema, seleziona una versione recente di Android, preferibilmente il livello API più alto. Se non è installato, fai clic sul link Scarica mostrato e completa il download. Fai clic su Avanti. Nella schermata Android Virtual Device (AVD), lascia le impostazioni invariate e fai clic su Fine. Seleziona un dispositivo Android dalla finestra di dialogo Destinazione di deployment. Fai clic su Ok. Android Studio crea l'app, la esegue il deployment e la apre automaticamente sul dispositivo di destinazione.

Se non sei riuscito ad aggiungere la dipendenza o a eseguire l'app correttamente, interrompi la procedura e risolvi i problemi relativi all'ambiente di sviluppo.

Se viene visualizzato un errore INSTALL_FAILED_INVALID_APK durante la compilazione, prova a eseguire "Build" -> "Clean Project" in Android Studio.

Operazione riuscita. Dovresti vedere l'app Shrine in esecuzione sul tuo dispositivo.

Uno sfondo è la superficie più lontana di un'app, che appare dietro tutti gli altri contenuti e componenti. È composto da due superfici: uno strato posteriore (che mostra azioni e filtri) e uno strato anteriore (che mostra i contenuti). Puoi utilizzare un riquadro per visualizzare informazioni e azioni interattive, come filtri di navigazione o contenuti.

Nascondere i contenuti della griglia

In shr_product_grid_fragment.xml, aggiungi l'attributo android:visibility="gone" al tuo NestedScrollView per rimuovere temporaneamente i contenuti del prodotto:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   android:visibility="gone"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Installeremo uno sfondo in questa regione. Per evitare di mostrare una divisione tra la barra delle app in alto e i contenuti del menu visualizzati sullo sfondo, faremo in modo che lo sfondo abbia lo stesso colore della barra delle app in alto.

In shr_product_grid_fragment.xml, aggiungi quanto segue come primo elemento nella FrameLayout principale, prima di AppBarLayout:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="100dp"
   android:paddingBottom="100dp">

</LinearLayout>

In styles.xml, aggiungi quanto segue:

styles.xml

<style name="Widget.Shrine.Backdrop" parent="">
   <item name="android:background">?attr/colorAccent</item>
</style>

Ben fatto! Hai aggiunto uno sfondo bellissimo all'interfaccia utente di Shrine. A questo punto, aggiungiamo un menu.

Aggiungere il menu

Un menu è essenzialmente un elenco di pulsanti di testo. Ne aggiungeremo uno qui.

Crea un nuovo file di layout denominato shr_backdrop.xml nella directory res -> layout e aggiungi quanto segue:

shr_backdrop.xml

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android">

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_featured_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_apartment_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_accessories_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_shoes_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_tops_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_bottoms_label" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_dresses_label" />

   <View
       android:layout_width="56dp"
       android:layout_height="1dp"
       android:layout_margin="16dp"
       android:background="?android:attr/textColorPrimary" />

   <com.google.android.material.button.MaterialButton
       style="@style/Widget.Shrine.Button.TextButton"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
       android:text="@string/shr_account_label" />

</merge>

Aggiungi questo elenco al LinearLayout che hai appena aggiunto in shr_product_grid_fragment.xml utilizzando un tag <include>:

shr_product_grid_fragment.xml

<LinearLayout
   style="@style/Widget.Shrine.Backdrop"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:gravity="center_horizontal"
   android:orientation="vertical"
   android:paddingTop="88dp">

   <include layout="@layout/shr_backdrop" />
</LinearLayout>

Crea ed esegui. La schermata Home dovrebbe essere simile a questa:

Ora abbiamo configurato lo sfondo. Ripristiniamo i contenuti che abbiamo nascosto in precedenza.

Prima di apportare modifiche a Shrine in questo codelab, i contenuti principali del prodotto si trovavano sulla superficie più lontana. Se aggiungi uno sfondo, i contenuti vengono messi in evidenza perché vengono visualizzati davanti allo sfondo.

Aggiungere un nuovo livello

Dovremmo mostrare di nuovo il livello della griglia dei prodotti. Rimuovi l'attributo android:visibility="gone" da NestedScrollView:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Stiliamo il livello anteriore con una tacca nell'angolo in alto a sinistra. Material Design si riferisce a questo tipo di personalizzazione come forma. Le superfici dei materiali possono essere visualizzate in diverse forme. Le forme aggiungono enfasi e stile alle superfici e possono essere utilizzate per esprimere il branding. Le forme dei materiali possono avere angoli e bordi curvi o angolati e un numero qualsiasi di lati. Possono essere simmetrici o irregolari.

Aggiungere una forma

Modifica la forma della griglia. Abbiamo fornito uno sfondo con una forma personalizzata, ma la forma viene visualizzata correttamente solo su Android Marshmallow e versioni successive. Possiamo impostare lo sfondo shr_product_grid_background_shape sul tuo NestedScrollView solo per Android Marshmallow e versioni successive. Innanzitutto, aggiungi un id al tuo NestedScrollView in modo da poterlo fare riferimento nel codice, come segue:

shr_product_grid_fragment.xml

<androidx.core.widget.NestedScrollView
   android:id="@+id/product_grid"
   android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:layout_marginTop="56dp"
   android:background="@color/productGridBackgroundColor"
   android:elevation="8dp"
   app:layout_behavior="@string/appbar_scrolling_view_behavior">

Poi, imposta lo sfondo a livello di programmazione in ProductGridFragment.kt. Aggiungi la seguente logica per impostare lo sfondo alla fine di onCreateView(), appena prima dell'istruzione return:

ProductGridFragment.kt

// Set cut corner background for API 23+
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.M) {
       view.product_grid.background = context?.getDrawable(R.drawable.shr_product_grid_background_shape)
}

Infine, aggiorneremo la risorsa di colore productGridBackgroundColor (utilizzata anche dallo sfondo della forma personalizzata) nel seguente modo:

colors.xml

<color name="productGridBackgroundColor">#FFFBFA</color>

Crea ed esegui:

Abbiamo dato a Shrine una forma personalizzata per la sua superficie principale. A causa dell'elevazione della superficie, gli utenti possono vedere che c'è qualcosa proprio dietro lo strato bianco anteriore. Aggiungiamo il movimento in modo che gli utenti possano vedere cosa c'è: il menu.

Il movimento è un modo per dare vita alla tua app. Il movimento può essere ampio e drammatico, sottile e minimale o una via di mezzo. Il tipo di movimento che utilizzi deve essere adatto alla situazione. Il movimento applicato alle azioni regolari ripetute deve essere piccolo e sottile, in modo da non richiedere troppo tempo su base regolare. Altre situazioni, come la prima volta che un utente apre un'app, possono essere più accattivanti e possono aiutare l'utente a capire come utilizzare la tua app.

Aggiungere il movimento di rivelazione al pulsante del menu

Il movimento è la forma davanti che si sposta verso il basso. Abbiamo già fornito un listener di clic che esegue l'animazione di traduzione per il foglio, in NavigationIconClickListener.kt. Possiamo impostare questo listener di clic in ProductGridFragement's onCreateView(), nella sezione responsabile della configurazione della barra degli strumenti. Aggiungi la seguente riga per impostare il listener dei clic sull'icona del menu della barra degli strumenti:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

La sezione ora dovrebbe avere il seguente aspetto:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid))

Crea ed esegui. Premi il pulsante Menu:

Se premi di nuovo l'icona del menu di navigazione, il menu dovrebbe nascondersi.

Modifica il movimento del livello anteriore

Il movimento è un ottimo modo per esprimere il tuo brand. Vediamo come appare l'animazione di visualizzazione utilizzando una curva di temporizzazione diversa.

Aggiorna il listener di clic in ProductGridFragment.kt per passare un interpolatore al listener di clic dell'icona di navigazione, come segue:

ProductGridFragment.kt

view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(activity!!, view.product_grid, AccelerateDecelerateInterpolator()))

Questo crea un effetto diverso, non è vero?

L'iconografia brandizzata si estende anche alle icone più comuni. Personalizziamo l'icona di rivelazione e uniamola al titolo per un aspetto unico e brandizzato.

Modificare l'icona del pulsante del menu

Modifica il pulsante del menu in modo che venga visualizzata un'icona che include un design a forma di diamante. Aggiorna la barra degli strumenti in shr_product_grid_fragment.xml per utilizzare una nuova icona brandizzata che abbiamo fornito (shr_branded_menu) e imposta gli attributi app:contentInsetStart e android:padding per fare in modo che la barra degli strumenti corrisponda meglio alle specifiche del tuo designer:

shr_product_grid_fragment.xml

<androidx.appcompat.widget.Toolbar
   android:id="@+id/app_bar"
   style="@style/Widget.Shrine.Toolbar"
   android:layout_width="match_parent"
   android:layout_height="?attr/actionBarSize"
   android:paddingStart="12dp"
   android:paddingLeft="12dp"
   android:paddingEnd="12dp"
   android:paddingRight="12dp"
   app:contentInsetStart="0dp"
   app:navigationIcon="@drawable/shr_branded_menu"
   app:title="@string/shr_app_name" />

Aggiorneremo nuovamente il nostro listener di clic in onCreateView() in ProductGridFragment.kt per includere i drawables per la barra degli strumenti quando il menu è aperto e quando è chiuso, come segue:

ProductGridFragment.kt

// Set up the toolbar.
(activity as AppCompatActivity).setSupportActionBar(view.app_bar)
view.app_bar.setNavigationOnClickListener(NavigationIconClickListener(
       activity!!,
       view.product_grid,
       AccelerateDecelerateInterpolator(),
       ContextCompat.getDrawable(context!!, R.drawable.shr_branded_menu), // Menu open icon
       ContextCompat.getDrawable(context!!, R.drawable.shr_close_menu))) // Menu close icon

Crea ed esegui:

Bene! Quando lo sfondo può essere rivelato, viene visualizzata l'icona del menu a forma di rombo. Quando il menu può essere nascosto, viene visualizzata un'icona di chiusura.

Nel corso di questi quattro codelab, hai visto come utilizzare i componenti Material per creare esperienze utente uniche ed eleganti che esprimono la personalità e lo stile di un brand.

L'app MDC 104 completata è disponibile scaricando il codelab finito o estraendo 104-complete con git: git checkout 104-complete.

Puoi testare la tua versione dell'app rispetto a quella del ramo.

Passaggi successivi

Questo codelab, MDC-104, completa questa sequenza di codelab. Puoi esplorare altri componenti in MDC-Android visitando il catalogo dei componenti MDC-Android.

Per una sfida ulteriore con questo codelab, modifica l'applicazione Shrine in modo da cambiare le immagini dei prodotti visualizzate quando viene selezionata una categoria dal menu di sfondo.

Per scoprire come collegare questa app a Firebase per un backend funzionante, consulta il Firebase Android Codelab.

Sono riuscito a completare questo codelab con un ragionevole dispendio di tempo e impegno

Totalmente d'accordo D'accordo Indifferente In disaccordo Totalmente in disaccordo

Vorrei continuare a utilizzare i componenti Material in futuro

Totalmente d'accordo D'accordo Indifferente In disaccordo Totalmente in disaccordo