Codelab: Gradle derleme sistemini kullanarak car-ui-lib bileşenleriyle RRO'lar oluşturma

Bağımsız, araç içi, bilgi-eğlence sistemi başlatmak için car-ui-lib kitaplığını kullanın (IVI) sistemleri. Bu codelab'de, car-ui-lib ve kitaplıktaki bileşenleri özelleştirmek için çalışma zamanı kaynak yer paylaşımlarını (RRO'lar) kullanır.

Öğrenecekleriniz

Nasıl yapılır?

  • Android uygulamanıza car-ui-lib bileşen dahil edin.
  • Android uygulamaları ve RRO'lar oluşturmak için Gradle'ı kullanın.
  • car-ui-lib ile RRO'ları kullanın.

Bu codelab'de, RRO'ların işleyiş şekli açıklanmamaktadır. Görüntüleyin Çalışma zamanında bir uygulamanın kaynaklarının değerini değiştirin ve Çalışma zamanında kaynak yer paylaşımlarıyla ilgili sorunları giderme konulu videomuzu izleyin.

Başlamadan önce

Ön koşullar

Başlamadan önce şunlara sahip olduğunuzdan emin olun:

Yeni Android uygulaması oluştur

Süre: 15 dakika

Bu bölümde yeni bir Android Studio projesi oluşturacaksınız.

  1. Android Studio'da EmptyActivity içeren bir uygulama oluşturun.

    Boş Etkinlik Oluştur
    Şekil 1.Boş Etkinlik Oluşturma

  2. Uygulamaya CarUiCodelab adını verin ve Java dilini seçin. Şunları yapabilirsiniz: isterseniz bir dosya konumu da seçin. Şu öğe için varsayılan değerleri kabul edin: Ayarlar'ı tıklayın.

    Uygulamanıza ad verin
    Şekil 2. Uygulamanıza ad verin
    'nı inceleyin.

  3. activity_main.xml öğesini şu kod bloğuyla değiştirin:

    <?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>

    Bu kod bloğu, tanımlanmayan sample_text dizesini gösterir.

  4. sample_text kaynak dizesini ekleyin ve "Hello World!" olarak ayarlayın strings.xml dosya Bu dosyayı açmak için uygulama > src > ana > çözünürlük > değerler > dizeler.xml olarak güncelleyin.

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CarUiCodelab</string>
    <string name="sample_text">Hello World!</string>
</resources>

  5. Uygulamanızı oluşturmak için sağ üstteki yeşil Oynat düğmesini tıklayın. İşlem devam ediyor apk'yi emülatörünüze veya Android cihazınıza otomatik olarak yükler Gradle.

    Oynat düğmesi

Yeni uygulama, emülatörünüzde veya Android cihazınızda otomatik olarak açılır. Eğer CarUiCodelab uygulamasını, şu anda yüklü olan uygulama başlatıcıdan açın. Bu şöyle görünür:

Yeni CarUiCodelab uygulamasını aç
Şekil 3. Yeni CarUiCodelab uygulamasını açın
'nı inceleyin.

Android uygulamanıza car-ui-lib ekleyin

Süre: 15 dakika

car-ui-lib ürününü uygulamanıza ekleyin:

  1. car-ui-lib bağımlılığını projenizin build.gradle dosyasına eklemek için: uygulama > build.gradle ile değiştirin. Bağımlılıklarınız aşağıdaki gibi görünmelidir:

    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 uygulamanızda car-ui-lib bileşenlerini kullanma

Artık car-ui-lib uygulamasına sahip olduğunuza göre uygulamanıza bir araç çubuğu ekleyebilirsiniz.

  1. MainActivity.java dosyanızda, onCreate yönteminin üzerine yazın:

    @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);
}

  2. ToolbarController dosyasını içe aktardığınızdan emin olun:

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

  3. Theme.CarUi.WithToolbar temasını kullanmak için seçin uygulama > src > ana > AndroidManifest.xml ve ardından güncelleyin AndroidManifest.xml şöyle görünecek:

    <?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>

  4. Uygulamayı oluşturmak için önceki gibi yeşil Oynat düğmesine basın.

    Uygulamayı oluşturma

Uygulamanıza RRO'lar ekleyin

Süre: 30 dakika

RRO'lar hakkında bilginiz varsa bölümü, Uygulamanıza izin denetleyici ekleyin. RRO'larla ilgili temel bilgileri öğrenmek için Çalışma zamanında uygulama kaynaklarının değerini değiştirme.

Uygulamanıza izin denetleyici ekleyin

