1. مقدمة
في نظام التشغيل Android 13، أضفنا واجهات برمجة تطبيقات كأساس لإيماءة توقّع الرجوع.
ستسمح هذه الميزة للمستخدم بمعاينة نتيجة إيماءة الرجوع قبل أن يكملها بشكل كامل، مما يسمح له بشكل أساسي بتحديد ما إذا كان يجب البقاء في العرض الحالي أو إكمال الإجراء والعودة إلى الشاشة الرئيسية أو نشاط سابق أو صفحة تمت زيارتها سابقًا في WebView. فيما يلي مثال لما سيبدو عليه ذلك:
في حال هذا الدرس التطبيقي حول الترميز، سنصلح جزء من الاستطلاع الذي ينفِّذ WebView.
الهدف من هذا الدرس التطبيقي حول الترميز
يعرض لك هذا الدرس التطبيقي حول الترميز كيفية تحضير تطبيق AndroidX الذي يعترض نظام "الرجوع" من خلال نقل بياناته لإتاحة إيماءة الرجوع التنبؤية باستخدام WebView، وذلك باستخدام واجهات برمجة التطبيقات التي تنفّذ نموذج التنقّل الخلفي قبل وقت الإطلاق. بمعنى آخر، لكي تعمل الرسوم المتحركة الجديدة، يحتاج النظام إلى معرفة ما إذا كان التطبيق يعترض إيماءة التنقل للخلف مسبقًا.
ما الذي ستقوم ببنائه
في هذا الدرس التطبيقي حول الترميز، ستستخدم مكتبات واجهة برمجة التطبيقات AndroidX للتعامل مع إيماءات الرجوع في تطبيق Sunflower.
ما ستتعرَّف عليه
- كيفية اعتراض الطلبات المباشرة على أجهزة AndroidX
- كيفية إرجاع الحدث "رجوع" إلى النظام
- خيارات أخرى للتعامل مع إيماءات الرجوع
- تتوفّر تجربة المستخدم الجديدة في الإصدار 13 من نظام التشغيل Android والإصدارات الأحدث، ما يوفّر إمكانية التنقُّل بإيماءة الرجوع بشكل قائم على التوقّعات.
المتطلبات
- استوديو Android
- جهاز Android مزوّد بميزة التنقّل بالإيماءات
- (اختياري) Git
2. تخطيط الدعم لإيماءة توقّع الرجوع
استخدام واجهات برمجة تطبيقات AndroidX لتنفيذ هذه الميزة
تم تصميم هذا الدرس التطبيقي حول الترميز للتطبيقات التي تستخدم AndroidX حاليًا.
ستنفّذ OnBackPressedDispatcher وOnBackPressedCallback لإتاحة التنقّل بالرجوع.
خيارات أخرى
لدينا خيارات أخرى للتعامل مع هذه الميزة، حسب الاحتياجات المختلفة التي قد تتوفّر في تطبيقك:
- بالنسبة إلى التطبيقات التي لا يمكنها استخدام AndroidX، إذا كنت أنت من فعل ذلك، يمكننا مساعدتك. يمكنك استخدام فئتَي النظام الأساسيَين
OnBackInvokedDispatcherوOnBackInvokedCallbackالجديدتَين اللتَين نقدّمهما في Android 13، ما يتيح لك استخدام واجهات برمجة التطبيقات المتقدّمة بدون الحاجة إلى AndroidX. يُرجى الاطّلاع على المستندات لمعرفة التفاصيل. - بالنسبة إلى التطبيقات التي يتعذّر نقلها مؤقتًا، إذا كنت أنت من نفّذ هذه العملية، يمكنك أيضًا تقديم الدعم لك. يمكنك إيقاف إيماءة الرجوع التنبؤية إذا تعذّر نقل البيانات إلى مكتبات AndroidX أو واجهات برمجة تطبيقات النظام الأساسي في الوقت الحالي. يُرجى الاطّلاع على المستندات لمعرفة التفاصيل.
3- قبل البدء
تثبيت "استوديو Android"
ثبِّت استوديو Android وحزمة تطوير البرامج (SDK) لنظام التشغيل Android 13.
الحصول على جهاز
يمكنك استخدام جهاز Android افتراضي أو مادي لتشغيل التطبيق الذي تنشئه باستخدام هذا الدرس التطبيقي حول الترميز.
تفعيل التنقّل بالإيماءات
في حال تشغيل مثيل محاكي جديد بالمستوى 29 لواجهة برمجة التطبيقات، قد لا تكون ميزة "التنقل بالإيماءات" مفعَّلة تلقائيًا. لتفعيل التنقّل بالإيماءات، اختَر إعدادات النظام >. النظام > تنقل النظام > التنقُّل بالإيماءات
الحصول على الرمز
احصل على الرمز بإحدى الطرق التالية:
تنزيل الملف المضغوط
التنزيل عبر Git
إذا كنت تفضّل تنزيل الرمز باستخدام Git، اتّبِع الخطوات التالية:
- ثبِّت Git.
- استنساخ فرع
starter-codeأوmainللحصول على التطبيق لهذا التمرين:
محطة الركّاب
// Get starter app.
git clone --branch starter-code \
https://github.com/android/codelab-handling-back-navigation.git
تشغيل التطبيق
أكمِل الخطوات التالية:
- افتح التطبيق وأنشئه في "استوديو Android".
- أنشِئ جهازًا افتراضيًا جديدًا، ثم انقر على Tiramisu. بدلاً من ذلك، يمكنك توصيل جهاز مادي يعمل بالمستوى 33 من واجهة برمجة التطبيقات أو المستويات الأعلى.
- شغّل تطبيق Sunflower.
بعد ذلك ستنشئ أساسًا وتستعرض تجربة سيئة تعد جزءًا من تطبيق دوار الشمس.
4. وضع خط أساس
نقطة البداية لدينا هي تطبيق Sunflower، والذي يتضمن استبيانًا يتم تقديمه في WebView يتعامل بشكل سيئ مع إيماءات الرجوع. عندما يمرِّر المستخدم سريعًا من الحافة اليمنى أو اليسرى للرجوع إلى WebView، يعيده التطبيق إلى الجزء السابق بدلاً من الرجوع إلى الصفحة السابقة، ما يؤدي إلى فقدان أي بيانات لم يتم إرسالها.
استكشاف العرض التوضيحي
بدءًا من الشاشة الرئيسية، سنستعرض سير العمل الرئيسي لتطبيقك لمراجعة التجربة السيئة مع وظيفة WebView.
- في الشاشة التلقائية لتطبيق دوار الشمس، انقر على قائمة النباتات.
- في قائمة النباتات، انقر على أي نبات. (في هذا المثال، سنستخدم فاكهة الأفوكادو).
- في شاشة معلومات النبات الذي نقرت عليه، انقر على رمز الإعجاب (في أعلى يسار الشاشة) لتقييم النبات.
- ابدأ في ملء الاستبيان، ولكن توقف عندما تصل إلى السؤال رقم 3.
|
|
|
- مرِّر سريعًا للداخل من الحافة اليسرى (أو اليمنى) للشاشة لاستخدام إيماءة الرجوع. لاحظ أنه بدلاً من نقلك إلى السؤال رقم 2 في الاستبيان، فإن التمرير السريع للخلف يأخذك إلى جزء تفاصيل النبات (في هذا المثال، صفحة معلومات الأفوكادو). وهذا يتسبب في فقد إجاباتك، ويترك انطباعًا سيئًا لدى المستخدم.
لِنبدأ الآن بحلّ هذه المشاكل.
5- تفعيل إيماءة الرجوع التنبؤية
يستخدم تطبيقنا AndroidX بالفعل، لذا يمكنك استخدام واجهات برمجة تطبيقات التنقل للخلف. وهي تتوافق حاليًا مع نموذج الدفع المُسبَق.
استهداف Android 13
في مشروع "استوديو YouTube" الخاص بتطبيقنا، عليك تعديل إعدادات إصدار التطبيق لاستهداف الإصدار Android 13 كما هو موضّح في مقتطف الرمز التالي.
build.gradle (مشروع)
buildscript {
ext {
// Sdk and tools
minSdkVersion = 29
compileSdkVersion = 33
targetSdkVersion = 33
}
...
}
ترقية التبعيات
في Build.gradle، اضبط appCompatVersion على 1.6.0 أو على مستوى أعلى.
build.gradle (مشروع)
buildscript {
ext {
// App dependencies
appCompatVersion = '1.6.0-rc01' // Built original with changes
...
}
الترقية إلى النشاط على AndroidX 1.6.0 أو إصدار أحدث.
build.gradle (وحدة)
dependencies {
implementation "androidx.activity:activity-ktx:1.6.0"
...
}
تفعيل إيماءة الرجوع التنبؤية
لتفعيل واجهات برمجة التطبيقات التي تتضمّن إيماءة توقّع شاشة الرجوع، يجب ضبط enableOnBackInvokedCallback على true في ملف البيان.
AndroidManifest.xml
<application
...
android:enableOnBackInvokedCallback="true" // Enables this feature.
... >
...
</application>
التعريف وتسجيل OnBackPressedCallback للتعامل مع إيماءات الرجوع
إنشاء طلب معاودة الاتصال وإلغاء الطريقة handleOnBackPressed للتعامل مع إيماءات الرجوع. بالنسبة إلى حالة استخدام WebView، لنستخدم إيماءة "الرجوع" للعودة إلى حزمة الصفحات حتى تنتهي الصفحات.
SurveyFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
val onBackPressedCallback = object: OnBackPressedCallback(true) {
override fun handleOnBackPressed() {
when {
webView.canGoBack() -> webView.goBack()
}
}
}
requireActivity().onBackPressedDispatcher
.addCallback(onBackPressedCallback)
}
تجربة ما صمّمته
ستختبر الآن ما إذا كان التنقل في WebView يعمل بشكل صحيح.
- في "استوديو Android"، أنشِئ التطبيق وشغِّله مرة أخرى.
- وكما فعلت عند تشغيل العرض التوضيحي لأول مرة، انقر على نبات من اختيارك ثم انقر على رمز الإعجاب، ثم املأ الاستطلاع حتى تصل إلى السؤال رقم 3.
- مرِّر سريعًا للداخل من الحافة اليسرى (أو اليمنى) للشاشة لاستخدام إيماءة الرجوع. يُفترض أن تعيدك WebView إلى السؤال رقم 2 في الاستبيان.
وهذا هو السلوك الدقيق الذي نريده. ومع ذلك، فقد قطعنا في منتصف الطريق - لم يتم إصلاحها تمامًا بعد. لنواصل رؤية ما نعنيه:
- من السؤال رقم 2، اسحب مرة أخرى إلى السؤال رقم 1، ثم اسحب مرة أخرى مرة أخرى في محاولة للعودة إلى جزء تفاصيل النبات.
لاحظ أنه لا يمكنك العودة من السؤال رقم 1 إلى جزء تفاصيل النبات. ويرجع ذلك إلى ما يلي:
- تتعامل نافذة WebView مع ميزة "الانتقال للخلف" من خلال تجنُّب مغادرة WebView عند استخدام شريط التنقّل للخلف.
- يحتاج تطبيقك إلى إعادة شريط التنقل "رجوع" إلى النظام عندما لا يحتاج إليه. دعنا ننتقل إلى القسم التالي لإصلاح ذلك!
6- إصلاح إيماءة الرجوع
في الخطوة السابقة، اعترض تطبيقنا إيماءة الرجوع بدون إعادتها إلى جزء تفاصيل النبات في الخطوات السابقة. ونتيجةً لذلك، لا يمكن للمستخدمين مغادرة التطبيق، لأنّهم عالقون في نافذة WebView إذا كانت تجربتهم سيئة.
تفعيل ميزة "التنقُّل للخلف" أو إيقافها باستخدام OnBackPressedCallback
- يمكنك إلغاء الطريقة
doUpdateVisitedHistoryلتحديد ما إذا كان يجب اعتراض ميزة "التنقُّل للخلف". منطق التعامل مع التنقل الخلفي هو ما يلي:- إذا كان هناك المزيد من الصفحات للرجوع إليها في WebView (
webView.canGoBack())، من المفترض أن يتم تفعيل الطريقةOnBackPressedCallback. - في المقابل، إذا لم تعُد هناك صفحات أخرى للرجوع إليها في WebView، من المفترض أن يتم إيقاف طريقة
OnBackPressedCallback. ونتيجة لذلك، ستعود إيماءة الرجوع إلى الجزء العلوي في الحزمة الخلفية.
- إذا كان هناك المزيد من الصفحات للرجوع إليها في WebView (
SurveyFragment.kt
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
...
requireActivity().onBackPressedDispatcher
.addCallback(onBackPressedCallback)
disableOnBackPressedCallback(webView, onBackPressedCallback)
}
}
private fun disableOnBackPressedCallback(webView: WebView, onBackPressedCallback: OnBackPressedCallback) {
webView.webViewClient = object: WebViewClient() {
override fun doUpdateVisitedHistory(view: WebView?, url: String?, isReload: Boolean) {
// Disable the on-back press callback if there are no more questions in the
// WebView to go back to, allowing us to exit the WebView and go back to
// the fragment.
onBackPressedCallback.isEnabled = webView.canGoBack()
}
}
}
- لاختبار WebView مرة أخرى، املأ الاستبيان مرة أخرى حتى تصل إلى السؤال رقم 3.
- باستخدام إيماءات الرجوع، ارجع إلى عرض تفاصيل النبات. ينبغي أن تكون قادرًا على القيام بذلك دون مشكلة.
إليك مثال على الشكل الذي من المفترض أن يبدو عليه هذا بعد حل المشكلة:
معاينة الصورة المتحركة الجديدة لإيماءة الرجوع إلى الشاشة الرئيسية
في الإصدارات القادمة من Android، ستبدأ في الظهور بإيماءة توقّع الرجوع كما هو موضّح في الصورة المتحركة التالية. ننصحك بشدّة ببدء تنفيذ هذه التغييرات في أقرب وقت ممكن.
يمكنك معاينة طريقة التنقُّل الجديدة بالإيماءات الخاصة بالعودة إلى الصفحة الرئيسية من خلال تفعيل خيار المطوِّر.
7. تهانينا
تهانينا! لقد تناولت الكثير من المحتوى. نأمل أن تكون قد اطّلعت على مزيد من التفاصيل عن الخيارات وواجهات برمجة التطبيقات لبدء تحديث تطبيقك بشأن إيماءة الرجوع التنبؤية المتوفرة في Android.
المواضيع التي تناولناها
- كيفية السماح لتطبيقك ببدء استخدام واجهات برمجة التطبيقات التي تتيح إيماءة الرجوع التنبؤية
- كيفية اعتراض الاستدعاء الخلفي لنظام AndroidX
- كيفية إعادة شريط التنقّل للخلف إلى النظام
- خيارات أخرى للتعامل مع إيماءات الرجوع
- سيتوفّر نظام Android 13 ضمن تجربة المستخدم الجديدة التي توفّر إيماءة الرجوع بشكل أكثر توقُّعًا
اكتملت الدرس التطبيقي حول الترميز.
// Get completed app.
git clone --branch main \
https://github.com/android/codelab-handling-back-navigation.git