طرح بندی کارت کلاسیک عریض با شبکه

نماد امتیاز چهار ستاره

دستورالعمل‌های طراحی اپلیکیشن تلویزیون، نوعی کارت به نام کارت کلاسیک Wide را تعریف می‌کنند که یک تصویر و بلوک محتوای توصیفی آن را در کنار هم نمایش می‌دهد. هنگام ساخت طرح‌بندی‌های دوبعدی پیچیده برای صفحه نمایش تلویزیون، استفاده از موقعیت‌یابی سنتی مبتنی بر مختصات یا کانتینرهای Row و Column تودرتو می‌تواند خواندن، نگهداری و اصلاح کد شما را دشوار کند. کارت کلاسیک Wide یک مورد استفاده ایده‌آل برای Jetpack Compose Grid API است که به شما کمک می‌کند عناصر کنار هم را به طور تمیز با استفاده از نواحی طرح‌بندی دوبعدی معنایی و تعریف‌شده توسط کاربر، ساختار دهید.

مشخصات کامپوننت کارت کلاسیک عریض که پنج ناحیه طرح‌بندی نامگذاری شده را نشان می‌دهد: تصویر، عنوان، زیرعنوان، توضیحات و متن اضافی.
شکل ۱. کارت کلاسیک عریض با پنج ناحیه نامگذاری شده: ناحیه تصویر و چهار ناحیه متن در بلوک محتوا.

بهترین شیوه‌ها

طرح‌بندی کارت را با Grid پیاده‌سازی کنید. استفاده از کانتینر Grid با جدا کردن ابعاد فیزیکی طرح‌بندی از قرارگیری آیتم‌های فرزند، خوانایی کد را بهبود می‌بخشد. به جای تکیه بر شاخص‌های دقیق track، ناحیه‌های نامگذاری‌شده معنایی را با تابع area تعریف کنید و composableهای فرزند را با اصلاح‌کننده gridItem قرار دهید. اندازه‌بندی انعطاف‌پذیر track، مانند GridTrackSize.Auto و minmax(0.dp, 1.fr) را با فاصله‌های دقیق track ( gap(row = 8.dp, column = 16.dp) ) ترکیب کنید تا اجزای پیچیده کارت کنار هم را به طور واضح و قوی سازماندهی کنید.

مواد لازم

  • Grid : یک طرح‌بندی کانتینر دوبعدی در Jetpack Compose که کامپوننت‌های فرزند را بر اساس پیکربندی لامبدا در ردیف‌ها و ستون‌ها مرتب می‌کند.
  • gridItem : یک افزونه‌ی Modifier که یک عنصر رابط کاربری فرزند را با یک areaId خاص درون یک طرح‌بندی Grid مرتبط می‌کند.
  • area : یک تابع DSL پیکربندی درون GridConfigurationScope که یک areaId معنایی را به محدوده‌ها یا محدوده‌های سطر و ستون خاص نگاشت می‌کند.
  • Card : یک ظرف قابل ترکیب با طراحی متریال که عناصر رابط کاربری و استایل‌بندی مرتبط را گروه‌بندی می‌کند.
  • GridTrackSize.MinMax : یک ویژگی اندازه‌گیری مسیر که محدوده‌های انعطاف‌پذیر ( min و max ) را برای ابعاد سطر یا ستون تعریف می‌کند.
  • GridTrackSize.Auto : یک ویژگی اندازه‌گیری مسیر که به طور خودکار مسیر ردیف یا ستون را متناسب با محتوای آن اندازه می‌دهد ( column(GridTrackSize.Auto) )
  • gap (gap): یک تابع پیکربندی که فاصله عمودی ( row ) و افقی ( column ) بین مسیرهای شبکه را مشخص می‌کند.

مراحل

شناسه‌های ناحیه را تعریف کنید، مسیرهای شبکه و نواحی را پیکربندی کنید، سپس کامپوننت‌های فرزند را قرار دهید.

۱. تعریف شناسه‌های حوزه معنایی

ابتدا، یک نمایش ایمن از نوع داده از نواحی درون طرح‌بندی کارت کلاسیک Wide خود ایجاد کنید. یک کلاس enum از اشتباهات تایپی رشته‌ای جلوگیری می‌کند و ایمنی زمان کامپایل را هنگام نگاشت مسیرها و قرار دادن آیتم‌های فرزند فراهم می‌کند. 

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

۲. مسیرهای شبکه دوبعدی و نواحی نامگذاری شده را پیکربندی کنید

درون لامبدا config Grid composable خود، ستون‌ها و ردیف‌هایی را که ساختار کارت را تشکیل می‌دهند، تعریف کنید. برای ستون تصویر 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
}

۳. کامپوننت‌های فرزند را با استفاده از اصلاح‌کننده 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 خود با Grid و نواحی نامگذاری شده، به تفکیک تمیزی بین مسیرهای طرح فیزیکی، مختصات ناحیه و قرارگیری قابل ترکیب فرزند دست می‌یابید. این ساختار، طرح شما را خوانا و قابل نگهداری می‌کند و در عین حال از دستورالعمل‌های طراحی برنامه تلویزیونی برای اجزای تصویر کوچک و توضیحات در کنار هم پیروی می‌کند.

منابع اضافی