Bir RRO paketinin hangi kaynakların yer paylaşımlı olarak yer aldığını denetlemek için Uygulamanızın /res klasörüne overlayable.xml. Bu dosya izin görevi görüyor uygulamanız (hedef) ile RRO paketiniz (yer paylaşımı) arasındaki denetleyiciyi destekler.

  1. Uygulamanıza res/values/overlayable.xml ekleyin ve aşağıdaki içeriği kopyalayın dosyanıza ekleyin:

    <?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 dizesinin RRO ile yer paylaşımlı olması gerektiğinden kaynak adı için ekleyebilirsiniz.

    overlayable.xml dosyanız, res/values/ içinde bulunması ZORUNLUDUR. Aksi halde OverlayManagerService bulamadı.

    Yer paylaşımlı kaynaklar hakkında daha fazla bilgi edinmek ve daha fazla bilgi edinmek için Yer paylaşımlı reklamları kaynaklar bölümüne göz atın.

RRO paketi oluşturma

Bu bölümde, yukarıda görüntülenen dizeyi değiştirmek için bir RRO paketi oluşturacaksınız "Hello World!" şarkısından "Hello World RRO" olarak değiştirin.

  1. Yeni bir proje oluşturmak için Dosya > Yeni > Yeni Proje. Şunları yaptığınızdan emin olun: RRO paketleri içerdiğinden Boş Etkinlik yerine Etkinlik Yok'u seçin yalnızca kaynakları kullanın.

    Yapılandırmalarınız aşağıda gösterilenlere benzer şekilde görünür. İlgili içeriği oluşturmak için kullanılan kaydedildikleri konum farklı olabilir:

  2. Yeni CarUiRRO projesini oluşturduktan sonra, projeyi AndroidManifest.xml değiştirilerek DOO.

    <?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>

    Bu işlem @xml/sample_overlay ile ilgili bir hata oluşturur. resourcesMap dosyası, hedef paketteki kaynak adlarını RRO paketiyle eşler.

  3. Aşağıdaki kod bloğunu …/res/xml/sample_overlay.xml hedefine kopyalayın:

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

  4. sample_text öğesini …/res/values/strings.xml öğesine ekleyin:

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">CarUiRRO</string>
    <string name="sample_text">Hello World RRO</string>
</resources>
    .
    RRO&#39;nun Gradle yapısı oluşturuldu

  5. RRO hedefinizi oluşturmak için yeşil Oynat düğmesine basarak Gradle oluşturun. veya Android cihazınızda RRO'nuzun temelini oluşturur.

  6. RRO'nuzun düzgün şekilde yüklendiğini doğrulamak için aşağıdaki komutu çalıştırın:

    shell:~$ adb shell cmd overlay list --user current | grep -i com.example
com.example.caruicodelab
[ ] com.example.caruirro

    Bu komut, RRO paketlerinin durumuyla ilgili faydalı bilgileri gösterir kontrol edebilirsiniz.

    • [ ], RRO'nun yüklendiğini ve etkinleştirilmeye hazır olduğunu belirtir.
    • ---, RRO'nun yüklü olduğunu ancak hata içerdiğini gösterir.
    • [X], RRO'nun yüklendiği ve etkinleştirildiği anlamına gelir.

    RRO'nuzda hatalar varsa Çalışma zamanında kaynak yer paylaşımlarıyla ilgili sorunları giderme inceleyin.

  7. RRO'yu etkinleştirmek ve etkin olduğunu doğrulamak için:

    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

Uygulamanızda "Hello World RRO" dizesi görüntüleniyor.

Merhaba Dünya RRO!
Şekil 4: Merhaba Dünya RRO!

Tebrikler! İlk RRO'nuzu oluşturdunuz.

RRO kullanırken Android Öğe Paketleme Aracı'nı (AAPT2) kullanabilirsiniz. --no-resource-deduping ve --no-resource-removal işaretleri Bağlantı seçenekleri. İşaretleri bu codelab'de eklemeniz gerekmez ancak kullanmanızı öneririz. ortadan kaldırmak için RRO'larınızı kontrol edin. Siz bunları RRO'nuzun build.gradle dosyasına şu şekilde ekleyebilirsiniz:

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

Bu işaretler hakkında daha fazla bilgi için bkz. Paketi derleyin ve AAPT2 olarak değiştirin.

Android uygulamanızda RRO'ları kullanarak car-ui-lib bileşeni değiştirin

Bu sayfada, projenizin kendisi için bir çalışma zamanı kaynak yer paylaşımını (RRO) Android uygulamanızda car-ui-lib kitaplığındaki bileşenleri değiştirme.

Araç çubuğu arka plan rengini ayarlama

Süre: 15 dakika

