إدارة الإيماءات: التعامل مع التراكبات المرئية. الجزء 2

تحسبا لبدء دورة متقدمة في تطوير نظام أندرويد ، نواصل مشاركتك مع سلسلة من الترجمات المفيدة.

---

تقرأ المقالة الثانية في سلسلة حول إدارة الإيماءات. يمكنك العثور على الجزء الأول هنا .

في الجزء الأول من السلسلة ، تعلمنا كيفية وضع تطبيقك "من الحافة إلى الحافة" من الشاشة. لسوء الحظ ، يمكن أن تؤدي طريقة العرض هذه إلى حقيقة أن بعض طرق العرض الخاصة بك ستكون موجودة خارج الحدود على مساحة لوحات النظام ، وبالتالي إخفاءها عن المستخدم. في هذه المقالة ، سنعرف كيفية إضافة view بطريقة لا تؤدي إلى تعطيل تشغيل لوحات النظام.

في هذه المقالة ، سأشير إلى شيء باسم "نظام واجهة المستخدم". هذا هو اسم أي من واجهات النظام الموجودة على الشاشة ، سواء كان شريط التنقل أو شريط الحالة. ويشمل أيضا شريط الإعلام.

إدراجات

إن المصطلح الداخلي ، كقاعدة عامة ، يسبب الخوف بين مطوري Android ، حيث أنهم حاولوا دائمًا استخدام منطقة العمل في شريط الحالة في وقت ما في أيام Android Lollipop. على سبيل المثال ، يحتوي هذا السؤال القديم على StackOverflow على عدد كبير جدًا من المشاهدات.

يُظهر Insets مكونات الشاشة التي تتقاطع مع واجهة النظام ، على سبيل المثال ، شريط التنقل أو شريط الحالة. قد يعني التقاطع ببساطة عرض أعلى المحتوى الخاص بك ، ولكن هنا يمكنك أيضًا الحصول على معلومات حول إيماءات النظام. يمكننا استخدام أقحم لمحاولة حل أي تعارضات ، على سبيل المثال ، عن طريق تحريك view بعيدا عن الحواف.

في Android ، يتم تمثيل الإضافات بواسطة فئة WindowInsets ، وفي AndroidX بواسطة فئة WindowInsetsCompat . بدءًا من Android Q ، لدينا 5 أنواع من الإضافات التي يمكننا استخدامها عند إنشاء شاشات التطبيق. أي نوع من inset لاستخدام يعتمد على الموقف ، لذلك دعونا ننظر إلى كل نوع على حدة ونرى.

نافذة النظام أقحم

الطريقة : getSystemWindowInsets ()

أقحم نافذة النظام هو النوع الأكثر شيوعا من inset اليوم. توجد مع API 1 في أشكال مختلفة وتظهر في التسلسل الهرمي view كلما تم عرض واجهة المستخدم للنظام أعلى التطبيق الخاص بك (على طول المحور z). من الأمثلة الشائعة شريط الحالة وشريط التنقل ، وأحيانًا لوحة المفاتيح التي تظهر على الشاشة (IME).

دعونا نلقي نظرة على مثال حيث يجب عليك استخدام إدراجات نافذة النظام . لدينا بالفعل FloatingActionButton (FAB) ، والذي يقع في الركن السفلي من الشاشة مع مسافة بادئة 16dp (وفقًا للإرشادات ).


FAB في تطبيق Google I / O قبل أن يتحول إلى الحافة إلى الحافة

بعد اتباع الخطوتين 1 و 2 من المقال السابق ، ستكون view نظرنا وراء شريط التنقل:


FAB في تطبيق Google I / O ، بعد التمديد إلى وضع ملء الشاشة

الآن ترى أن جدول مؤتمراتك يقع خلف شريط التنقل ، وهذا هو بالضبط ما نهدف إليه - إنشاء تجربة أكثر غامرة. بمزيد من التفاصيل حول كيفية التعامل مع القوائم / الشبكات ، سننظر لاحقًا.

دعنا نعود إلى المثال. الآن ترى أن FAB مخفي ، وهذا بدوره يعني أن المستخدم لن يكون قادرًا على النقر فوقه. هذا هو الصراع العرض الذي نريد تجنبه. يبدو المثال أكثر وضوحًا عندما نستخدم التنقل بالأزرار (كما في الصورة) ، نظرًا لأن اللوحة أعلى. في التنقل بالإيماءات مع التكيف الديناميكي للألوان ، سيعمل ذلك ، لكن تذكر أن النظام يمكن أن يتحول إلى قشور شفافة في أي وقت ، مما قد يعطل تجربة التفاعل.

