Codelab: RROs mit „car-ui-lib“-Komponenten mithilfe des Gradle-Build-Systems erstellen
Mit Sammlungen den Überblick behalten
Sie können Inhalte basierend auf Ihren Einstellungen speichern und kategorisieren.
Verwende die car-ui-lib-Bibliothek, um ein eigenständiges Infotainmentsystem für Fahrzeuge zu starten
(IVI-Systemen). In diesem Codelab lernen Sie car-ui-lib kennen und erfahren,
Verwenden Sie Runtime Resource Overlays (RROs), um Komponenten in der Bibliothek anzupassen.
Nennen Sie die App CarUiCodelab und wählen Sie dann die Sprache Java aus. Sie können
wählen Sie bei Bedarf auch einen Dateispeicherort aus. Übernehmen Sie die Standardwerte für die
verbleibenden Einstellungen.
Dieser Codeblock zeigt den String sample_text an, der nicht definiert ist.
Fügen Sie den Ressourcenstring sample_text hinzu und legen Sie ihn auf „Hello World!“ fest. in deinem
strings.xml-Datei. Um diese Datei zu öffnen, wählen Sie App > src > Haupt > res >
Werte > Strings.xml.
Klicken Sie rechts oben auf die grüne Wiedergabeschaltfläche, um Ihre App zu erstellen. Vorgehensweise
installiert die APK-Datei automatisch über folgenden Befehl auf Ihrem Emulator oder Android-Gerät:
Gradle.
Die neue App sollte sich automatisch auf deinem Emulator oder Android-Gerät öffnen. Wenn
nicht, öffnen Sie die App „CarUiCodelab“ im App Launcher, der jetzt installiert ist.
Sie sieht so aus:
<ph type="x-smartling-placeholder"></ph>
Abbildung 3: Neue CarUiCodelab App öffnen
Fügen Sie Ihrer Android-App car-ui-lib hinzu
Dauer: 15 Minuten
Fügen Sie Ihrer App car-ui-lib hinzu:
So fügen Sie die Abhängigkeit car-ui-lib zur Datei build.gradle Ihres Projekts hinzu:
Wählen Sie App > build.gradle-Datei Ihre Abhängigkeiten sollten so aussehen:
Komponenten "car-ui-lib" in der Android-App verwenden
Nachdem Sie car-ui-lib installiert haben, fügen Sie Ihrer App eine Symbolleiste hinzu.
Überschreiben Sie in der Datei MainActivity.java die Methode 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);
}
Wenn Sie das Design „Theme.CarUi.WithToolbar“ verwenden möchten, wählen Sie
App > src > main > AndroidManifest.xml und aktualisieren Sie dann
AndroidManifest.xml so, dass Folgendes angezeigt wird:
Um zu steuern, welche Ressourcen ein RRO-Paket überlagert, fügen Sie eine Datei namens
overlayable.xml in den /res-Ordner deiner App. Diese Datei dient als Berechtigung
Controller zwischen Ihrer App (Ziel) und Ihrem RRO-Paket (Overlay).
Füge deiner App res/values/overlayable.xml hinzu und kopiere den folgenden Inhalt
in Ihre Datei ein:
Da der String sample_text für ein RRO überblendbar sein muss, schließen Sie den Parameter
Ressourcenname in der Dateioverlayable.xml der App angegeben.
Die overlayable.xml-Datei MÜSSEN sich in res/values/ befinden. Ist dies nicht der Fall,
OverlayManagerService kann es nicht finden.
In diesem Abschnitt erstellen Sie ein RRO-Paket, um die oben angezeigte Zeichenfolge zu ändern.
aus "Hello World!" zu „Hello World RRO“.
Um ein neues Projekt zu erstellen, wählen Sie File > Neu > Neues Projekt. Achten Sie darauf,
wählen Sie No Activity anstelle von „Empty Activity“ aus, da RRO-Pakete
Ressourcen.
Ihre Konfigurationen ähneln den unten dargestellten. Die
Der Speicherort, an dem sie gespeichert sind, kann sich unterscheiden:
Nachdem Sie das neue Projekt CarUiRRO erstellt haben, deklarieren Sie es als
RRO durch Ändern von AndroidManifest.xml.
So aktivieren Sie die RRO und prüfen, ob sie aktiviert ist:
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
In der Anwendung wird der String „Hello World RRO“ angezeigt.
<ph type="x-smartling-placeholder"></ph>
Abbildung 4: Hello World RRO!
Glückwunsch! Sie haben Ihre erste RRO erstellt.
Bei Verwendung von RROs sollten Sie das Android Asset Packaging Tool (AAPT2) verwenden.
Flags --no-resource-deduping und --no-resource-removal beschrieben in
Linkoptionen:
Es ist nicht notwendig, die Flags in diesem Codelab hinzuzufügen, wir empfehlen aber, sie zu verwenden
um das Entfernen von Ressourcen (und das Beheben von Kopfschmerzen) zu vermeiden. Ich
können Sie sie der Datei build.gradle Ihrer RRO so hinzufügen:
car-ui-lib-Komponenten mithilfe von RROs in Ihrer Android-App ändern
Auf dieser Seite wird beschrieben, wie Sie mit einem
Laufzeitressourcen-Overlay (RRO)
Komponenten aus der car-ui-lib-Bibliothek in deiner Android-App ändern.
Hintergrundfarbe der Symbolleiste festlegen
Dauer: 15 Minuten
So ändern Sie die Hintergrundfarbe der Symbolleiste:
Fügen Sie der RRO-App den folgenden Wert hinzu und legen Sie die Ressource auf „Hell“ fest
Grün (#0F0):
Die Bibliothek car-ui-lib enthält eine Ressource namens
car_ui_toolbar_background. Wenn diese Ressource im
konfiguriert, ändert sich die Symbolleiste nicht, da der falsche Wert
ausgerichtet ist.
Aktualisieren Sie in der AndroidManifest.xml für Ihre RRO targetName, sodass sie auf
car-ui-lib:
…
android:targetName="car-ui-lib"
…
Sie MÜSSEN für jedes Zielpaket, für das Sie die RRO-Funktion nutzen möchten, ein neues RRO-Paket erstellen.
Wenn Sie zum Beispiel Overlays für zwei verschiedene Ziele erstellen, müssen Sie
Erstellen Sie zwei Overlay-APKs.
Erstellen, verifizieren, installieren und aktivieren Sie die RRO wie zuvor.
Ihre App sieht so aus:
<ph type="x-smartling-placeholder"></ph>
Abbildung 5: Neue Hintergrundfarbe der Symbolleiste
RRO-Layouts und -Stile
Dauer: 15 Minuten
In dieser Übung erstellen Sie eine neue App, die der zuvor erstellten ähnelt. Dieses
App überlagert das Layout. Führen Sie dieselben Schritte wie zuvor aus oder ändern Sie
Ihrer bestehenden App.
Fügen Sie overlayable.xml die folgenden Zeilen hinzu:
Die Schnittstelle CarUiRecyclerView bietet APIs für den Zugriff auf eine RecyclerView
der mithilfe von car-ui-lib-Ressourcen angepasst wurde. Beispiel: CarUiRecyclerView
Prüft zur Laufzeit ein Flag, um festzustellen, ob die Bildlaufleiste aktiviert werden soll
und wählt das entsprechende Layout aus.
Um ein CarUiRecyclerView hinzuzufügen, füge es activity_main.xml hinzu und
MainActivity.java Dateien. Sie können entweder eine App von Grund auf neu erstellen oder
die vorhandene Anwendung ändern. Wenn Sie die vorhandene App ändern, entfernen Sie
nicht deklarierte Ressourcen von overlayable.xml.
Möglicherweise wird der folgende Fehler angezeigt, den Sie ignorieren können:
Cannot resolve class com.android.car.ui.recyclerview.CarUiRecyclerView
Solange Ihr Kurs richtig geschrieben ist und Sie „car-ui-lib“ als
Abhängigkeit, können Sie Ihre APK-Datei erstellen und kompilieren. Um den Fehler zu beheben,
wählen Sie Datei > Caches entwerten und dann auf Entwerten und neu starten klicken
Folgendes zu „MainActivity.java“ hinzufügen
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;
}
Erstellen und installieren Sie Ihre App wie zuvor.
Die Ressource car_ui_scrollbar_enable ist eine boolesche Ressource vom Typ car-ui-lib.
Damit wird gesteuert, ob die für das Auto optimierte Bildlaufleiste mit Auf- und Ab-Tasten
in CarUiRecyclerView vorhanden ist oder nicht. Wenn false festgelegt ist, gilt Folgendes:
CarUiRecyclerView verhält sich wie ein AndroidX-RecyclerView.
Es empfiehlt sich, zu untersuchen, wie diese Dateien interagieren.
Der Einfachheit halber sind Abmessungen und Farben hartcodiert. Eine
in der Praxis ist, diese Werte in dimens.xml und colors.xml zu deklarieren oder
sogar als Farbdateien im Ordner res/color/ gekennzeichnet. Weitere Informationen
Siehe
AOSP-Java-Codestil für Beitragende.
Erstellen und installieren Sie Ihre App wie zuvor. Sie haben CarUiRecyclerView erstellt
mit einer blauen Bildlaufleiste und grauen Schienen.
Glückwunsch! Beide Pfeile erscheinen unten auf der Bildlaufleiste.
RRO wurde mithilfe des Gradle-Builds erfolgreich auf eine car-ui-lib-Layoutressourcendatei angewendet.
über Android Studio.
<ph type="x-smartling-placeholder"></ph>
Abbildung 9: CarUiRecyclerView mit blauer Bildlaufleiste und grauen Schienen
Listenelemente zur RRO
Dauer: 15 Minuten
Bisher haben Sie mit dem Framework eine RRO auf car-ui-lib-Komponenten angewendet.
-Komponenten (nicht AndroidX). Zur Verwendung von AndroidX-Komponenten in einer RRO müssen Sie
die Abhängigkeiten dieser Komponente sowohl auf die App als auch auf die RRO-Funktion. build.gradle. Sie
musst du die attrs dieser Komponente auch zu „overlayable.xml“ in deiner App hinzufügen
als sample_overlay.xml in Ihrer RRO.
Unsere Bibliothek (car-ui-lib) verwendet ConstraintLayout sowie andere AndroidX-Geräte
Komponenten. Daher könnte sein overlayable.xml so aussehen:
<?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 verweist auf mehrere Referenzen auf mehrere Components/.
Ressourcen, die nicht als Abhängigkeiten der Anwendung enthalten sind.
Dies sind car-ui-lib-Ressourcen. Sie können das Problem beheben, indem Sie car-ui-lib als
eine Abhängigkeit von Ihrer RRO-Anwendung in app/build.gradle:
Der Titel und der Textkörper sind jetzt rechtsbündig statt links ausgerichtet.
<ph type="x-smartling-placeholder"></ph>
Abbildung 10. Titel und Textkörper rechts ausgerichtet
Wir haben eine RRO nur mithilfe von AndroidX-Komponenten auf car-ui-lib angewendet.
(ConstraintLayout), wenn seine Attribute in car-ui-lib vorhanden waren
Datei mit dem Namen overlayable.xml sowie die RRO sample_overlay.xml. Es ist
in Ihrer eigenen App etwas Ähnliches tun zu können. Fügen Sie einfach alle entsprechenden
attrs zum overlayable.xml deiner App, ähnlich wie car-ui-lib.
Es ist jedoch nicht möglich, mit AndroidX-Komponenten die RRO-Funktion für eine App zu nutzen, wenn
für die App ist car-ui-lib als Abhängigkeit in build.gradle festgelegt (wenn die App
car-ui-lib-Komponenten). Da die Attributzuordnungen bereits in
overlayable.xml der car-ui-lib-Mediathek wird hinzugefügt und deinen
overlayable.xml der App mit car-ui-lib als Abhängigkeit führt zu einer
mergeDebugResources Fehler wie der unten abgebildete. Das liegt daran, dass diese Attribute
sind in mehreren overlayable.xml-Dateien vorhanden:
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:mergeDebugResources'
Alle Inhalte und Codebeispiele auf dieser Seite unterliegen den Lizenzen wie im Abschnitt Inhaltslizenz beschrieben. Java und OpenJDK sind Marken oder eingetragene Marken von Oracle und/oder seinen Tochtergesellschaften.
Zuletzt aktualisiert: 2024-11-21 (UTC).
[[["Leicht verständlich","easyToUnderstand","thumb-up"],["Mein Problem wurde gelöst","solvedMyProblem","thumb-up"],["Sonstiges","otherUp","thumb-up"]],[["Benötigte Informationen nicht gefunden","missingTheInformationINeed","thumb-down"],["Zu umständlich/zu viele Schritte","tooComplicatedTooManySteps","thumb-down"],["Nicht mehr aktuell","outOfDate","thumb-down"],["Problem mit der Übersetzung","translationIssue","thumb-down"],["Problem mit Beispielen/Code","samplesCodeIssue","thumb-down"],["Sonstiges","otherDown","thumb-down"]],["Zuletzt aktualisiert: 2024-11-21 (UTC)."],[],[]]
