درک بسته UI & کد تولید شده

بسته UI

بسته‌های رابط کاربری یک راه انعطاف‌پذیر جدید برای تبادل اطلاعات رابط کاربری هستند. طراحان از پلاگین Relay for Figma برای ایجاد بسته های UI از اجزای موجود در Figma استفاده می کنند. انجام این کار طراحی را برای استفاده توسط توسعه دهندگان آماده می کند. سپس طراحان URL فایل طراحی Figma را در اختیار توسعه دهندگان قرار می دهند.

توسعه دهندگان از افزونه Android Studio برای وارد کردن بسته های رابط کاربری از فایل طراحی Figma استفاده می کنند. در یک پروژه اندروید استودیو، یک بسته UI حاوی توضیحات توضیحی اجزای Figma وارد شده به همراه دارایی‌های مرتبط، از جمله فایل‌های فونت، تصاویر و SVG است.

بسته‌های رابط کاربری مصنوعات دائمی هستند و می‌توانند به کنترل منبع متعهد شوند. هنگامی که یک توسعه دهنده یک بسته Figma را در یک پروژه Android Studio وارد می کند، فایل ها در پوشه ui-packages به پروژه اضافه می شوند. در اینجا یک نمونه بسته UI وارد شده است:

یک پروژه با بسته UI وارد شده حاوی فایل های زیر است:

• [component_name].json - یک فایل JSON که مؤلفه را توصیف می کند (به عنوان مثال story_card.json ).
• config.json - ابرداده را برای بسته UI خاص ذخیره می کند.
• fonts/ — پوشه ای که در صورت وجود، دارایی های فونت مورد استفاده توسط مؤلفه ذخیره می شود.
• *.png — دارایی‌های تصویری مورد استفاده در مؤلفه (به عنوان مثال menu.png )، در صورت وجود.
• [component_name]_preview.png — تصویر پیش‌نمایش مؤلفه (به عنوان مثال story_card_preview.png ).
• *.svg - دارایی‌های گرافیکی برداری که در مؤلفه مورد استفاده قرار می‌گیرند (به عنوان مثال، یک مثلث)، در صورت وجود.
• FONTS.txt - لیستی از فونت های استفاده شده، در صورت وجود.
• DEPS.txt - نام هر مؤلفه فرزند.
• VERSION.txt - نسخه Relay که برای ایجاد و وارد کردن بسته UI استفاده می شود.

اینها در src/main/ui-packages/[package_name] ذخیره می‌شوند.

حذف بسته های رابط کاربری

برای حذف یک بسته UI از پروژه، می توانید پوشه زیر ui-packages/ را حذف کنید. ساخت مجدد پروژه پس از حذف پوشه، کد تولید شده آن را نیز حذف می کند.

ساختار پوشه کد تولید شده

هنگامی که پروژه ساخته می شود، این بسته های رابط کاربری به کد تولید شده حاوی توابع @Composable تبدیل می شوند که توسعه دهنده می تواند آنها را فراخوانی کند. اینها تحت build/generated/ ذخیره می شوند. در نمای اندروید، اینها به صورت java (generated) نشان داده می شوند و در زیر پوشه ماژول شما (در این مورد، دایرکتوری app ) res .

اسکرین شات های زیر در میان فایل های این فهرست راه اندازی می شوند:

• منابع، مانند فونت ها و تصاویر، در build/generated/res/relay/ کپی می شوند.

  

• هر بسته UI کد تولید شده خود را در قسمت build/generated/source/relay/ قرار داده است. پوشه کد تولید شده هر بسته UI دارای یک فایل منفرد مربوط به مؤلفه وارد شده است. همچنین حاوی یک فایل منفرد است که به Fonts.kt ختم می‌شود، که حاوی ارجاعاتی به دارایی‌های فونت استفاده‌شده توسط مؤلفه است.

  

• همچنین یک کتابخانه زمان اجرا com.google.relay.compose وجود دارد که عملکرد مورد استفاده توسط کد تولید شده را فراهم می کند.

  

ساختار کد تولید شده

ترکیب پذیر

اجزای موجود در Figma از لایه ها تشکیل شده اند. به عنوان مثال، این طرح شامل یک لایه فریم Hello Card است که شامل دو لایه فرزند، Image (یک لایه تصویر) و عنوان (یک لایه متن) است:

هنگامی که این طرح به کد ترجمه می شود، برای هر لایه توابع قابل ترکیب جداگانه ایجاد می کنیم، جایی که نام لایه Figma نام تابع قابل ترکیب است (برای مطابقت با نحو Kotlin اصلاح شده است). لایه ها به صورت زیر ترجمه می شوند:

1. لایه کارت سلام :

   @Composable
   fun HelloCard(
     modifier: Modifier = Modifier,
     title: String
   ) {
     TopLevel(modifier = modifier) {
         Image()
         Title(title = title)
     }
   ]
   

2. لایه تصویر :

   @Composable
   fun Image(modifier: Modifier = Modifier) {
     Image(...)
   }
   

3. لایه عنوان :

   @Composable
   fun Title(
     title: String,
     modifier: Modifier = Modifier
   ) {
     Text(...)
   }
   

انواع و پارامترهای Figma ترجمه شده است

اگر یک جزء Figma دارای چندین نوع باشد، کد تولید شده شامل یک عدد برای هر ویژگی متغیر است. مقادیر موجود در هر متغیر enum با مقدار آن ویژگی متغیر مطابقت دارد. composable شامل یک پارامتر برای هر نوع enum است.

// Design to select for NewsCard
enum class View {
    HeroItem,
    ArticleItem,
    AudioItem
}

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    onNewsCardTapped: () -> Unit = {},
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onMenuTapped: () -> Unit = {}
) {
       when (view) {
           View.HeroItem -> TopLevelViewHeroItem(...) {
               ContentViewHeroItem { ... }
           }
           View.ArticleItem -> TopLevelViewArticleItem(...) {
               ContentViewArticleItem { ... }
           }
           View.AudioItem -> TopLevelViewAudioItem(...) {
               ContentViewAudioItem { ... }
           }
       }
   }
}

هر پارامتر محتوا و کنترل کننده تعامل یک جزء Figma به پارامتری از composable ترجمه می شود. NewsCard زیر دارای چهار پارامتر محتوا (یک تصویر و سه رشته) و دو کنترل کننده تعامل (دو پارامتر آخر) است.

/**
 *   This composable was generated from the UI Package 'news_card'.
 *   Generated code; do not edit directly
 */
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    thumbnail: Painter,
    headline: String,
    author: String,
    date: String,
    onNewsCardTapped: () -> Unit = {},
    onMenuTapped: () -> Unit = {}
) {...}