الآن لحظة جيدة لإخبارك بمدى أهمية اختبار التطبيق الخاص بك في جميع أوضاع التنقل.

لذلك ، كيف نتعامل مع هذا الصراع البصري؟ عند هذه النقطة ، تدخل نافذة نظام النوافذ حيز التنفيذ. سيعلمونك بمكان وجود لوحات النظام في التسلسل الهرمي للعرض الخاص بك ، ويمكنك استخدام هذه القيم لنقل العرض بعيدًا عن لوحات النظام.

في المثال أعلاه ، يقع FAB بالقرب من أسفل اليمين ، حتى نتمكن من استخدام قيم systemWindowInsets.bottom و systemWindowInsets.right لزيادة المسافة البادئة view على كل جانب لتحريكه بعيدًا عن شريط التنقل.

بمجرد القيام بذلك ، نحصل على ما يلي:


سنتحدث عن كيفية تطبيق ذلك بعد قليل.

TL. DR: إن إدراجات نافذة النظام هي الأنسب لنقل / وضع مسافة بادئة للعروض التفاعلية التي يجب ألا تغطيها لوحات النظام.

إدراجات عنصر Tappable

الطريقة : getTappableElementInsets ()

علاوة على ذلك ، لدينا إدراجات عناصر قابلة للظهور ظهرت للتو في نظام Android Q. إنها تشبه إلى حد بعيد نافذة إدراج النظام أعلاه ، ومع ذلك ، فهي تستجيب للرؤية المتنوعة لشريط التنقل.

TL؛ DR: كما هو الحال مع tappable element insets : يمكنك عمومًا تجاهلها واستخدام system window insets . يمكنك تخطي قسم Gesture Insets أدناه أو متابعة القراءة.

تحدد إدراجات عناصر Tappable الحد الأدنى للمجموعات الداخلية التي يجب تطبيقها في طريقة عرض تفاعلية (قابلة للتطبيق). "الحد الأدنى" في هذه الحالة يعني أن القيمة المطبقة لا تزال تؤدي إلى تعارض مع لوحات النظام. هذا هو ما يميزهم عن إدراجات نافذة النظام ، والتي تهدف دائمًا إلى تجنب التعارضات مع لوحات النظام.

دعنا نستخدم مثالنا مع FloatingActionButton لإظهار الفرق في القيم:


تظهر حدود شريط التنقل باللون الوردي. الأخضر - حدود FAB مع مسافة بادئة محددة من الهامش السفلي.



تذكر أنه لا يمكنك مطلقًا استخدام قيم القرص الثابت من الجدول أعلاه ، حيث يمكن تغيير حجم شريط التنقل. استخدام إدراجات لتجنب الصراعات.

ربما لاحظنا أن tappable element insets system gesture insets تتصرف بنفس الطريقة عندما يكون الجهاز في وضع التنقل tappable element insets . يصبح الاختلاف الرئيسي مرئيًا عندما يستخدم الجهاز التحكم بالإيماءات ولديه تشغيل ديناميكي للتكيف مع الألوان. في هذه الحالة ، يكون شريط التنقل شفافًا ، مما يعني أنه من الممكن نظريًا ترتيب views التفاعلية views ، بحيث تكون المسافة البادئة من الأسفل 0.

على الرغم من حقيقة أن insets ليست لديها فكرة عن مكان تواجد العروض ، لذلك باستخدام إدخالات العناصر القابلة للنقر من الناحية النظرية ، يمكنك الحصول على شيء مشابه:



لم ينجح هذا الإجراء بشكل مثالي ، نظرًا لأن view قريب جدًا من شريط التنقل ، والذي لن يكون مناسبًا جدًا للمستخدم.

في الممارسة العملية ، تتم معالجة جميع حالات الاستخدام تقريبًا لإدخالات العناصر القابلة للنقر بشكل أفضل مع إدراجات نافذة النظام .

إيماءات لفتة

الأساليب : getSystemGestureInsets () و getMandatorySystemGestureInsets ()

النوع التالي من insets التي سننظر فيها هو gesture insets ، التي تمت إضافتها في إصدار Android Q. أتذكر أن Android Q يقدم وضعًا جديدًا للتحكم في الإيماءات يتيح للمستخدم التحكم في الجهاز باستخدام إيماءات اللمس التي يمكن إجراؤها على النحو التالي:

