Codelab: creare RRO con componenti car-ui-lib utilizzando il sistema di build Gradle
Mantieni tutto organizzato con le raccolte
Salva e classifica i contenuti in base alle tue preferenze.
Usa la libreria car-ui-lib per avviare in modo coerente, nel veicolo e di infotainment
(IVI). Questo codelab ti introduce a car-ui-lib e a come puoi
utilizzare gli overlay di risorse runtime per personalizzare i componenti della libreria.
Cosa imparerai a fare
Istruzioni:
Includi componenti car-ui-lib nella tua app per Android.
In questa sezione creerai un nuovo progetto Android Studio.
In Android Studio, crea un'app con un EmptyActivity.
Figura 1.Creazione di un'attività vuota
Assegna all'app il nome CarUiCodelab, quindi seleziona il linguaggio Java. Puoi
seleziona anche la posizione del file, se vuoi. Accetta i valori predefiniti per
le altre impostazioni.
Figura 2. Assegna un nome all'app.
Sostituisci activity_main.xml con il seguente blocco di codice:
Questo blocco di codice visualizza la stringa sample_text, che non è definita.
Aggiungi la stringa della risorsa sample_text e impostala su "Hello World!". nel tuo
strings.xml file. Per aprire questo file, seleziona app > src > principale > res >
valori > stringhe.xml.
Per creare la tua app, fai clic sul pulsante verde Riproduci in alto a destra. In questo modo
installa automaticamente l'APK sull'emulatore o sul dispositivo Android tramite
Gradle,
La nuova app dovrebbe aprirsi automaticamente sull'emulatore o sul dispositivo Android. Se
non devi aprire l'app CarUiCodelab da Avvio applicazioni, che è stata installata.
L'URL avrà il seguente aspetto:
Figura 3. Apri la nuova app CarUiCodelab.
Aggiungi car-ui-lib alla tua app per Android
Durata: 15 minuti
Aggiungi car-ui-lib alla tua app:
Per aggiungere la dipendenza car-ui-lib al file build.gradle del progetto:
seleziona app > build.gradle. Le dipendenze dovrebbero essere simili alle seguenti:
Utilizza i componenti car-ui-lib nella tua app per Android
Ora che hai car-ui-lib, aggiungi una barra degli strumenti alla tua app.
Nel file MainActivity.java, sovrascrivi il metodo onCreate:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Get the toolbar controller instance.
ToolbarController toolbar = CarUi.getToolbar(this);
// Set the title on toolbar.
toolbar.setTitle(getTitle());
// Set the logo to be shown with the title.
toolbar.setLogo(R.mipmap.ic_launcher_round);
}
Per utilizzare il tema Theme.CarUi.WithToolbar, seleziona
app > src > principale > AndroidManifest.xml, quindi aggiorna
AndroidManifest.xml affinché appaia come segue:
Aggiungere un controller di autorizzazioni all'app
Per controllare a quali risorse viene sovrapposto un pacchetto RRO, aggiungi un file denominato
overlayable.xml nella cartella /res dell'app. Questo file funge da autorizzazione
tra la tua app (il target) e il tuo pacchetto RRO (l'overlay).
Aggiungi res/values/overlayable.xml alla tua app e copia i seguenti contenuti
nel tuo file:
Poiché la stringa sample_text deve essere sovrapponibile da un RRO, includi il parametro
del nome della risorsa nel file overlayable.xml dell'app.
Il tuo file overlayable.xmlDEVE risiedere in res/values/. In caso contrario,
OverlayManagerService non riesce a localizzarlo.
Per saperne di più sulle risorse sovrapponibili e su come utilizzarle
configurati, consulta l'articolo Limitare l'overlay
Google Cloud.
Creare un pacchetto RRO
In questa sezione, creerai un pacchetto RRO per modificare la stringa visualizzata sopra
da "Hello World!" in "Hello World RRO".
Per creare un nuovo progetto, seleziona File > Nuovo > Nuovo progetto. Assicurati di
seleziona Nessuna attività anziché Attività vuota, poiché i pacchetti RRO contengono
risorse.
Le configurazioni hanno un aspetto simile a quello illustrato di seguito. La
posizione in cui vengono salvati può variare:
Dopo aver creato il nuovo progetto CarUiRRO, dichiara il progetto come
RRO modificando AndroidManifest.xml.
Questa operazione genera un errore in @xml/sample_overlay. resourcesMap
il file mappa i nomi delle risorse dal pacchetto di destinazione al pacchetto RRO.
Copia il seguente blocco di codice in …/res/xml/sample_overlay.xml:
shell:~$ adb shell cmd overlay enable --user current com.example.caruirro
shell:~$ adb shell cmd overlay list --user current | grep -i com.example
com.example.caruicodelab
[x] com.example.caruirro
L'app mostra la stringa "Hello World RRO".
Figura 4: Hello World RRO!
Complimenti! Hai creato il tuo primo RRO.
Quando utilizzi i RRO, ti consigliamo di usare lo strumento Android Asset Packaging Tool (AAPT2)
segnala --no-resource-deduping e --no-resource-removal descritti in
Opzioni di collegamento.
Non è necessario aggiungere flag in questo codelab, ma ti consigliamo di utilizzarli
nei tuoi RRO per evitare la rimozione delle risorse (e problemi di debug). Tu
puoi aggiungerli al file build.gradle dell'RRO in questo modo:
Modifica i componenti car-ui-lib utilizzando gli RRO nell'app per Android
In questa pagina viene descritto come utilizzare un overlay delle risorse di runtime (RRO) per
modificare componenti dalla raccolta car-ui-lib nell'app per Android.
Imposta il colore di sfondo della barra degli strumenti
Durata: 15 minuti
Per modificare il colore di sfondo della barra degli strumenti:
Aggiungi il valore seguente all'app RRO e imposta la risorsa su luminoso
verde (#0F0):
La libreria car-ui-lib contiene una risorsa denominata
car_ui_toolbar_background. Quando questa risorsa è contenuta
configurazione di un RRO, la barra degli strumenti non cambia perché il valore errato
viene scelto come target.
Nel AndroidManifest.xml per il tuo RRO, aggiorna targetName in modo che punti a
car-ui-lib:
…
android:targetName="car-ui-lib"
…
Devi creare un nuovo pacchetto RRO per ogni pacchetto di destinazione che vuoi impostare come RRO.
Ad esempio, quando crei overlay per due target diversi, devi
creare due apk di overlay.
Crea, verifica, installa e abilita l'RRO come hai fatto prima.
La tua app avrà il seguente aspetto:
Figura 5: nuovo colore di sfondo della barra degli strumenti
Layout e stili RRO
Durata: 15 minuti
In questo esercizio, creerai una nuova app simile a quella creata in precedenza. Questo
consente di sovrapporre il layout. Segui gli stessi passaggi di prima oppure modifica
all'app esistente.
Assicurati di aggiungere le righe seguenti a overlayable.xml:
Crea e installa l'app e l'RRO come hai fatto prima (Play verde
). Assicurati di attivare il tuo RRO.
L'app e l'RRO vengono visualizzati come segue. Il testo RRO Hello World è verde e
centrato come specificato nel RRO del layout.
Figura 6: RRO Hello World
Aggiungi CarUiRecyclerView alla tua app
Durata: 15 minuti
L'interfaccia CarUiRecyclerView fornisce le API per accedere a un RecyclerView
personalizzato tramite le risorse car-ui-lib. Ad esempio, CarUiRecyclerView
controlla un flag in fase di runtime per determinare se la barra di scorrimento deve essere abilitata o meno
e seleziona il layout corrispondente.
Figura 7. CarUiRecyclerViewContainer.
.
Per aggiungere un CarUiRecyclerView, aggiungilo a activity_main.xml e
MainActivity.java file. Puoi creare una nuova app da zero oppure
modificare l'app esistente. Se modifichi l'app esistente, assicurati di rimuoverla
risorse non dichiarate di overlayable.xml.
Potrebbe essere visualizzato il seguente errore, che puoi ignorare:
Cannot resolve class com.android.car.ui.recyclerview.CarUiRecyclerView
Purché lo spelling del corso sia corretto e tu abbia aggiunto car-ui-lib come
una dipendenza, puoi creare e compilare il tuo apk. Per rimuovere l'errore,
Seleziona File > Disattiva le cache, quindi fai clic su Annulla convalida e riavvia.
Aggiungi il seguente codice a MainActivity.java
package com.example.caruicodelab;
import android.app.Activity;
import android.os.Bundle;
import com.android.car.ui.core.CarUi;
import com.android.car.ui.recyclerview.CarUiContentListItem;
import com.android.car.ui.recyclerview.CarUiListItem;
import com.android.car.ui.recyclerview.CarUiListItemAdapter;
import com.android.car.ui.recyclerview.CarUiRecyclerView;
import com.android.car.ui.toolbar.ToolbarController;
import java.util.ArrayList;
/** Activity with a simple car-ui layout. */
public class MainActivity extends Activity {
private final ArrayList<CarUiListItem> mData = new ArrayList<>();
private CarUiListItemAdapter mAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ToolbarController toolbar = CarUi.getToolbar(this);
toolbar.setTitle(getTitle());
toolbar.setLogo(R.mipmap.ic_launcher_round);
CarUiRecyclerView recyclerView = findViewById(R.id.list);
mAdapter = new CarUiListItemAdapter(generateSampleData());
recyclerView.setAdapter(mAdapter);
}
private ArrayList<CarUiListItem> generateSampleData() {
for (int i = 0; i < 20; i++) {
CarUiContentListItem item = new CarUiContentListItem(CarUiContentListItem.Action.ICON);
item.setTitle("Title " + i);
item.setPrimaryIconType(CarUiContentListItem.IconType.CONTENT);
item.setIcon(getDrawable(R.drawable.ic_launcher_foreground));
item.setBody("body " + i);
mData.add(item);
}
return mData;
}
Crea e installa l'app come prima.
Ora vedi un CarUiRecyclerView:
Figura 7 : CarUiRecyclerView
Utilizzare un RRO per rimuovere la barra di scorrimento
Durata: 10 minuti
Questo esercizio mostra come utilizzare un RRO per rimuovere la barra di scorrimento
CarUiRecyclerView.
La risorsa car_ui_scrollbar_enable è una risorsa booleana car-ui-lib,
che controlla se la barra di scorrimento ottimizzata per auto con i pulsanti Su e Giù
in CarUiRecyclerView è presente o meno. Se impostato su false,
CarUiRecyclerView si comporta come un RecyclerView di AndroidX.
Per sovrapporre un file di layout, devi aggiungere tutti gli ID e lo spazio dei nomi
attributi al overlay.xml del tuo RRO. Visualizza i file di seguito.
Ti consigliamo di esaminare come questi file interagiscono.
Per semplicità, le dimensioni e i colori sono impostati come hardcoded. Tuttavia, una
pratica è dichiarare questi valori in dimens.xml e colors.xml o
anche designati come file colore nella cartella res/color/. Per saperne di più,
vedi
Stile del codice Java AOSP per i collaboratori.
Crea e installa l'app come prima. Hai creato CarUiRecyclerView
con una barra di scorrimento blu e guide grigie.
Complimenti! Entrambe le frecce appaiono lungo la parte inferiore della barra di scorrimento:
ha applicato correttamente un RRO a un file di risorse di layout car-ui-lib utilizzando la build Gradle
tramite Android Studio.
Figura 9. CarUiRecyclerView con una barra di scorrimento blu con guide grigie.
Voci elenco RRO
Durata: 15 minuti
A questo punto, hai applicato un RRO ai componenti di car-ui-lib utilizzando il framework
componenti (non AndroidX). Per utilizzare i componenti AndroidX in un RRO, devi aggiungere
le dipendenze di quel componente sia dall'app che dall'RRO build.gradle.
devi anche aggiungere il valore attrs di quel componente a overlayable.xml nell'app, oltre
come sample_overlay.xml nel tuo RRO.
La nostra libreria (car-ui-lib) utilizza ConstraintLayout e altri dispositivi AndroidX
quindi il suo overlayable.xml potrebbe avere il seguente aspetto:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:tag="carUiListItem"
android:minHeight="@dimen/car_ui_list_item_height">
<!-- The following touch interceptor views are sized to encompass the specific sub-sections of
the list item view to easily control the bounds of a background ripple effects. -->
<com.android.car.ui.SecureView
android:id="@+id/car_ui_list_item_touch_interceptor"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/car_ui_list_item_background"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!-- This touch interceptor does not include the action container -->
<com.android.car.ui.SecureView
android:id="@+id/car_ui_list_item_reduced_touch_interceptor"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/car_ui_list_item_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@id/car_ui_list_item_action_container"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="@+id/car_ui_list_item_start_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="@dimen/car_ui_list_item_start_inset" />
<FrameLayout
android:id="@+id/car_ui_list_item_icon_container"
android:layout_width="@dimen/car_ui_list_item_icon_container_width"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="@+id/car_ui_list_item_start_guideline"
app:layout_constraintTop_toTopOf="parent">
<ImageView
android:id="@+id/car_ui_list_item_icon"
android:layout_width="@dimen/car_ui_list_item_icon_size"
android:layout_height="@dimen/car_ui_list_item_icon_size"
android:layout_gravity="center"
android:visibility="gone"
android:scaleType="fitCenter" />
<ImageView
android:id="@+id/car_ui_list_item_content_icon"
android:layout_width="@dimen/car_ui_list_item_content_icon_width"
android:layout_height="@dimen/car_ui_list_item_content_icon_height"
android:layout_gravity="center"
android:visibility="gone"
android:scaleType="fitCenter" />
<ImageView
android:id="@+id/car_ui_list_item_avatar_icon"
android:background="@drawable/car_ui_list_item_avatar_icon_outline"
android:layout_width="@dimen/car_ui_list_item_avatar_icon_width"
android:layout_height="@dimen/car_ui_list_item_avatar_icon_height"
android:layout_gravity="center"
android:visibility="gone"
android:scaleType="fitCenter" />
</FrameLayout>
<CarUiTextView
android:id="@+id/car_ui_list_item_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/car_ui_list_item_text_start_margin"
android:singleLine="@bool/car_ui_list_item_single_line_title"
android:textAppearance="@style/TextAppearance.CarUi.ListItem"
android:layout_gravity="right"
android:gravity="right"
android:textAlignment="viewEnd"
app:layout_constraintBottom_toTopOf="@+id/car_ui_list_item_body"
app:layout_constraintEnd_toStartOf="@+id/car_ui_list_item_action_container"
app:layout_constraintStart_toEndOf="@+id/car_ui_list_item_icon_container"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_chainStyle="packed"
app:layout_goneMarginStart="@dimen/car_ui_list_item_text_no_icon_start_margin" />
<CarUiTextView
android:id="@+id/car_ui_list_item_body"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="@dimen/car_ui_list_item_text_start_margin"
android:textAppearance="@style/TextAppearance.CarUi.ListItem.Body"
android:layout_gravity="right"
android:gravity="right"
android:textAlignment="viewEnd"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="@+id/car_ui_list_item_action_container"
app:layout_constraintStart_toEndOf="@+id/car_ui_list_item_icon_container"
app:layout_constraintTop_toBottomOf="@+id/car_ui_list_item_title"
app:layout_goneMarginStart="@dimen/car_ui_list_item_text_no_icon_start_margin" />
<!-- This touch interceptor is sized and positioned to encompass the action container -->
<com.android.car.ui.SecureView
android:id="@+id/car_ui_list_item_action_container_touch_interceptor"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="@drawable/car_ui_list_item_background"
android:visibility="gone"
app:layout_constraintBottom_toBottomOf="@id/car_ui_list_item_action_container"
app:layout_constraintEnd_toEndOf="@id/car_ui_list_item_action_container"
app:layout_constraintStart_toStartOf="@id/car_ui_list_item_action_container"
app:layout_constraintTop_toTopOf="@id/car_ui_list_item_action_container" />
<FrameLayout
android:id="@+id/car_ui_list_item_action_container"
android:layout_width="wrap_content"
android:minWidth="@dimen/car_ui_list_item_icon_container_width"
android:layout_height="0dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="@+id/car_ui_list_item_end_guideline"
app:layout_constraintTop_toTopOf="parent">
<View
android:id="@+id/car_ui_list_item_action_divider"
android:layout_width="@dimen/car_ui_list_item_action_divider_width"
android:layout_height="@dimen/car_ui_list_item_action_divider_height"
android:layout_gravity="start|center_vertical"
android:background="@drawable/car_ui_list_item_divider" />
<Switch
android:id="@+id/car_ui_list_item_switch_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false" />
<CheckBox
android:id="@+id/car_ui_list_item_checkbox_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false" />
<RadioButton
android:id="@+id/car_ui_list_item_radio_button_widget"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:clickable="false"
android:focusable="false" />
<ImageView
android:id="@+id/car_ui_list_item_supplemental_icon"
android:layout_width="@dimen/car_ui_list_item_supplemental_icon_size"
android:layout_height="@dimen/car_ui_list_item_supplemental_icon_size"
android:layout_gravity="center"
android:scaleType="fitCenter" />
</FrameLayout>
<androidx.constraintlayout.widget.Guideline
android:id="@+id/car_ui_list_item_end_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_end="@dimen/car_ui_list_item_end_inset" />
</androidx.constraintlayout.widget.ConstraintLayout>
car_ui_list_item.xml fa riferimento a diversi riferimenti a diversi componenti/
a risorse non incluse come dipendenze dell'app.
Queste sono car-ui-lib risorse. Puoi risolvere il problema aggiungendo car-ui-lib come
una dipendenza dalla tua app RRO in app/build.gradle:
Titolo e corpo ora sono allineati a destra anziché a sinistra.
Figura 10. Titolo e corpo allineati a destra.
Abbiamo applicato un RRO a car-ui-lib solo utilizzando i componenti AndroidX
(ConstraintLayout) quando i relativi attributi erano presenti in car-ui-lib
denominato overlayable.xml e il RRO sample_overlay.xml. È
fare qualcosa di simile nella tua app. Devi solo aggiungere tutti i token
attrs a overlayable.xml della tua app, simile a car-ui-lib.
Tuttavia, non è possibile eseguire il RRO di un'app utilizzando i componenti AndroidX quando
l'app ha car-ui-lib come dipendenza nel suo build.gradle (quando l'app utilizza
car-ui-lib componenti). Poiché le mappature degli attributi erano già definite in
overlayable.xml della raccolta car-ui-lib, aggiungendoli ai tuoi
il valore overlayable.xml dell'app con car-ui-lib come dipendenza, può causare un
mergeDebugResources errore simile al seguente. Il motivo è che questi attributi
sono presenti in più file overlayable.xml:
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:mergeDebugResources'
I campioni di contenuti e codice in questa pagina sono soggetti alle licenze descritte nella Licenza per i contenuti. Java e OpenJDK sono marchi o marchi registrati di Oracle e/o delle sue società consociate.
Ultimo aggiornamento 2024-11-21 UTC.
[[["Facile da capire","easyToUnderstand","thumb-up"],["Il problema è stato risolto","solvedMyProblem","thumb-up"],["Altra","otherUp","thumb-up"]],[["Mancano le informazioni di cui ho bisogno","missingTheInformationINeed","thumb-down"],["Troppo complicato/troppi passaggi","tooComplicatedTooManySteps","thumb-down"],["Obsoleti","outOfDate","thumb-down"],["Problema di traduzione","translationIssue","thumb-down"],["Problema relativo a esempi/codice","samplesCodeIssue","thumb-down"],["Altra","otherDown","thumb-down"]],["Ultimo aggiornamento 2024-11-21 UTC."],[],[]]