Araç çubuğunun arka plan rengini değiştirmek için:

  1. RRO uygulamanıza aşağıdaki değeri ekleyin ve kaynağı parlak olarak ayarlayın. yeşil (#0F0):

    <?xml version="1.0" encoding="utf-8"?>
<resources>
    <drawable name="car_ui_toolbar_background">#0F0</drawable>
</resources>

    car-ui-lib kitaplığı, adlı bir kaynak içeriyor car_ui_toolbar_background. Bu kaynak konfigürasyonunu devreye soktuğunda, yanlış değer emin olun.

  2. RRO'nuzun AndroidManifest.xml bölümünde targetName değerini şuna işaret edecek şekilde güncelleyin: car-ui-lib:

    …
android:targetName="car-ui-lib"
…

    RRO oluşturmak istediğiniz her hedef paket için yeni bir RRO paketi oluşturmanız ZORUNLUDUR. Örneğin, iki farklı hedef için yer paylaşımları oluştururken, iki yer paylaşımlı APK oluşturun.

  3. RRO'yu önceki gibi oluşturun, doğrulayın, yükleyin ve etkinleştirin.

Uygulamanız şu şekilde görünür:

Yeni Araç Çubuğu arka plan rengi
Şekil 5: Yeni araç çubuğu arka plan rengi

RRO düzenleri ve stilleri

Süre: 15 dakika

Bu alıştırmada, daha önce oluşturduğunuz uygulamaya benzer yeni bir uygulama geliştireceksiniz. Bu uygulaması, düzenin yer paylaşımlı olarak yer almasına olanak tanır. Önceki adımları aynı şekilde uygulayın veya değiştirin. mevcut uygulamanız.

  1. Aşağıdaki satırları overlayable.xml hedefine eklediğinizden emin olun:

    <?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>

  2. activity_main.xml ifadesinin aşağıdaki gibi göründüğünden emin olun:

    <?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>

  3. RRO uygulamanızda bir res/layout/activity_main.xml oluşturun ve takip etmek için:

    <?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>

  4. Stilimizi DGR'ye eklemek için res/values/styles.xml öğesini güncelleyin:

    <?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>

  5. AndroidManifest.xml içindeki targetName özelliğini, şunun adına işaret edecek şekilde değiştirin: yeni uygulamanız:

    …
android:targetName="CarUiCodelab"
…

  6. Kaynakları RRO'nuzdaki sample_overlay.xml dosyasına ekleyin:

    <?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>

  7. Uygulamayı oluşturup yükleyin ve RRO öncekiyle aynı şekilde yapın (yeşil Play) düğmesi). RRO'nuzu etkinleştirdiğinizden emin olun.

Uygulama ve RRO aşağıdaki gibi oluşturulur. Hello World RRO metni yeşildir ve olarak ortalanır.

Merhaba Dünya RRO
Şekil 6: Merhaba Dünya RRO

Uygulamanıza CarUiRecyclerView'u ekleyin

Süre: 15 dakika

CarUiRecyclerView arayüzü, RecyclerView ürününe erişmek için API'ler sunar. car-ui-lib kaynaklarıyla özelleştirilmiştir. Örneğin, CarUiRecyclerView kaydırma çubuğunun etkinleştirilmesi gerekip gerekmediğini belirlemek için çalışma zamanında bir işareti kontrol eder ve ilgili düzeni seçer.

CarUiRecyclerViewContainer
Şekil 7. CarUiRecyclerViewContainer
'nı inceleyin.

  1. CarUiRecyclerView eklemek için şunu ekleyin: activity_main.xml ve MainActivity.java dosya. Sıfırdan yeni bir uygulama oluşturabilir veya mevcut uygulamada değişiklik yapabilirsiniz. Mevcut uygulamada değişiklik yaparsanız, overlayable.xml tarafından bildirilmeyen kaynaklar.

    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"/>

    Aşağıdaki hata görünebilir, ancak bunu yoksayabilirsiniz:

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

    Sınıfınızın doğru yazıldığı ve car-ui-lib apk'nizi oluşturup derleyebilirsiniz. Hatayı kaldırmak için Dosya > Önbellekleri Geçersiz Kıl, ardından Geçersiz Kıl ve Yeniden Başlat'ı tıklayın.

    Şunları ekleyin: 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;
}

  2. Uygulamanızı önceki gibi derleyip yükleyin.

Artık bir CarUiRecyclerView görürsünüz:

CarUiRecyclerView
Şekil 7 : CarUiRecyclerView

Kaydırma çubuğunu kaldırmak için RRO kullanma

Süre: 10 dakika

Bu alıştırmada, CarUiRecyclerView

  1. RRO'nuza aşağıdaki dosyaları ekleyin ve değiştirin:

    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 kaynağı, car-ui-lib boole kaynağıdır ve arabanın kaydırma çubuğunun Yukarı ve Aşağı düğmeleriyle optimize edilip edilmediğini kontrol eden CarUiRecyclerView sınırları içindedir. false olarak ayarlandığında CarUiRecyclerView, AndroidX RecyclerView gibi çalışır.

    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>

