تنسيق بطاقة كلاسيكية عريضة مع شبكة

رمز التقييم بأربع نجوم

تحدّد إرشادات تصميم تطبيقات بث تلفزيوني نوعًا من البطاقات يُسمى البطاقة الكلاسيكية العريضة، وهي تعرض صورة وكتلة المحتوى الوصفي جنبًا إلى جنب. عند إنشاء تصاميم ثنائية الأبعاد معقّدة لشاشات التلفزيون، يمكن أن يؤدي استخدام تحديد المواضع التقليدي المستند إلى الإحداثيات أو حاويات Row وColumn المتداخلة بشكل كبير إلى صعوبة قراءة الرمز البرمجي وصيانته وإعادة تصنيعه. تُعدّ بطاقة Wide classic حالة استخدام مثالية لواجهة برمجة التطبيقات Grid في Jetpack Compose، ما يساعدك في تنظيم العناصر جنبًا إلى جنب بشكل واضح باستخدام مساحات التنسيق الثنائي الأبعاد الدلالية التي يحدّدها المستخدم.

مواصفات مكوّن البطاقة الكلاسيكية العريضة الذي يعرض خمسة مساحات تخطيط مسماة: الصورة والعنوان والعنوان الفرعي والوصف والنص الإضافي
الشكل 1. بطاقة كلاسيكية عريضة تتضمّن خمس مناطق محدّدة: منطقة الصورة وأربع مناطق نصية في مربّع المحتوى

أفضل الممارسات

نفِّذ تنسيق البطاقة باستخدام Grid. يؤدي استخدام الحاوية Grid إلى تحسين سهولة قراءة الرمز البرمجي من خلال فصل أبعاد التنسيق الفعلي عن موضع العنصر التابع. بدلاً من الاعتماد على فهارس المسارات الدقيقة، حدِّد مناطق مُسمّاة دلاليًا باستخدام الدالة area وضَع عناصر قابلة للإنشاء تابعة باستخدام المعدِّل gridItem. يمكنك الجمع بين أحجام المسارات المرنة، مثل GridTrackSize.Auto وminmax(0.dp, 1.fr)، مع فجوات المسارات الدقيقة (gap(row = 8.dp, column = 16.dp)) لتنظيم مكوّنات البطاقات المعقّدة جنبًا إلى جنب بشكل واضح وقوي.

المكوّنات

  • ‫Grid: تصميم حاوية ثنائية الأبعاد في Jetpack Compose لترتيب العناصر القابلة للإنشاء التابعة في صفوف وأعمدة استنادًا إلى دالة lambda خاصة بالإعداد
  • ‫gridItem: إضافة Modifier تربط عنصرًا ثانويًا في واجهة المستخدم بعنصر areaId محدّد الاسم داخل تنسيق Grid
  • area: دالة DSL خاصة بالإعدادات ضمن GridConfigurationScope تربط areaId بنطاقات أو مدى صفوف وأعمدة معيّنة
  • ‫Card: دالة مركّبة للحاوية في التصميم المتعدد الأبعاد تجمع بين عناصر واجهة المستخدم ذات الصلة والتصميم
  • ‫GridTrackSize.MinMax: هي سمة لتحديد حجم المسار تحدّد حدودًا مرنة (min وmax) لأبعاد الصف أو العمود
  • ‫GridTrackSize.Auto: سمة لتحديد حجم المسار، وتعمل على تحديد حجم صف أو عمود المسار تلقائيًا ليتناسب مع المحتوى (column(GridTrackSize.Auto))
  • ‫gap: دالة ضبط تحدّد المسافة العمودية (row) والأفقية (column) بين مسارات الشبكة

الخطوات

حدِّد معرّفات المناطق، واضبط مسارات الشبكة والمناطق، ثم ضَع العناصر القابلة للإنشاء التابعة.

1. تحديد معرّفات المنطقة الدلالية

