محتويات الدورة

تطوير Android / الأساسي: أسس Android وCompose / الدرس 5

التخطيطات والموارد وعناصر التحكم الشاملة

رتّب قائمة قراءة تراعي القيود والترجمة وتكبير النص والمعنى المعروض للتقنيات المساعدة.

وقت القراءة التقريبي: 4 دقيقةتاريخ مراجعة المحتوى
في هذه الصفحة

أهداف الدرس

  • اشرح قيود الأب وترتيب معدلات العرض.
  • استخدم الموارد والمكونات القياسية لدعم مستخدمين متنوعين.

تعامل مع المساحة المتاحة

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

اقرأ المعدلات كسلسلة مرتبة

تغلف المعدلات السلوك والتخطيط بالترتيب؛ لذلك تختلف حدود التفاعل عند وضع الحشو قبل منطقة النقر عنها بعده. اقبل معامل modifier في المكونات القابلة لإعادة الاستخدام وطبّقه على العقدة الخارجية. يتيح ذلك للأب تموضع المكوّن دون التدخل في داخله. استخدم dp للأبعاد ووحدات نص قابلة للتحجيم عبر خطوط السمة. تجنب تصغير النص لمجرد إخفاء التجاوز؛ افحص الالتفاف والأحجام الدنيا والقيود أولاً. ينشأ عيب التخطيط غالباً في الأب لا في الابن المقتطع.

kotlin دع الأب يموضع ملخصاً يتحدد حجمه بالمحتوى
@Composable
fun ReadingSummary(title: String, subtitle: String, modifier: Modifier = Modifier) {
    Column(modifier = modifier.padding(16.dp)) {
        Text(title, style = MaterialTheme.typography.titleMedium)
        Spacer(Modifier.height(4.dp))
        Text(subtitle, style = MaterialTheme.typography.bodyMedium)
    }
}

استورد تخطيطات Compose وModifier وdp ومكونات Material في التطبيق القائم. لا تملك Column ارتفاعاً ثابتاً فيستطيع النص الالتفاف عند تكبير الخط. يطبّق المعدل الخارجي مرة واحدة عند حد المكوّن.

اعرض القوائم الكبيرة بهوية ثابتة

ينشئ LazyColumn محتوى القائمة بحسب الحاجة بدلاً من بناء كل الصفوف فوراً. وفّر مفاتيح فريدة وثابتة كي تتبع الحالة العنصر المقصود عند انتقال الصفوف. المفاتيح هويات وليست مواضع حالية، وتخالف المعرّفات المكررة هذا العقد. ارفع الحالة المهمة خارج الصفوف المنفردة؛ فقد يغادر العنصر الكسول التركيب عند تمريره بعيداً. اجعل حالات الفراغ والتحميل والفشل صريحة حول القائمة. إذا كان المحتوى مقسماً إلى صفحات فافصل تحميل الصفحة التالية عن استبدال الشاشة كلها بمؤشر انتظار.

اجعل اللغة قرار موارد

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

xml الموارد الافتراضية داخل res/values
<resources>
    <string name="reading_title">Reading title</string>
    <string name="open_item">Open %1$s</string>
    <plurals name="item_count">
        <item quantity="one">%d item</item>
        <item quantity="other">%d items</item>
    </plurals>
</resources>

أنشئ نظائر مترجمة تحت res/values-ar بالأسماء نفسها وفئات الجمع العربية الصحيحة. استخرج صيغة الجمع بواجهة الكمية ومرّر عدد التنسيق. لا يحقق ملف الإنجليزية الافتراضي هذا وحده التعريب.

احفظ المعنى إلى جانب المظهر

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

الأخطاء الشائعة وإصلاحها

يُقتطع النص بعد تكبير الخط

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

تنتقل حالة الصف إلى عنصر آخر

لماذا يحدث؟
تستخدم القائمة الكسولة مفاتيح غير ثابتة أو مكررة.
كيف تصلحه؟
استخدم معرّفات عناصر دائمة وفريدة وارفع الحالة الأساسية.
كيف تتجنب تكراره؟
اختبر الإضافة والحذف وإعادة الترتيب.

يعلن قارئ الشاشة العنوان نفسه مرتين

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

اختبر فهمك

1. يشترك عنوان وزر إجراء في Row. يدفع العنوان المترجم الطويل الزر خارج الشاشة. اقترح تعديلاً.

اعرض الحل المشروح

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

2. تحتوي قائمة على نجمة صغيرة فقط لتحديد المفضلة. حدد عقدها غير البصري.

اعرض الحل المشروح

استخدم عنصراً تبديلـياً مناسباً أو دلالات مكافئة تكشف الإجراء والدور والحالة الحالية بعنوان مترجم. احتفظ بمنطقة تفاعل كافية ولا تعتمد على اللون الأصفر للتحديد. اختبر اكتشاف الحالة وتغييرها بقارئ الشاشة ولوحة المفاتيح.

أهم ما تعلمته

  • تحدد القيود وترتيب المعدلات سلوك التخطيط.
  • تمثل الموارد قواعد اللغة والاختيارات الاتجاهية.
  • ينقل عنصر التحكم الكامل المعنى ويقبل وسائل إدخال متنوعة.

المراجع الرسمية