انتقال تم‌های XML به Material 3 در Compose

وقتی Compose را در یک برنامه موجود معرفی می‌کنید، باید تم‌های XML متریال خود را برای استفاده از MaterialTheme برای کامپوننت‌های Compose منتقل کنید. این بدان معناست که تم‌بندی برنامه شما دو منبع اعتبار خواهد داشت: تم مبتنی بر View و تم Compose. هرگونه تغییر در استایل شما باید در چندین مکان انجام شود. پس از انتقال کامل برنامه به Compose، تم‌بندی XML خود را حذف کنید.

شما می‌توانید از ابزار Material Theme Builder برای انتقال رنگ‌ها استفاده کنید.

وقتی مهاجرت از XML به Compose را شروع می‌کنید، قالب‌بندی را به قالب‌بندی Material 3 Compose منتقل کنید.

واژه‌نامه

مدت تعریف
MaterialTheme تابع قابل ترکیب که تم‌بندی (رنگ‌ها، تایپوگرافی، شکل‌ها) را برای کامپوننت‌های رابط کاربری ترکیب‌شده فراهم می‌کند.
Shape یک شیء Compose که برای تعریف شکل‌های کامپوننت سفارشی برای یک MaterialTheme استفاده می‌شود.
Typography یک شیء Compose که برای تعریف سبک‌های متن سفارشی (خانواده‌های فونت، اندازه‌ها، وزن‌ها) برای یک MaterialTheme استفاده می‌شود.
Color یک شیء Compose که برای تعریف طرح‌های رنگی سفارشی برای MaterialTheme استفاده می‌شود.
قالب XML سیستم قالب‌بندی اندروید که در فایل‌های XML تعریف شده و توسط سیستم View استفاده می‌شود.

محدودیت‌ها

قبل از مهاجرت، از محدودیت‌های زیر آگاه باشید:

  • این راهنما فقط بر مهاجرت به Material 3 تمرکز دارد. برای مهاجرت از سیستم‌های طراحی جایگزین، به Material 2 یا سیستم‌های طراحی سفارشی در Compose مراجعه کنید.
  • هدف نهایی، مهاجرت کامل به Compose است که امکان حذف تم‌بندی XML را فراهم می‌کند. این راهنما نحوه مهاجرت را توضیح می‌دهد، اما نحوه حذف نهایی تم‌بندی XML را توضیح نمی‌دهد.

مرحله ۱: ارزیابی سیستم طراحی

مشخص کنید که از کدام سیستم طراحی در پروژه XML View استفاده شده است. مسیر مهاجرت و مراحل لازم برای مهاجرت سیستم طراحی موجود به Material 3 در Compose را تجزیه و تحلیل کنید.

مرحله ۲: شناسایی فایل‌های منبع قالب

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

منابعی مانند رشته‌ها می‌توانند به همان صورت که هستند دوباره استفاده شوند و نیازی به انتقال ندارند.

مرحله ۳: انتقال رنگ‌ها

طرح‌های رنگی تیره و روشن را از XML به معادل‌های آنها در Material 3 Compose منتقل کنید.

مرحله ۴: انتقال شکل‌ها و تایپوگرافی سفارشی

  • اگر برنامه شما از اشکال سفارشی استفاده می‌کند:

    1. در کد Compose خود، یک شیء Shape تعریف کنید تا تعاریف شکل XML شما را تکرار کند.
    2. این شیء Shape را به MaterialTheme خود ارائه دهید.

      برای جزئیات بیشتر، به شکل‌ها مراجعه کنید.

  • اگر برنامه شما از تایپوگرافی سفارشی استفاده می‌کند:

    1. در کد Compose خود، یک شیء Typography در کد Compose خود تعریف کنید تا سبک‌های متن XML و تعاریف فونت شما را تکرار کند.
    2. این شیء Typography را به MaterialTheme خود ارائه دهید.

      برای جزئیات بیشتر، به تایپوگرافی مراجعه کنید.

مرحله ۵: اعتبارسنجی انتقال قالب

همیشه از مقادیر تم موجود در تم XML اصلی به عنوان منبع حقیقت برای تم متریال جدید در Compose استفاده کنید. هرگز در طول مهاجرت مقادیر تم جدیدی اختراع نکنید تا ثبات برند حفظ شود و از پسرفت بصری جلوگیری شود.

تأیید کنید که تمام مقادیر جدید تم Compose با مقادیر XML موجود مطابقت دارند. هیچ مقدار منتقل شده‌ای را hardcode نکنید.