أولاً، أنشئ تمثيلاً آمنًا من حيث النوع للمناطق داخل تخطيط بطاقة Wide classic. يتجنّب الصف enum أخطاء الكتابة في السلاسل النصية ويوفر أمانًا في وقت الترجمة البرمجية عند ربط المقاطع الموسيقية ووضع العناصر الثانوية.

enum class CardArea {
    Image,
    Title,
    Subtitle,
    Description,
    ExtraText,
}

2. ضبط مسارات الشبكة الثنائية الأبعاد والمناطق المُسمّاة

داخل Grid العنصر القابل للإنشاء config lambda، حدِّد الأعمدة والصفوف التي تشكّل بنية البطاقة. استخدِم GridTrackSize.Auto لعمود الصور حتى يتم تضمين عرض الصورة المصغّرة بشكل سليم. استخدِم minmax(0.dp, 1.fr) لعمود المحتوى كي يتوسّع بشكل مرن على عرض البطاقة المتبقي. حدِّد تباعد المسارات باستخدام gap(row = 8.dp, column = 16.dp). ربط معرّفات CardArea بإحداثيات المسار المادي باستخدام الدالة area

Grid(
    config = {
        // Define columns: left column for image, right for content
        column(GridTrackSize.Auto)
        column(minmax(0.dp, 1.fr))

        // Define row tracks for the vertical content stack
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)
        row(GridTrackSize.Auto)

        // Map semantic identifiers to grid coordinates and spans
        area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
        area(CardArea.Title, row = 1, column = 2)
        area(CardArea.Subtitle, row = 2, column = 2)
        area(CardArea.Description, row = 3, column = 2)
        area(CardArea.ExtraText, row = 4, column = 2)

        gap(row = 8.dp, column = 16.dp)
    }
) {
    // Child elements placed in Step 3
}

3- وضع عناصر قابلة للإنشاء تابعة باستخدام المعدِّل gridItem

بعد ضبط المسارات والمناطق، ضَع كل عنصر في واجهة المستخدم الفرعية بشكل دلالي بحت باستخدام المعدِّل gridItem. يمكنك تعريف العناصر القابلة للإنشاء الفرعية بأي ترتيب. يضع الحاوية Grid كل عنصر مباشرةً في المنطقة الثنائية الأبعاد المخصّصة له تلقائيًا.

@Composable
fun WideClassicCard(
    imageContent: @Composable () -> Unit,
    title: String,
    subtitle: String,
    description: String,
    extraText: String,
    modifier: Modifier = Modifier,
) {
    Card(modifier = modifier) {
        Grid(
            config = {
                // Define columns: left column for image, right for content
                column(GridTrackSize.Auto)
                column(minmax(0.dp, 1.fr))

                // Define row tracks for the vertical content stack
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)
                row(GridTrackSize.Auto)

                // Map semantic identifiers to grid coordinates and spans
                area(CardArea.Image, row = 1, column = 1, rowSpan = 4)
                area(CardArea.Title, row = 1, column = 2)
                area(CardArea.Subtitle, row = 2, column = 2)
                area(CardArea.Description, row = 3, column = 2)
                area(CardArea.ExtraText, row = 4, column = 2)

                gap(row = 8.dp, column = 16.dp)
            },
        ) {
            Box(modifier = Modifier.gridItem(CardArea.Image)) {
                imageContent()
            }
            Text(
                text = title,
                style = MaterialTheme.typography.titleLarge,
                modifier = Modifier
                    .gridItem(CardArea.Title)
                    .padding(top = 16.dp, end = 16.dp),
            )

            Text(
                text = subtitle,
                style = MaterialTheme.typography.titleMedium,
                modifier = Modifier
                    .gridItem(CardArea.Subtitle)
                    .padding(end = 16.dp),
            )

            Text(
                text = description,
                style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier
                    .gridItem(CardArea.Description)
                    .padding(end = 16.dp),
            )

            Text(
                text = extraText,
                style = MaterialTheme.typography.labelSmall,
                modifier = Modifier
                    .gridItem(CardArea.ExtraText)
                    .padding(bottom = 16.dp, end = 16.dp),
            )
        }
    }
}

النتائج

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

مراجع إضافية