Uygulamanızı önceki gibi derleyip yükleyin. Kaydırma çubuğu CarUiRecyclerView:

Kaydırma çubuğu olmadan CarUiRecyclerView
Şekil 8. Kaydırma çubuğu olmadan CarUiRecyclerView
'nı inceleyin.

CarUiRecyclerView kaydırma çubuğunu yer paylaşımlı olarak eklemek için bir düzen kullanma

Süre: 15 dakika

Bu alıştırmada CarUiRecyclerView kaydırma çubuğu düzenini değiştireceksiniz.

  1. RRO uygulamanıza aşağıdaki dosyaları ekleyin ve değiştirin.

    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>

    Bir düzen dosyası yer paylaşımlı olarak eklemek için tüm kimlikleri ve ad alanını eklemeniz gerekir RRO'nuzun overlay.xml özelliğine ilişkin özelliklerdir. Aşağıdaki dosyalara göz atın.

    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>

    Bu dosyaların etkileşim şeklini incelemeniz önerilir.

    Kolaylık sağlaması açısından boyutlar ve renkler sabit kodlanmıştır. Ancak en iyi bu değerleri dimens.xml ve colors.xml içinde bildirmeniz gerekir. hatta res/color/ klasöründe renk dosyaları olarak atanmış olabilir. Daha fazla bilgi edinmek için bkz. Katkıda bulunanlar için AOSP Java kod stili.

  2. Uygulamanızı önceki gibi derleyip yükleyin. CarUiRecyclerView kurulumunu tamamladınız gri çubuklar bulunuyor.

Tebrikler! Kaydırma çubuğunun alt kısmında her iki ok da görünür. Gradle derlemesi kullanılarak car-ui-lib düzen kaynak dosyasına RRO başarıyla uygulandı sistemi nasıl yönetebileceğinizi öğrendiniz.

Gri raylı mavi bir kaydırma çubuğu olan CarUiRecyclerView
Şekil 9. Gri raylı mavi bir kaydırma çubuğu olan CarUiRecyclerView
'nı inceleyin.

RRO Listesi öğeleri

Süre: 15 dakika

Bu noktaya kadar çerçeveyi kullanarak car-ui-lib bileşene RRO uyguladınız bileşenler (AndroidX değil) AndroidX bileşenlerini RRO'da kullanmak için bu bileşenin hem uygulamaya hem de RRO'ya olan bağımlılıklarını build.gradle. bu bileşenin attrs değerini de uygulamanızda overlayable.xml öğesine eklemelidir RRO'nuzdaki sample_overlay.xml olarak ayarlanır.

Kitaplığımızda (car-ui-lib) ConstraintLayout ile diğer AndroidX'ler kullanılır oluşturur, dolayısıyla overlayable.xml aşağıdaki gibi görünebilir:

<?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>

  1. CarUiRecyclerView içindeki liste öğelerinin düzenini aşağıdakileri kullanarak değiştirin: ConstraintLayout. RRO'nuza aşağıdaki dosyaları ekleyin veya değiştirin:

    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>

  2. car_ui_list_item.xml bazı bileşenlere referans veriyor, Kaynaklar ve diğer kaynakları da kullanabilirsiniz. Bunlar car-ui-lib kaynaktır. car-ui-lib hesabını şu hesap olarak ekleyerek bu sorunu düzeltebilirsiniz: app/build.gradle içinde RRO uygulamanıza bir bağımlılık:

    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'
}

Başlık ve Gövde artık sola hizalı değil, sağa hizalandı.

Sağa hizalı Başlık ve Gövde
Şekil 10. Sağa hizalı Başlık ve Gövde
'nı inceleyin.

AndroidX bileşenlerini kullanarak car-ui-lib için yalnızca RRO uyguladık özellikleri car-ui-lib altında olduğunda (ConstraintLayout) overlayable.xml adlı dosya ve RRO sample_overlay.xml. İnsanların aynı şeyi kendi uygulamanızda da yapabilirsiniz. İlgili tüm alanları eklemeniz Uygulamanızın overlayable.xml kimliğine attrs benzer. car-ui-lib ile benzer.

Ancak, aşağıdaki durumlarda AndroidX bileşenlerini kullanan bir uygulamanın RRO yayınlanması mümkün değildir uygulama, build.gradle öğesinde bağımlılık olarak car-ui-lib içeriyor (uygulama car-ui-lib bileşen). Özellik eşlemeleri car-ui-lib kitaplığının overlayable.xml öğesine giderek uygulamasının car-ui-lib içeren overlayable.xml özelliği, mergeDebugResources hatası. Çünkü bu özellikler birden fazla overlayable.xml dosyasında mevcut:

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