1. اسحب أفقيًا من أحد أطراف الشاشة. هذا سوف يؤدي إلى عودة العمل.
2. اسحب لأعلى من الحافة السفلية للشاشة. سيتيح هذا للمستخدم الانتقال إلى شاشته الرئيسية أو إلى آخر التطبيقات المستخدمة.

مظاهرة لفتة في Android Q

تعكس إيماءات النظام إيماءات مناطق النافذة حيث تكون لإيماءات النظام الأسبقية على إيماءات اللمس في التطبيق الخاص بك. ربما لاحظت أنني أشرت إلى طريقتين أعلاه. ويرجع ذلك إلى حقيقة أن هناك بالفعل نوعان من مجموعات إيماءات النظام : أحدهما يخزن جميع مناطق الإيماءات ، والثاني مجموعة فرعية تحتوي على مجموعات إيماءات النظام الإلزامية.

إدراج إيماءات النظام

بالنسبة للمبتدئين ، لدينا إضافات إيماءات النظام . أنها تحتوي على جميع المناطق على الشاشة حيث تكون لإيماءات النظام الأسبقية على إيماءات التطبيق الخاص بك. في Android Q ، هذا يعني أن الأشكال الداخلية ستبدو مثل هذا ، وهي تحتوي على المسافة البادئة من الحافة السفلية لإيماءة للعودة إلى الشاشة الرئيسية ، المسافات البادئة على اليسار واليمين لفتة خلفية:

  0 +--------------+ | | | System | 40 | Gesture | 40 | Insets | | | +--------------+ 60 

متي ستدخل إيماءات النظام في متناول يدي؟ تشير هذه insets إلى الأماكن التي تكون فيها إيماءات النظام لها الأسبقية ، بحيث يمكنك استخدامها لنقل استباقيًا أي طرق عرض تتطلب إيماءة انتقاد.

من الأمثلة على ذلك شاشة تمتد من الأسفل ، الضربات الشديدة في الألعاب ، الدواسات (مثل ViewPager ). بشكل عام ، يمكنك استخدام هذه insets لنقل / المسافة البادئة من حواف الشاشة.

إدراجات إيماءات النظام الإلزامية

تعد إدخالات إيماءات النظام الإلزامية مجموعة فرعية من إدخالات إيماءات النظام ولا تحتوي إلا على مناطق لا يمكن إزالتها من التطبيق (على سبيل المثال ، الاسم). نظرنا إلى الأمام قليلاً في موضوع المقال التالي ، حيث سنتحدث عن التعامل مع تعارضات الإيماءات ، ولكن لفهم المقالة الحالية ، اعلم فقط أن التطبيقات يمكنها إزالة إيماءات النظام من بعض مناطق الشاشة.

تشير مجموعات إيماءات النظام الإلزامية إلى مناطق الشاشة التي تكون فيها إيماءات النظام دائمًا الأسبقية وتكون إلزامية. في Android Q ، المنطقة الإلزامية الوحيدة في الوقت الحالي هي منطقة إيماءات الشاشة الرئيسية في الجزء السفلي من الشاشة. يعد ذلك ضروريًا حتى يتمكن المستخدم دائمًا من الخروج من التطبيق.
عند النظر إلى مثال الإيماءات الموجودة على جهاز Android Q ، سترى ما يلي:

  0 0 +--------------+ +--------------+ | | | Mandatory | | System | | System | 40 | Gesture | 40 0 | Gesture | 0 | Insets | | Insets | | | | | +--------------+ +--------------+ 60 60 

يمكن ملاحظة أن إدخالات إيماءات النظام تحتوي على مسافات بادئة على اليسار واليمين والسفلي ، بينما تحتوي الإضافات الضرورية على مسافة بادئة فقط من أسفل بحيث تعمل إيماءة الإرجاع إلى الشاشة الرئيسية بشكل طبيعي. سنتحدث أكثر عن حذف مناطق الإيماءات في المقالة التالية.

إدراجات مستقرة

الطريقة : getStableInsets ()

الإضافات المستقرة هي آخر نوع من الإضافات المتاحة على نظام Android. إنها ليست مهمة بشكل خاص لإدارة الإيماءات ، لكنني قررت أن الأمر يستحق الحديث عنها.

