本頁面由 Cloud Translation API 翻譯而成。

Codelab：使用 Gradle 建置系統使用 car-ui-lib 元件建立 RRO

使用car-ui-lib庫啟動一致的車載資訊娛樂 (IVI) 系統。此 Codelab 向您介紹car-ui-lib以及如何使用執行時間資源覆蓋 (RRO) 自訂庫中的元件。

你將學到什麼

如何：

在您的 Android 應用程式中包含car-ui-lib元件。
使用 Gradle 建立 Android 應用程式和 RRO。
將 RRO 與car-ui-lib結合使用。

此 Codelab 沒有詳細說明 RRO 的工作原理。請參閱在運行時更改應用程式資源的值和排除運行時資源覆蓋故障以了解更多資訊。

在你開始之前

先決條件

在開始之前，請確保您擁有：

具有命令列的電腦（Linux 電腦、Mac 或具有適用於 Linux 的 Windows 子系統的 Windows 電腦）。
安卓工作室。
連接到您的電腦的 Android 裝置或模擬器。請參閱下載 Android 原始碼和建立 Android 。
RRO 的基本知識。

創建一個新的 Android 應用程式

持續時間： 15 分鐘

在本部分中，您將建立一個新的 Android Studio 專案。

在 Android Studio 中建立一個帶有EmptyActivity的應用程式。
圖 1.建立一個空活動
將應用程式命名為CarUiCodelab ，然後選擇 Java 語言。如果需要，您也可以選擇檔案位置。接受其餘設定的預設值。
圖 2.為您的應用程式命名

將activity_main.xml替換為以下程式碼區塊：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sample_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

此程式碼區塊顯示字串sample_text ，該字串未定義。

新增sample_text資源字串並將其設定為“Hello World!”在您的strings.xml檔中。若要開啟此文件，請選擇app > src > main > res > values > strings.xml 。
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CarUiCodelab</string>
    <string name="sample_text">Hello World!</string>
</resources>
```
要建立您的應用程序，請點擊右上角的綠色「播放」按鈕。這樣做會透過 Gradle 自動將 apk 安裝到您的模擬器或 Android 裝置上。

新應用程式應在您的模擬器或 Android 裝置上自動開啟。如果沒有，請從現已安裝的應用程式啟動器中開啟CarUiCodelab應用程式。它看起來像這樣：

將 car-ui-lib 添加到您的 Android 應用程序

持續時間： 15 分鐘

將car-ui-lib添加到您的應用程式：

若要將car-ui-lib依賴項新增至專案的build.gradle檔案中，請選擇app > build.gradle 。您的依賴項應該如下所示：

dependencies {
    implementation 'com.android.car.ui:car-ui-lib:2.0.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.4.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
}

在 Android 應用程式中使用 car-ui-lib 元件

現在您已經有了car-ui-lib ，請在您的應用程式中新增一個工具列。

在MainActivity.java檔案中，覆蓋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);
}

請務必匯入ToolbarController ：

import com.android.car.ui.core.CarUi;
import com.android.car.ui.toolbar.ToolbarController;

若要使用Theme.CarUi.WithToolbar主題，請選擇app > src > main > AndroidManifest.xml ，然後更新AndroidManifest.xml ，如下所示：

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.example.caruicodelab">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/Theme.CarUi.WithToolbar"
        tools:targetApi="31">
        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

</manifest>

要建立應用程序，請像以前一樣按綠色的“播放”按鈕。

將 RRO 新增至您的應用程式

片長： 30 分鐘

如果您熟悉 RRO，請轉到下一部分，將權限控制器新增至您的應用程式。否則，若要了解 RRO 的基礎知識，請參閱在執行時間變更應用程式資源的值。

為您的應用程式新增權限控制器

若要控制 RRO 套件覆蓋哪些資源，請將名為overlayable.xml的檔案加入應用程式的/res資料夾。該檔案可充當您的應用程式（目標）和 RRO 套件（覆蓋層）之間的權限控制器。

將res/values/overlayable.xml新增到您的應用程式並將以下內容複製到您的檔案中：
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <overlayable name="CarUiCodelab">
        <policy type="public">
            <item type="string" name="sample_text"/>
        </policy>
    </overlayable>
</resources>
```
由於字串sample_text必須可由RRO 覆蓋，因此請在應用程式的overlayable.xml 中包含資源名稱。
您的overlayable.xml檔案必須位於res/values/中。如果沒有， OverlayManagerService就無法找到它。
要了解有關可覆蓋資源以及如何配置它們的更多信息，請參閱限制可覆蓋資源。

