التركيز في "إنشاء"

عندما يتفاعل المستخدم مع تطبيقك، غالبًا ما يفعل ذلك من خلال لمس العناصر على الشاشة. ومع ذلك، ليس هذا هو الشكل الوحيد للتفاعل. قد تشمل أشكال التفاعل الأخرى ما يلي:

  • قد يستخدم مستخدم ChromeOS مفاتيح الأسهم على لوحة المفاتيح الخارجية للتنقّل على الشاشة.
  • يمكن لمستخدم يلعب إحدى الألعاب استخدام ذراع التحكّم في الألعاب المرفق للتنقّل في قائمة اللعبة.
  • قد يتنقّل مستخدم تطبيق الأجهزة الجوّالة بين العناصر باستخدام لوحة المفاتيح على الشاشة.

في هذه الحالات، من المهم تتبُّع المكوّن النشط في أي وقت، وهو ما نسمّيه التركيز. يجب التركيز على العناصر الظاهرة على الشاشة بترتيب منطقي. توفّر Jetpack Compose طريقة تلقائية للتعامل مع التركيز تكون صحيحة في معظم الحالات. ومع ذلك، في بعض الحالات، قد تحتاج إلى تعديل هذا السلوك التلقائي.

توضّح الصفحات التالية كيفية استخدام وضع التركيز في تطبيقك:

ترتيب التنقّل التلقائي بين العناصر التي يمكن التركيز عليها

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

يمكن التنقّل في واجهة المستخدم بعدة طرق، بعضها معروف لدى معظم المستخدمين، وهي:

  • علامات التبويب: تنقّل أحادي الأبعاد، يمكنك الانتقال للأمام أو للخلف. يؤدي التنقّل باستخدام مفتاح Tab إلى نقل التركيز إلى العنصر التالي أو السابق في التسلسل الهرمي. تتّبع Compose بشكل تلقائي تعريف Composables. يمكن التنقّل في اتجاه واحد باستخدام المفتاح tab على لوحة المفاتيح أو الإطار الدوّار على الساعة، وسيؤدي هذا النوع من البحث عن التركيز إلى الانتقال إلى كل عنصر على الشاشة.
  • مفاتيح الأسهم: للتنقّل في بُعدَين، يمكنك الانتقال لليسار أو اليمين أو الأعلى أو الأسفل. يمكن التنقّل في بُعدَين باستخدام لوحة التحكّم الاتجاهية على التلفزيون أو مفاتيح الأسهم على لوحة المفاتيح، ولا يزور ترتيب التنقّل سوى العناصر على مستوى معيّن. يمكنك استخدام الزر الأوسط في لوحة التحكّم وزر الرجوع للانتقال إلى مستوى آخر والعودة إلى المستوى السابق.

لنأخذ لقطة الشاشة أدناه كمثال، حيث لديك أربعة أزرار، أحدها أسفل الآخر، وتريد التنقّل بينها جميعًا بترتيب ظهورها. توفّر Jetpack Compose هذا السلوك بدون الحاجة إلى أي إعدادات إضافية، إذ تتيح لك مجموعة الأدوات التنقّل بين كل دالة مركّبة بترتيب عمودي من الأعلى إلى الأسفل باستخدام المفتاح tab، أو نقل التركيز بالضغط على السهم للأعلى أو للأسفل.

لقطة شاشة لقائمة أزرار موضوعة عموديًا بعضها تحت بعض في شكل صغير
الشكل 1. قائمة بالأزرار المعروضة بتصميم صغير الحجم

عند التبديل إلى نوع مختلف من التنسيق، تتغيّر بعض الأمور. إذا كان التصميم يتضمّن أكثر من عمود واحد، مثل التصميم أدناه، يتيح لك Jetpack Compose التنقّل بينها بدون الحاجة إلى إضافة أي رمز. إذا ضغطت على المفتاح tab، سيُبرز Jetpack Compose العناصر تلقائيًا بترتيب تعريفها، من First إلى Fourth. يؤدي استخدام مفاتيح الأسهم على لوحة المفاتيح إلى جعل عملية التحديد تتّبع الاتجاه المطلوب في المساحة الثنائية الأبعاد.

Column {
    Row {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Row {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

يتم تعريف Composables في Rows، ويتم تعريف عناصر التركيز بالترتيب، من الأول إلى الرابع. عند الضغط على المفتاح tab، سيتم ترتيب التركيز على النحو التالي:

لقطة شاشة لقائمة أزرار موضوعة في عمودَين جنبًا إلى جنب في شكل جهاز أكبر
الشكل 2 قائمة أزرار موضوعة في عمودَين جنبًا إلى جنب في عامل شكل أكبر

في المقتطف أدناه، يتم تعريف العناصر في Columns بدلاً من Rows:

Row {
    Column {
        TextButton({ }) { Text("First field") }
        TextButton({ }) { Text("Second field") }
    }
    Column {
        TextButton({ }) { Text("Third field") }
        TextButton({ }) { Text("Fourth field") }
    }
}

يتنقّل هذا التنسيق بين العناصر عموديًا، من أعلى إلى أسفل، من بداية الشاشة إلى نهايتها:

لقطة شاشة لقائمة أزرار موضوعة في عمودَين جنبًا إلى جنب في شكل جهاز أكبر
الشكل 3. قائمة أزرار موضوعة في عمودَين جنبًا إلى جنب في عامل شكل أكبر

على الرغم من اختلاف المثالَين السابقَين في التنقّل أحادي الاتجاه، إلا أنّهما يقدّمان التجربة نفسها عندما يتعلّق الأمر بالتنقّل الثنائي الأبعاد. ويحدث ذلك عادةً لأنّ العناصر على الشاشة لها الموضع الجغرافي نفسه في كلا المثالين. عند التنقّل لليسار من Column الأول، ينتقل التركيز إلى Column الثاني، وعند التنقّل لأسفل من Row الأول، ينتقل التركيز إلى Row الذي يليه.

التالي
تغيير ترتيب اجتياز التركيز