تشير الإضافات المستقرة إلى إدراجات نافذة النظام ، ولكنها تشير إلى المكان الذي يمكن عرض واجهة النظام فيه أعلى التطبيق الخاص بك ، وليس حيث يتم عرضه من حيث المبدأ. تُستخدم الإضافات المستقرة بشكل أساسي عندما يتم تكوين واجهة النظام بطريقة يمكن تشغيل أو إيقاف تشغيل الرؤية الخاصة بها ، على سبيل المثال ، عند استخدام أوضاع رجوع أو أوضاع غامرة (على سبيل المثال ، الألعاب ومشاهدة الصور ومشغلات الفيديو).

التعامل مع إدراجات

آمل أن يكون لديك فهم أفضل لأنواع الأنواع المختلفة من الإضافات ، لذلك دعونا نرى الآن كيف يمكنك استخدامها في تطبيقاتك.

الطريقة الرئيسية للوصول إلى WindowInsets هي الطريقة setOnApplyWindowInsetsListener . دعونا نلقي نظرة على view مثال ، نريد وضع مسافة بادئة فيه حتى لا يظهر خلف شريط التنقل:

 ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets -> v.updatePadding(bottom = insets.systemWindowInsets.bottom) // Return the insets so that they keep going down the view hierarchy insets } 

هنا نقوم ببساطة بتعيين المسافة البادئة السفلية view على قيمة المسافة البادئة السفلية لإطار النافذة الداخلي .

ملاحظة : إذا قمت بذلك على ViewGroup ، فمن المحتمل أنك تريد تعيين android:clipToPadding="false" . هذا يرجع إلى حقيقة أن كافة أنواع رسم القصاصات تكون بادئة بشكل افتراضي. تستخدم هذه السمة بشكل شائع مع RecyclerView ، والتي سنناقشها بمزيد من التفصيل في المقالة التالية.

تأكد من وظيفة الاستماع الخاصة بك العاطفي. إذا تم استدعاؤها عدة مرات بنفس الإضافات ، فيجب أن تكون النتيجة متطابقة في كل مرة. فيما يلي مثال للدالة غير العاطفية:

 ViewCompat.setOnApplyWindowInsetsListener(view) { v, insets -> v.updatePadding(bottom = v.paddingBottom + insets.systemWindowInsets.bottom) insets } 

لا ينبغي أن يكون قد زاد (ala + =) في المسافة البادئة للعرض في كل مرة يتم استدعاء وظيفة الاستماع. يمكن أن يحدث إدراجات النوافذ في أي وقت وعدة مرات خلال حياة التسلسل الهرمي لطرق العرض.

Jetpack ل

شيء آخر أوصي بوضعه في الاعتبار حول الإضافات هو استخدام فئة WindowInsetsCompat من Jetpack ، بغض النظر عن الحد الأدنى من إصدار SDK. لقد تم تحسين واجهة برمجة تطبيقات WindowInsets وتوسيعها على مر السنين ، ويوفر إصدار compat اتساق API والسلوك على جميع مستويات API.

عندما تتأثر الأنواع الجديدة من الإضافات المتوفرة في Android Q ، فإن طريقة التوافق هي مجموعة من القيم الصالحة للجهاز المضيف على جميع مستويات واجهة برمجة التطبيقات. للوصول إلى واجهات برمجة التطبيقات الجديدة في Android X ، قم androidx.core:core:1.2.0-xxx إلى androidx.core:core:1.2.0-xxx (الآن في alpha) أو أعلى. هنا يمكنك العثور على أحدث إصدار.

دعنا نذهب أبعد من ذلك

الطرق التي ذكرتها أعلاه هي أسهل طريقة لاستخدام واجهة برمجة تطبيقات WindowInsets [Compat] ، لكنها يمكن أن تجعل الشفرة أطول من اللازم. في وقت سابق ، كتبت مقالة وصفت فيها بالتفصيل الطرق التي يمكن أن تزيد بشكل كبير من بيئة العمل لمعالجة insets نافذة باستخدام المجلدات محول. يمكنك قراءتها هنا.

في المقالة التالية ، سوف نتعلم كيفية التعامل مع أي تعارض قد ينشأ بين إيماءات التطبيقات وإيماءات النظام.

هذا كل شيء. نحن ننتظر الجميع في الندوة المجانية على الإنترنت ، والتي سيتحدث فيها اختصاصنا بالتفصيل عن الدورة التدريبية .