創建 RRO 包

在本部分中，您將建立一個 RRO 套件來更改上面顯示的字串“Hello World!”到“Hello World RRO”。

若要建立新項目，請選擇「檔案」>「新建」>「新項目」 。請務必選擇“無活動”而不是“空活動”，因為 RRO 套件僅包含資源。
您的配置與下圖類似。它們的保存位置可能不同：

建立新的CarUiRRO專案後，透過修改AndroidManifest.xml將該專案宣告為 RRO。

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

    <application android:hasCode="false" />

    <uses-sdk
        android:minSdkVersion="29"
        android:targetSdkVersion="29"/>

    <overlay
        android:targetPackage="com.example.caruicodelab"
        android:targetName="CarUiCodelab"
        android:isStatic="false"
        android:resourcesMap="@xml/sample_overlay"
        />
</manifest>

這樣做會產生@xml/sample_overlay錯誤。 resourcesMap檔案將資源名稱從目標套件對應到 RRO 套件。

將下列程式碼區塊複製到…/res/xml/sample_overlay.xml ：

<?xml version="1.0" encoding="utf-8"?>
<overlay>
    <item target="string/sample_text" value="@string/sample_text"/>
</overlay>

將sample_text加入…/res/values/strings.xml ：
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CarUiRRO</string>
    <string name="sample_text">Hello World RRO</string>
