UI প্যাকেজ বুঝুন & জেনারেটেড কোড

UI প্যাকেজ

UI প্যাকেজগুলি হল UI তথ্য বিনিময় করার একটি নতুন নমনীয় উপায়৷ ডিজাইনাররা ফিগমার উপাদান থেকে UI প্যাকেজ তৈরি করতে রিলে ফর ফিগমা প্লাগইন ব্যবহার করে। এটি করা ডেভেলপারদের দ্বারা ব্যবহারের জন্য প্রস্তুত ডিজাইন ঘোষণা করে। ডিজাইনাররা তখন ডেভেলপারদের তাদের ফিগমা ডিজাইন ফাইলের URL প্রদান করে।

ডেভেলপাররা ফিগমা ডিজাইন ফাইল থেকে UI প্যাকেজ আমদানি করতে Android Studio প্লাগইন ব্যবহার করে। একটি অ্যান্ড্রয়েড স্টুডিও প্রকল্পে, একটি UI প্যাকেজে ফন্ট ফাইল, ছবি এবং SVG সহ সংশ্লিষ্ট সম্পদের সাথে আমদানি করা ফিগমা উপাদানগুলির ঘোষণামূলক বিবরণ রয়েছে।

UI প্যাকেজগুলি স্থায়ী শিল্পকর্ম এবং উত্স নিয়ন্ত্রণের জন্য প্রতিশ্রুতিবদ্ধ হতে পারে। যখন একজন বিকাশকারী একটি অ্যান্ড্রয়েড স্টুডিও প্রকল্পে একটি ফিগমা প্যাকেজ আমদানি করে, তখন ফাইলগুলি 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 — UI প্যাকেজ তৈরি এবং আমদানি করতে ব্যবহৃত রিলে সংস্করণ।

এগুলি src/main/ui-packages/[package_name] এর অধীনে সংরক্ষণ করা হয়।

UI প্যাকেজগুলি সরানো হচ্ছে

প্রকল্প থেকে একটি UI প্যাকেজ সরাতে, আপনি ui-packages/ অধীনে ফোল্ডারটি মুছে ফেলতে পারেন। ফোল্ডারটি মুছে ফেলার পরে প্রকল্পটি পুনরায় তৈরি করা তার জেনারেট করা কোডটিকেও সরিয়ে দেয়।

উত্পন্ন কোড ফোল্ডার গঠন

যখন প্রকল্পটি তৈরি হয়, তখন এই UI প্যাকেজগুলি @Composable ফাংশন ধারণকারী জেনারেটেড কোডে পরিণত হয় যা ডেভেলপার আহ্বান করতে পারে। এগুলি build/generated/ অধীনে সংরক্ষণ করা হয়। অ্যান্ড্রয়েড ভিউতে, এগুলি java (generated) হিসাবে প্রদর্শিত হয় এবং আপনার মডিউল ডিরেক্টরির অধীনে res (এই ক্ষেত্রে, app ডিরেক্টরি)।

নিম্নলিখিত স্ক্রিনশটগুলি এই ডিরেক্টরির ফাইলগুলির মধ্য দিয়ে চলে:

• সম্পদ, যেমন ফন্ট এবং ছবি, build/generated/res/relay/ এ কপি করা হয়।

  

• প্রতিটি UI প্যাকেজে তার তৈরি কোড build/generated/source/relay/ অধীনে রাখা আছে। প্রতিটি UI প্যাকেজের জেনারেট করা কোড ফোল্ডারে আমদানি করা উপাদানের সাথে সংশ্লিষ্ট একটি একক ফাইল থাকে। এটিতে Fonts.kt এ শেষ হওয়া একটি একক ফাইলও রয়েছে, যেটিতে উপাদান দ্বারা ব্যবহৃত ফন্ট সম্পদের উল্লেখ রয়েছে।

  

• এছাড়াও একটি রানটাইম লাইব্রেরি রয়েছে, com.google.relay.compose , যা জেনারেট করা কোড দ্বারা ব্যবহৃত কার্যকারিতা প্রদান করে।

  

উত্পন্ন কোড গঠন

কম্পোজেবল

ফিগমার উপাদানগুলি স্তর দিয়ে গঠিত। উদাহরণস্বরূপ, এই ডিজাইনে একটি ফ্রেম লেয়ার হ্যালো কার্ড রয়েছে, যাতে দুটি চাইল্ড লেয়ার রয়েছে, ইমেজ (একটি ইমেজ লেয়ার) এবং টাইটেল (একটি টেক্সট লেয়ার):

যখন এই নকশাটি কোডে অনুবাদ করা হয়, তখন আমরা প্রতিটি স্তরের জন্য পৃথক সংমিশ্রণযোগ্য ফাংশন তৈরি করি, যেখানে ফিগমা স্তরের নামটি কম্পোজযোগ্য ফাংশনের নাম (কোটলিন সিনট্যাক্সের সাথে সামঞ্জস্য করার জন্য পরিবর্তিত)। স্তরগুলি নিম্নরূপ অনুবাদ করা হয়:

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 উপাদান একাধিক বৈকল্পিক থাকে, তাহলে উত্পন্ন কোড প্রতিটি বৈকল্পিক সম্পত্তির জন্য একটি enum অন্তর্ভুক্ত করে। প্রতিটি বৈকল্পিক enum-এর মানগুলি সেই বৈকল্পিক সম্পত্তির মানগুলির সাথে মিলে যায়৷ কম্পোজেবল প্রতিটি ভেরিয়েন্ট 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 কম্পোনেন্টের প্রতিটি বিষয়বস্তুর প্যারামিটার এবং ইন্টারঅ্যাকশন হ্যান্ডলারকে কম্পোজেবলের একটি প্যারামিটারে অনুবাদ করা হয়। নিচের 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 = {}
) {...}