स्व-सुसंगत, इन-व्हीकल, इन्फोटेनमेंट (आईवीआई) सिस्टम लॉन्च करने के लिए car-ui-lib लाइब्रेरी का उपयोग करें। यह कोडलैब आपको car-ui-lib से परिचित कराता है और आप लाइब्रेरी में घटकों को अनुकूलित करने के लिए रनटाइम रिसोर्स ओवरले (आरआरओ) का उपयोग कैसे कर सकते हैं।
आप क्या सीखेंगे
कैसे करें:
- अपने एंड्रॉइड ऐप में
car-ui-libघटक शामिल करें। - एंड्रॉइड ऐप्स और आरआरओ बनाने के लिए ग्रैडल का उपयोग करें।
-
car-ui-libके साथ आरआरओ का उपयोग करें।
यह कोडलैब यह नहीं बताता कि आरआरओ कैसे काम करते हैं। अधिक जानने के लिए रनटाइम पर ऐप के संसाधनों का मूल्य बदलें और रनटाइम संसाधन ओवरले का समस्या निवारण करें देखें।
आपके शुरू करने से पहले
आवश्यक शर्तें
शुरू करने से पहले, सुनिश्चित करें कि आपके पास:
कमांड लाइन वाला कंप्यूटर (लिनक्स मशीन, मैक, या लिनक्स के लिए विंडोज सबसिस्टम के साथ विंडोज मशीन)।
आपकी मशीन से जुड़ा एंड्रॉइड डिवाइस या एमुलेटर। एंड्रॉइड स्रोत डाउनलोड करें और एंड्रॉइड बनाएं देखें।
आरआरओ का बुनियादी ज्ञान।
एक नया Android ऐप बनाएं
अवधि: 15 मिनट
इस अनुभाग में, आप एक नया एंड्रॉइड स्टूडियो प्रोजेक्ट बनाते हैं।
एंड्रॉइड स्टूडियो में
EmptyActivityके साथ एक ऐप बनाएं।
चित्र 1. एक खाली गतिविधि बनाएँ ऐप को
CarUiCodelabनाम दें और फिर जावा भाषा चुनें। यदि आप चाहें तो आप फ़ाइल स्थान भी चुन सकते हैं. शेष सेटिंग्स के लिए डिफ़ॉल्ट मान स्वीकार करें।
चित्र 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संसाधन स्ट्रिंग जोड़ें और इसे "हैलो वर्ल्ड!" पर सेट करें। आपकीstrings.xmlफ़ाइल में। इस फ़ाइल को खोलने के लिए, ऐप > src > मुख्य > रेस > मान > strings.xml चुनें।<?xml version="1.0" encoding="utf-8"?> <resources> <string name="app_name">CarUiCodelab</string> <string name="sample_text">Hello World!</string> </resources>अपना ऐप बनाने के लिए, ऊपर दाईं ओर हरे प्ले बटन पर क्लिक करें। ऐसा करने से ग्रैडल के माध्यम से एपीके स्वचालित रूप से आपके एमुलेटर या एंड्रॉइड डिवाइस पर इंस्टॉल हो जाता है।
नया ऐप आपके एमुलेटर या एंड्रॉइड डिवाइस पर स्वचालित रूप से खुल जाना चाहिए। यदि नहीं, तो ऐप लॉन्चर से CarUiCodelab ऐप खोलें, जो अब इंस्टॉल हो गया है। ऐसा प्रतीत होता है:
अपने एंड्रॉइड ऐप में कार-यूआई-लिब जोड़ें
अवधि: 15 मिनट
अपने ऐप में car-ui-lib जोड़ें:
अपने प्रोजेक्ट की
build.gradleफ़ाइल मेंcar-ui-libनिर्भरता जोड़ने के लिए, ऐप > बिल्ड.ग्रेडल चुनें। आपकी निर्भरताएँ इस तरह दिखनी चाहिए: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' }
अपने एंड्रॉइड ऐप में कार-यूआई-लिब घटकों का उपयोग करें
अब जब आपके पास 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थीम का उपयोग करने के लिए, ऐप > src > मुख्य > 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>ऐप बनाने के लिए पहले की तरह हरे प्ले बटन को दबाएं।
अपने ऐप में आरआरओ जोड़ें
अवधि: 30 मिनट
यदि आप आरआरओ से परिचित हैं, तो अगले अनुभाग पर जाएं, अपने ऐप में एक अनुमति नियंत्रक जोड़ें । अन्यथा, आरआरओ की मूल बातें जानने के लिए, रनटाइम पर ऐप के संसाधनों का मूल्य बदलें देखें।
अपने ऐप में एक अनुमति नियंत्रक जोड़ें
यह नियंत्रित करने के लिए कि आरआरओ पैकेज किन संसाधनों को ओवरले करता है, अपने ऐप के /res फ़ोल्डर में overlayable.xml नाम की एक फ़ाइल जोड़ें। यह फ़ाइल आपके ऐप ( लक्ष्य ) और आपके आरआरओ पैकेज ( ओवरले ) के बीच एक अनुमति नियंत्रक के रूप में कार्य करती है।
अपने ऐप में
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आरआरओ द्वारा ओवरलेएबल होना चाहिए, ऐप के ओवरलेएबल.एक्सएमएल में संसाधन नाम शामिल करें।आपकी
overlayable.xmlफ़ाइलres/values/में होनी चाहिए । यदि नहीं, तोOverlayManagerServiceइसका पता नहीं लगा सकती।ओवरले करने योग्य संसाधनों के बारे में और उन्हें कैसे कॉन्फ़िगर किया जा सकता है, इसके बारे में अधिक जानने के लिए, ओवरले करने योग्य संसाधनों को प्रतिबंधित करें देखें।
एक आरआरओ पैकेज बनाएं
इस अनुभाग में, आप ऊपर प्रदर्शित स्ट्रिंग को "हैलो वर्ल्ड!" से बदलने के लिए एक आरआरओ पैकेज बनाते हैं। "हैलो वर्ल्ड आरआरओ" के लिए।
नया प्रोजेक्ट बनाने के लिए फ़ाइल > नया > नया प्रोजेक्ट चुनें। खाली गतिविधि के बजाय कोई गतिविधि नहीं चुनना सुनिश्चित करें क्योंकि आरआरओ पैकेज में केवल संसाधन होते हैं।
आपकी कॉन्फ़िगरेशन नीचे दर्शाए गए कॉन्फ़िगरेशन के समान दिखाई देती है। जिस स्थान पर उन्हें सहेजा गया है वह भिन्न हो सकता है:
नया
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फ़ाइल लक्ष्य पैकेज से आरआरओ पैकेज में संसाधन नामों को मैप करती है।कोड के निम्नलिखित ब्लॉक को
…/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>
अपना आरआरओ लक्ष्य बनाने के लिए, अपने एमुलेटर या एंड्रॉइड डिवाइस पर अपने आरआरओ का ग्रेडल बिल्ड बनाने के लिए हरा प्ले बटन दबाएं।
यह सत्यापित करने के लिए कि आपका आरआरओ ठीक से स्थापित है, चलाएँ:
shell:~$ adb shell cmd overlay list --user current | grep -i com.example com.example.caruicodelab [ ] com.example.caruirroयह कमांड सिस्टम पर आरआरओ पैकेजों की स्थिति के बारे में उपयोगी जानकारी प्रदर्शित करता है।
-
[ ]दर्शाता है कि आरआरओ स्थापित है और सक्रिय होने के लिए तैयार है। -
---इंगित करता है कि आरआरओ स्थापित है लेकिन इसमें त्रुटियां हैं। -
[X]का मतलब है कि आरआरओ स्थापित और सक्रिय है।
यदि आपके आरआरओ में त्रुटियां हैं, तो जारी रखने से पहले रनटाइम संसाधन ओवरले का समस्या निवारण देखें।
-
आरआरओ को सक्षम करने और यह सत्यापित करने के लिए कि यह सक्षम है:
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
आपका ऐप "हैलो वर्ल्ड आरआरओ" स्ट्रिंग प्रदर्शित करता है।
बधाई हो! आपने अपना पहला आरआरओ बना लिया है.
आरआरओ का उपयोग करते समय, आप लिंक विकल्पों में वर्णित एंड्रॉइड एसेट पैकेजिंग टूल (एएपीटी2) फ़्लैग --no-resource-deduping और --no-resource-removal का उपयोग करना चाह सकते हैं। इस कोडलैब में झंडे जोड़ना आवश्यक नहीं है, लेकिन हमारा सुझाव है कि आप संसाधनों को हटाने (और डिबगिंग सिरदर्द) से बचने के लिए अपने आरआरओ में उनका उपयोग करें। आप उन्हें अपने आरआरओ की build.gradle फ़ाइल में इस तरह जोड़ सकते हैं:
android {
…
aaptOptions {
additionalParameters "--no-resource-deduping", "--no-resource-removal"
}
}
इन झंडों के बारे में अधिक जानने के लिए, पैकेज बनाएं और AAPT2 देखें।
अपने एंड्रॉइड ऐप में आरआरओ का उपयोग करके car-ui-lib घटकों को संशोधित करें
यह पृष्ठ बताता है कि आप अपने एंड्रॉइड ऐप में car-ui-lib लाइब्रेरी से घटकों को संशोधित करने के लिए रनटाइम रिसोर्स ओवरले (आरआरओ) का उपयोग कैसे कर सकते हैं।
टूलबार पृष्ठभूमि रंग सेट करें
अवधि: 15 मिनट
टूलबार का पृष्ठभूमि रंग बदलने के लिए:
अपने आरआरओ ऐप में निम्नलिखित मान जोड़ें, और संसाधन को चमकीले हरे रंग (
#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 के लिए
AndroidManifest.xmlमें,car-ui-libको इंगित करने के लिएtargetNameअपडेट करें:… android:targetName="car-ui-lib" …आपको प्रत्येक लक्ष्य पैकेज के लिए एक नया आरआरओ पैकेज बनाना होगा जिसे आप आरआरओ बनाना चाहते हैं। उदाहरण के लिए, दो अलग-अलग लक्ष्यों के लिए ओवरले बनाते समय, आपको दो ओवरले एपीके बनाने होंगे।
पहले की तरह ही आरआरओ बनाएं, सत्यापित करें, इंस्टॉल करें और सक्षम करें।
आपका ऐप इस तरह दिखाई देता है:
आरआरओ लेआउट और शैलियाँ
अवधि: 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>अपने आरआरओ ऐप में, एक
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>हमारी शैली को RRO में जोड़ने के लिए
res/values/styles.xmlको अपडेट करें:<?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>ऐप और आरआरओ को पहले की तरह ही बनाएं और इंस्टॉल करें (हरा प्ले बटन)। अपने आरआरओ को सक्षम करना सुनिश्चित करें।
ऐप और आरआरओ इस प्रकार प्रस्तुत करते हैं। हैलो वर्ल्ड आरआरओ टेक्स्ट हरा है और लेआउट आरआरओ में निर्दिष्ट अनुसार केंद्रित है।
अपने ऐप में CarUiRecyclerView जोड़ें
अवधि: 15 मिनट
CarUiRecyclerView इंटरफ़ेस एक RecyclerView तक पहुंचने के लिए एपीआई प्रदान करता है जिसे car-ui-lib संसाधनों के माध्यम से अनुकूलित किया गया है। उदाहरण के लिए, 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जोड़ा है, तब तक आप अपना एपीके बना और संकलित कर सकते हैं। त्रुटि को दूर करने के लिए, फ़ाइल > अमान्य कैश चुनें, फिर अमान्य करें और पुनरारंभ करें पर क्लिक करें।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 देखें:
स्क्रॉलबार को हटाने के लिए आरआरओ का उपयोग करें
अवधि: 10 मिनट
यह अभ्यास आपको दिखाता है कि 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पर सेट किया जाता है,CarUiRecyclerViewAndroidXRecyclerViewकी तरह कार्य करता है।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 स्क्रॉलबार लेआउट को संशोधित करते हैं।
अपने आरआरओ ऐप में निम्नलिखित फ़ाइलें जोड़ें और संशोधित करें।
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>किसी लेआउट फ़ाइल को ओवरले करने के लिए, आपको अपने आरआरओ के
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 जावा कोड शैली देखें।अपना ऐप पहले की तरह बनाएं और इंस्टॉल करें। आपने नीले स्क्रॉलबार और ग्रे रेल्स के साथ
CarUiRecyclerViewबनाया है।
बधाई हो! दोनों तीर स्क्रॉलबार के नीचे दिखाई देते हैं, आपने एंड्रॉइड स्टूडियो के माध्यम से ग्रैडल बिल्ड सिस्टम का उपयोग करके car-ui-lib लेआउट संसाधन फ़ाइल में सफलतापूर्वक आरआरओ लागू किया है।
आरआरओ सूची आइटम
अवधि: 15 मिनट
इस बिंदु पर, आपने फ्रेमवर्क घटकों (एंड्रॉइडएक्स नहीं) का उपयोग करके car-ui-lib घटकों पर आरआरओ लागू किया है। आरआरओ में एंड्रॉइडएक्स घटकों का उपयोग करने के लिए, आपको उस घटक की निर्भरता को ऐप और आरआरओ build.gradle. आपको अपने ऐप में उस घटक के attrs overlayable.xml के साथ-साथ अपने आरआरओ में 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में सूची आइटम का लेआउट बदलें। अपने आरआरओ में निम्नलिखित फ़ाइलें जोड़ें या संशोधित करें: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संसाधन हैं। आपapp/build.gradleमें अपने आरआरओ ऐप पर निर्भरता के रूप मेंcar-ui-libजोड़कर इसे ठीक कर सकते हैं: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' }
शीर्षक और मुख्य भाग अब बाएँ-संरेखित के बजाय दाएँ-संरेखित हैं।
हमने केवल AndroidX घटकों ( ConstraintLayout ) का उपयोग करके car-ui-lib में आरआरओ लागू किया था, जब इसकी विशेषताएं overlayable.xml के साथ-साथ आरआरओ sample_overlay.xml नामक car-ui-lib फ़ाइल में मौजूद थीं। आपके अपने ऐप में भी कुछ ऐसा ही करना संभव है। बस अपने ऐप के overlayable.xml में सभी संबंधित attrs जोड़ें, जैसे कि car-ui-lib ।
हालाँकि, एंड्रॉइडएक्स घटकों का उपयोग करके किसी ऐप को आरआरओ करना संभव नहीं है, जब ऐप के build.gradle में निर्भरता के रूप में car-ui-lib है (जब ऐप car-ui-lib घटकों का उपयोग करता है)। चूंकि विशेषता मैपिंग पहले से ही car-ui-lib लाइब्रेरी के overlayable.xml में परिभाषित की गई थी, इसलिए उन्हें निर्भरता के रूप में car-ui-lib के साथ आपके ऐप के overlayable.xml में जोड़ने से नीचे की तरह mergeDebugResources त्रुटि उत्पन्न होगी। ऐसा इसलिए है क्योंकि ये विशेषताएँ एकाधिक overlayable.xml फ़ाइलों में मौजूद हैं:
org.gradle.api.tasks.TaskExecutionException: Execution failed for task ':app:mergeDebugResources'