</resources>
```
注意：（可選）如果您建置 RRO，Android Studio 會嘗試啟動預設活動。由於這是 RRO 包，因此沒有任何活動，這會導致錯誤。若要解決該錯誤，請按一下應用程式下拉清單並將配置啟動選項編輯為「無」。
若要建立 RRO 目標，請按綠色「播放」按鈕在模擬器或 Android 裝置上建立 RRO 的 Gradle 版本。
若要驗證您的 RRO 是否已正確安裝，請執行：
```
shell:~$ adb shell cmd overlay list --user current | grep -i com.example
com.example.caruicodelab
[ ] com.example.caruirro
```
此命令顯示有關係統上 RRO 軟體包狀態的有用資訊。
- [ ]表示 RRO 已安裝並準備啟動。
- ---表示 RRO 已安裝但包含錯誤。
- [X]表示RRO已安裝並啟動。
如果您的 RRO 包含錯誤，請先參閱排除執行時間資源覆蓋故障，然後再繼續。

若要啟用 RRO 並驗證是否已啟用：

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

您的應用程式顯示字串「Hello World RRO」。

恭喜！您已經創建了您的第一個 RRO。

使用 RRO 時，您可能需要使用連結選項中所述的 Android 資產打包工具 (AAPT2) 標誌--no-resource-deduping和--no-resource-removal 。無需在此 Codelab 中添加標誌，但我們建議您在 RRO 中使用它們，以避免刪除資源（以及調試麻煩）。您可以將它們新增至 RRO 的build.gradle檔案中，如下所示：

android {
    …
    aaptOptions {
        additionalParameters "--no-resource-deduping", "--no-resource-removal"
    }
}

要了解有關這些標誌的更多信息，請參閱構建包和AAPT2 。

在 Android 應用程式中使用 RRO 修改`car-ui-lib`元件

本頁介紹如何使用運行時資源覆蓋 (RRO) 修改 Android 應用程式中car-ui-lib庫中的元件。

設定工具列背景顏色

持續時間： 15 分鐘

若要變更工具列的背景顏色：

將以下值新增至您的 RRO 應用程序，並將資源設為亮綠色 ( #0F0 )：
```
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <drawable name="car_ui_toolbar_background">#0F0</drawable>
</resources>
```
car-ui-lib函式庫包含名為car_ui_toolbar_background的資源。當此資源包含在 RRO 的配置中時，工具列不會更改，因為目標值錯誤。
在 RRO 的AndroidManifest.xml中，更新targetName以指向car-ui-lib ：
```
…
android:targetName="car-ui-lib"
…
```
您必須為您想要 RRO 的每個目標包建立一個新的 RRO 包。例如，為兩個不同的目標建立覆蓋時，您必須建立兩個覆蓋 apk。
按照與以前相同的方式建置、驗證、安裝和啟用 RRO。

您的應用程式如下所示：

RRO 版面和樣式

持續時間： 15 分鐘

在本練習中，您將建立一個與先前建置的應用程式類似的新應用程式。這個應用程式允許覆蓋佈局。按照與之前相同的步驟操作，或修改現有應用程式。

確保將以下行新增至overlayable.xml ：

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <overlayable name="CarUiCodelab">
    <policy type="public">
      <item type="string" name="sample_text"/>
      <item type="layout" name="activity_main"/>
      <item type="id" name="textView"/>
    </policy>
  </overlayable>
</resources>

確保activity_main.xml如下所示：

<?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"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/sample_text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

在您的 RRO 應用程式中，建立res/layout/activity_main.xml並新增以下內容：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
  <TextView
      android:id="@+id/textView"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:text="@string/sample_text"
      android:textAppearance="@style/TextAppearance.CarUi"
      android:layout_gravity="center_vertical|center_horizontal"/>
</FrameLayout>

更新res/values/styles.xml以將我們的樣式加入 RRO：

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="TextAppearance.CarUi" parent="android:TextAppearance.DeviceDefault">
        <item name="android:textColor">#0f0</item>
        <item name="android:textSize">100sp</item>
    </style>
</resources>

更改AndroidManifest.xml中的targetName以指向新應用程式的名稱：
```
…
android:targetName="CarUiCodelab"
…
```

將資源加入 RRO 中的sample_overlay.xml檔案中：

<?xml version="1.0" encoding="utf-8"?>
<overlay>
    <item target="string/sample_text" value="@string/sample_text"/>
    <item target="id/textView" value="@id/textView"/>
    <item target="layout/activity_main" value="@layout/activity_main"/>
</overlay>

按照與以前相同的方式建置並安裝應用程式和 RRO（綠色「播放」按鈕）。請務必啟用您的 RRO。

應用程式和 RRO 呈現如下。 Hello World RRO 文字為綠色，並按照佈局 RRO 中指定的方式居中。

將 CarUiRecyclerView 添加到您的應用程式

持續時間： 15 分鐘

CarUiRecyclerView介面提供 API 來存取透過car-ui-lib資源自訂的RecyclerView 。例如， CarUiRecyclerView在執行時檢查標誌以確定是否應啟用捲軸並選擇相應的佈局。

若要新增CarUiRecyclerView ，請將其新增至activity_main.xml和MainActivity.java檔案。您可以從頭開始建立新應用程式或修改現有應用程式。如果您修改現有應用程序，請務必從overlayable.xml中刪除未聲明的資源。

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<com.android.car.ui.recyclerview.CarUiRecyclerView
    android:id="@+id/list"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

可能會出現以下錯誤，您可以忽略該錯誤：

Cannot resolve class com.android.car.ui.recyclerview.CarUiRecyclerView

只要你的類別拼寫正確並且你添加了car-ui-lib作為依賴項，你就可以建立和編譯你的 apk。若要消除該錯誤，請選擇“檔案”>“使快取無效” ，然後按一下“無效並重新啟動”。

將以下內容加入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;
}

像以前一樣建立並安裝您的應用程式。

您現在看到一個CarUiRecyclerView ：

使用 RRO 刪除捲軸

持續時間： 10 分鐘

本練習向您展示如何使用 RRO 從CarUiRecyclerView中刪除捲軸。

在您的 RRO 中，新增並修改以下文件：

AndroidManifest.xml

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

    <application android:hasCode="false" />

    <uses-sdk
        android:minSdkVersion="29"
        android:targetSdkVersion="29"/>

    <overlay
        android:targetPackage="com.example.caruicodelab"
        android:targetName="car-ui-lib"
        android:isStatic="false"
        android:resourcesMap="@xml/sample_overlay"
        />
</manifest>

res/values/bools.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <bool name="car_ui_scrollbar_enable">false</bool>
</resources>

資源car_ui_scrollbar_enable是一個car-ui-lib布林資源，它控制CarUiRecyclerView中帶有向上和向下按鈕的汽車最佳化捲軸是否存在。當設定為false時， CarUiRecyclerView行為類似於 AndroidX RecyclerView 。

res/xml/sample_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<overlay>
    <item target="bool/car_ui_scrollbar_enable" value="@bool/car_ui_scrollbar_enable"/>
</overlay>

像以前一樣建立並安裝您的應用程式。捲軸現已從CarUiRecyclerView中刪除：

使用佈局覆蓋 CarUiRecyclerView 捲軸

持續時間： 15 分鐘

在本練習中，您將修改CarUiRecyclerView捲軸佈局。

在您的 RRO 應用程式中新增並修改以下檔案。

res/layout/car_ui_recycler_view_scrollbar.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="112dp"
    android:layout_height="match_parent"
    android:id="@+id/car_ui_scroll_bar">
    <!-- View height is dynamically calculated during layout. -->
    <View
        android:id="@+id/car_ui_scrollbar_thumb"
        android:layout_width="6dp"
        android:layout_height="20dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/car_ui_recyclerview_scrollbar_thumb"/>
    <View
        android:id="@+id/car_ui_scrollbar_track"
        android:layout_width="10dp"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/car_ui_scrollbar_page_up"/>
    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:background="#323232"
        android:layout_toLeftOf="@+id/car_ui_scrollbar_thumb"
        android:layout_above="@+id/car_ui_scrollbar_page_up"
        android:layout_marginRight="5dp"/>
    <View
        android:layout_width="2dp"
        android:layout_height="match_parent"
        android:layout_marginTop="10dp"
        android:background="#323232"
        android:layout_toRightOf="@+id/car_ui_scrollbar_thumb"
        android:layout_above="@+id/car_ui_scrollbar_page_up"
        android:layout_marginLeft="5dp"/>
    <ImageView
        android:id="@+id/car_ui_scrollbar_page_up"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:focusable="false"
        android:hapticFeedbackEnabled="false"
        android:src="@drawable/car_ui_recyclerview_ic_up"
        android:scaleType="centerInside"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:layout_centerHorizontal="true"
        android:layout_above="@+id/car_ui_scrollbar_page_down"/>
    <ImageView
        android:id="@+id/car_ui_scrollbar_page_down"
        android:layout_width="75dp"
        android:layout_height="75dp"
        android:focusable="false"
        android:hapticFeedbackEnabled="false"
        android:src="@drawable/car_ui_recyclerview_ic_down"
        android:scaleType="centerInside"
        android:background="?android:attr/selectableItemBackgroundBorderless"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"/>
</RelativeLayout>

若要覆寫佈局文件，您必須將所有ID 和命名空間屬性新增至 RRO 的overlay.xml 。請參閱下面的文件。

res/xml/sample_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<overlay>
   <item target="drawable/car_ui_recyclerview_ic_down" value="@drawable/car_ui_recyclerview_ic_down"/>
   <item target="drawable/car_ui_recyclerview_ic_up" value="@drawable/car_ui_recyclerview_ic_up"/>
   <item target="drawable/car_ui_recyclerview_scrollbar_thumb" value="@drawable/car_ui_recyclerview_scrollbar_thumb"/>
   <item target="id/car_ui_scroll_bar" value="@id/car_ui_scroll_bar"/>
   <item target="id/car_ui_scrollbar_thumb" value="@id/car_ui_scrollbar_thumb"/>
   <item target="id/car_ui_scrollbar_track" value="@id/car_ui_scrollbar_track"/>
   <item target="id/car_ui_scrollbar_page_up" value="@id/car_ui_scrollbar_page_up"/>
   <item target="id/car_ui_scrollbar_page_down" value="@id/car_ui_scrollbar_page_down"/>
   <item target="layout/car_ui_recyclerview_scrollbar" value="@layout/car_ui_recyclerview_scrollbar"/>
</overlay>

res/drawable/car_ui_recyclerview_ic_up.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48.0"
    android:viewportHeight="48.0">
    <path
        android:pathData="M14.83,30.83L24,21.66l9.17,9.17L36,28 24,16 12,28z"
        android:fillColor="#0000FF"/>
</vector>

res/drawable/car_ui_recyclerview_ic_down.xml

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="48dp"
    android:height="48dp"
    android:viewportWidth="48.0"
    android:viewportHeight="48.0">
    <path
        android:pathData="M14.83,16.42L24,25.59l9.17,-9.17L36,19.25l-12,12 -12,-12z"
        android:fillColor="#0000FF"/>
</vector>

res/drawable/car_ui_recyclerview_scrollbar_thumb.xml

<?xml version="1.0" encoding="utf-8"?>
<shape
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid android:color="#0000FF" />
    <corners android:radius="100dp"/>
</shape>

建議檢查這些文件如何互動。

為簡單起見，尺寸和顏色是硬編碼的。然而，最佳實踐是在dimens.xml和colors.xml中聲明這些值，甚至在res/color/資料夾中指定為顏色檔案。要了解更多信息，請參閱貢獻者的 AOSP Java 程式碼風格。

像以前一樣建立並安裝您的應用程式。您已經建立了帶有藍色捲軸和灰色導軌的CarUiRecyclerView 。

恭喜！兩個箭頭都出現在捲軸的底部，您已透過 Android Studio 使用 Gradle 建置系統成功將 RRO 套用至car-ui-lib佈局資源檔案。

CarUiRecyclerView 搭配藍色捲軸和灰色導軌 — **圖 9.** CarUiRecyclerView 帶有灰色導軌的藍色捲軸

RRO 清單項目

持續時間： 15 分鐘

至此，您已使用框架組件（不是 AndroidX）將 RRO 應用於car-ui-lib組件。要在 RRO 中使用 AndroidX 元件，您必須將該元件的依賴項新增至應用程式和 RRO build.gradle.您還必須將該元件的attrs新增至應用程式中的overlayable.xml以及RRO 中的sample_overlay.xml 。

我們的函式庫（ car-ui-lib ）使用ConstraintLayout以及其他 AndroidX 元件，因此它的overlayable.xml可能如下所示：

<?xml version='1.0' encoding='UTF-8'?>
<resources>
    <overlayable name="car-ui-lib">
        …
        <item type="attr" name="layout_constraintBottom_toBottomOf"/>
        <item type="attr" name="layout_constraintBottom_toTopOf"/>
        <item type="attr" name="layout_constraintCircle"/>
        <item type="attr" name="layout_constraintCircleAngle"/>
        <item type="attr" name="layout_constraintCircleRadius"/>
        <item type="attr" name="layout_constraintDimensionRatio"/>
        <item type="attr" name="layout_constraintEnd_toEndOf"/>
        <item type="attr" name="layout_constraintEnd_toStartOf"/>
        <item type="attr" name="layout_constraintGuide_begin"/>
        <item type="attr" name="layout_constraintGuide_end"/>
        <item type="attr" name="layout_constraintGuide_percent"/>
        <item type="attr" name="layout_constraintHeight_default"/>
        <item type="attr" name="layout_constraintHeight_max"/>
        <item type="attr" name="layout_constraintHeight_min"/>
        <item type="attr" name="layout_constraintHeight_percent"/>
        <item type="attr" name="layout_constraintHorizontal_bias"/>
        <item type="attr" name="layout_constraintHorizontal_chainStyle"/>
        <item type="attr" name="layout_constraintHorizontal_weight"/>
        <item type="attr" name="layout_constraintLeft_creator"/>
        <item type="attr" name="layout_constraintLeft_toLeftOf"/>
        <item type="attr" name="layout_constraintLeft_toRightOf"/>
        <item type="attr" name="layout_constraintRight_creator"/>
        <item type="attr" name="layout_constraintRight_toLeftOf"/>
        <item type="attr" name="layout_constraintRight_toRightOf"/>
        <item type="attr" name="layout_constraintStart_toEndOf"/>
        <item type="attr" name="layout_constraintStart_toStartOf"/>
        <item type="attr" name="layout_constraintTag"/>
        <item type="attr" name="layout_constraintTop_creator"/>
        <item type="attr" name="layout_constraintTop_toBottomOf"/>
        <item type="attr" name="layout_constraintTop_toTopOf"/>
        <item type="attr" name="layout_constraintVertical_bias"/>
        <item type="attr" name="layout_constraintVertical_chainStyle"/>
        …
    </overlayable>
</resources>

使用ConstraintLayout變更CarUiRecyclerView中列表項目的佈局。在 RRO 中新增或修改以下文件：

res/xml/sample_overlay.xml

<?xml version="1.0" encoding="utf-8"?>
<overlay>
   <item target="id/car_ui_list_item_touch_interceptor" value="@id/car_ui_list_item_touch_interceptor"/>
   <item target="id/car_ui_list_item_reduced_touch_interceptor" value="@id/car_ui_list_item_reduced_touch_interceptor"/>
   <item target="id/car_ui_list_item_start_guideline" value="@id/car_ui_list_item_start_guideline"/>
   <item target="id/car_ui_list_item_icon_container" value="@id/car_ui_list_item_icon_container"/>
   <item target="id/car_ui_list_item_icon" value="@id/car_ui_list_item_icon"/>
   <item target="id/car_ui_list_item_content_icon" value="@id/car_ui_list_item_content_icon"/>
   <item target="id/car_ui_list_item_avatar_icon" value="@id/car_ui_list_item_avatar_icon"/>
   <item target="id/car_ui_list_item_title" value="@id/car_ui_list_item_title"/>
   <item target="id/car_ui_list_item_body" value="@id/car_ui_list_item_body"/>
   <item target="id/car_ui_list_item_action_container_touch_interceptor" value="@id/car_ui_list_item_action_container_touch_interceptor"/>
   <item target="id/car_ui_list_item_action_container" value="@id/car_ui_list_item_action_container"/>
   <item target="id/car_ui_list_item_action_divider" value="@id/car_ui_list_item_action_divider"/>
   <item target="id/car_ui_list_item_switch_widget" value="@id/car_ui_list_item_switch_widget"/>
   <item target="id/car_ui_list_item_checkbox_widget" value="@id/car_ui_list_item_checkbox_widget"/>
   <item target="id/car_ui_list_item_radio_button_widget" value="@id/car_ui_list_item_radio_button_widget"/>
   <item target="id/car_ui_list_item_supplemental_icon" value="@id/car_ui_list_item_supplemental_icon"/>
   <item target="id/car_ui_list_item_end_guideline" value="@id/car_ui_list_item_end_guideline"/>
   <item target="attr/layout_constraintBottom_toBottomOf" value="@attr/layout_constraintBottom_toBottomOf"/>
   <item target="attr/layout_constraintBottom_toTopOf" value="@attr/layout_constraintBottom_toTopOf"/>
   <item target="attr/layout_constraintEnd_toEndOf" value="@attr/layout_constraintEnd_toEndOf"/>
   <item target="attr/layout_constraintEnd_toStartOf" value="@attr/layout_constraintEnd_toStartOf"/>
   <item target="attr/layout_constraintGuide_begin" value="@attr/layout_constraintGuide_begin"/>
   <item target="attr/layout_constraintGuide_end" value="@attr/layout_constraintGuide_end"/>
   <item target="attr/layout_constraintHorizontal_bias" value="@attr/layout_constraintHorizontal_bias"/>
   <item target="attr/layout_constraintLeft_toLeftOf" value="@attr/layout_constraintLeft_toLeftOf"/>
   <item target="attr/layout_constraintLeft_toRightOf" value="@attr/layout_constraintLeft_toRightOf"/>
   <item target="attr/layout_constraintRight_toLeftOf" value="@attr/layout_constraintRight_toLeftOf"/>
   <item target="attr/layout_constraintRight_toRightOf" value="@attr/layout_constraintRight_toRightOf"/>
   <item target="attr/layout_constraintStart_toEndOf" value="@attr/layout_constraintStart_toEndOf"/>
   <item target="attr/layout_constraintStart_toStartOf" value="@attr/layout_constraintStart_toStartOf"/>
   <item target="attr/layout_constraintTop_toBottomOf" value="@attr/layout_constraintTop_toBottomOf"/>
   <item target="attr/layout_constraintTop_toTopOf" value="@attr/layout_constraintTop_toTopOf"/>
   <item target="attr/layout_goneMarginBottom" value="@attr/layout_goneMarginBottom"/>
   <item target="attr/layout_goneMarginEnd" value="@attr/layout_goneMarginEnd"/>
   <item target="attr/layout_goneMarginLeft" value="@attr/layout_goneMarginLeft"/>
   <item target="attr/layout_goneMarginRight" value="@attr/layout_goneMarginRight"/>
   <item target="attr/layout_goneMarginStart" value="@attr/layout_goneMarginStart"/>
   <item target="attr/layout_goneMarginTop" value="@attr/layout_goneMarginTop"/>
   <item target="attr/layout_constraintVertical_chainStyle" value="@attr/layout_constraintVertical_chainStyle"/>
   <item target="layout/car_ui_list_item" value="@layout/car_ui_list_item"/>
</overlay>

res/layout/car_ui_list_item.xml

<?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引用了多個未包含為應用程式依賴項的元件/資源。這些是car-ui-lib資源。您可以透過將car-ui-lib新增為app/build.gradle中 RRO 應用程式的依賴項來解決此問題：
```
dependencies {
    implementation 'com.android.car.ui:car-ui-lib:2.0.0'
    implementation 'androidx.appcompat:appcompat:1.4.1'
    implementation 'com.google.android.material:material:1.4.0'
}
```
注意：將car-ui-lib加入為套件的依賴項會將所有car-ui-lib資源加到 RRO，這會增加 apk 的大小。

標題和文字現在是右對齊而不是左對齊。

只有當 RRO 的屬性存在於名為overlayable.xml的car-ui-lib檔案以及 RRO sample_overlay.xml中時，我們才使用 AndroidX 元件 ( ConstraintLayout ) 將 RRO 套用到car-ui-lib 。可以在您自己的應用程式中執行類似的操作。只需將所有對應的attrs添加到應用程式的overlayable.xml中，類似於car-ui-lib 。

但是，當應用程式在其build.gradle中將car-ui-lib作為依賴項時（當應用程式使用car-ui-lib元件時），則無法使用 AndroidX 元件 RRO 應用程式。由於屬性映射已在car-ui-lib庫的overlayable.xml中定義，因此將它們添加到應用程式的overlayable.xml並使用car-ui-lib作為依賴項將導致如下所示的mergeDebugResources錯誤。這是因為這些屬性存在於多個overlayable.xml檔案中：

org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:mergeDebugResources'

Codelab：使用 Gradle 建置系統使用 car-ui-lib 元件建立 RRO

你將學到什麼

在你開始之前

先決條件

創建一個新的 Android 應用程式

將 car-ui-lib 添加到您的 Android 應用程序

在 Android 應用程式中使用 car-ui-lib 元件

將 RRO 新增至您的應用程式

為您的應用程式新增權限控制器

創建 RRO 包

在 Android 應用程式中使用 RRO 修改car-ui-lib元件

設定工具列背景顏色

RRO 版面和樣式

將 CarUiRecyclerView 添加到您的應用程式

使用 RRO 刪除捲軸

使用佈局覆蓋 CarUiRecyclerView 捲軸

RRO 清單項目

在 Android 應用程式中使用 RRO 修改`car-ui-lib`元件