নকশা বৈকল্পিক হ্যান্ডলিং

ফিগমা-এ, ভিন্ন ভিন্ন অবস্থা বা আকারের মতো একই উপাদানের ভিন্ন ভিন্নতাকে একত্রে গোষ্ঠীভুক্ত করতে ভেরিয়েন্ট ব্যবহার করা হয়। কোডে অনুবাদ করা হলে রিলে একটি উপাদানের ভেরিয়েন্ট সংরক্ষণ করে। এই বিভাগে, আমরা দেখব কিভাবে রিলে ডিজাইনের ভেরিয়েন্ট পরিচালনা করে।

শুরু বিন্দু

আমরা একটি Figma ফাইল দিয়ে শুরু করব যাতে তিনটি রূপ সহ একটি নিউজ কার্ড উপাদান রয়েছে:

• হিরো-আইটেম সবচেয়ে গুরুত্বপূর্ণ সংবাদ নিবন্ধের জন্য
• নিবন্ধ-আইটেম একটি সাধারণ নিবন্ধের জন্য
• অডিও-আইটেম এমন একটি নিবন্ধের জন্য যা আপনি পড়ার পরিবর্তে শোনেন

ফিগমা উদাহরণ অনুলিপি করুন

এই টিউটোরিয়ালের উদাহরণ হিসেবে আমরা একটি বিদ্যমান ফিগমা ফাইল ব্যবহার করব। আপনি আপনার Figma অ্যাকাউন্টে লগ ইন করেছেন তা নিশ্চিত করুন৷

1. আপনার কম্পিউটারে HelloNews.fig ডাউনলোড করুন।

2. ফিগমাতে, ফাইল ব্রাউজারে যান। বাম-পাশ বরাবর, ড্রাফ্টের উপর হোভার করুন। A + আইকন প্রদর্শিত হবে - + আইকনে ক্লিক করুন, তারপর আমদানি করুন । HelloNews.fig ফাইলটি নির্বাচন করুন যা আপনি এইমাত্র ডাউনলোড করেছেন। এটি 10 ​​সেকেন্ড থেকে এক মিনিট পর্যন্ত যেকোনো জায়গায় নিতে পারে।

   

3. ফিগমাতে আমদানি করা ফাইলটি খুলুন।

একটি UI প্যাকেজ তৈরি করুন

রিলে ফর ফিগমা প্লাগইন আমাদের কম্পোনেন্টে অতিরিক্ত তথ্য যোগ করে, তাই আমরা আমাদের ডেভেলপারদের সাথে কাজ করতে পারি যারা তাদের কোডে আমাদের কম্পোনেন্ট ব্যবহার করবে।

1. আপনার ফাইলে ফিগমা প্লাগইন এর জন্য রিলে খুলুন (মেনু বারে: প্লাগইনস > ফিগমার জন্য রিলে )। শুরু করুন ক্লিক করুন।

2. উপাদানটি নির্বাচন করুন এবং UI প্যাকেজ তৈরি করুন ক্লিক করুন।

   

3. UI প্যাকেজ নির্বাচন করে, সারাংশ বাক্সে একটি বিবরণ যোগ করুন। উদাহরণস্বরূপ: "নিউজ কার্ড উপাদান একটি তালিকার জন্য সংবাদ আইটেম প্রদর্শন করার উদ্দেশ্যে"।

   

নামযুক্ত সংস্করণ সংরক্ষণ করুন

এখন আপনি একটি UI প্যাকেজ তৈরি করেছেন, আপনার উপাদানটি ডেভেলপমেন্ট টিমের সাথে ভাগ করার জন্য প্রস্তুত করুন।

1. ফিগমা রিলে প্লাগইন খুলুন, যদি ইতিমধ্যে খোলা না থাকে।
2. বিকাশকারীর সাথে ভাগ করুন ক্লিক করুন।
3. বিকাশকারীর সাথে শেয়ার করুন স্ক্রীন থেকে, আপনি সংস্করণ ইতিহাস সংরক্ষণ বিভাগে একটি নতুন সংস্করণের নাম এবং বিবরণ লিখতে পারেন৷

4. Save এ ক্লিক করুন।

   উদাহরণ শিরোনাম : প্রাথমিক নতুন কার্ড

   উদাহরণ বর্ণনা : সংবাদ নিবন্ধ আইটেমগুলির প্রথম পুনরাবৃত্তি

অ্যান্ড্রয়েড স্টুডিও প্রকল্প ডাউনলোড করুন

এই টিউটোরিয়ালের অ্যান্ড্রয়েড স্টুডিও অংশের জন্য, আমরা একটি পূর্ব-কনফিগার করা অ্যান্ড্রয়েড স্টুডিও প্রকল্প ব্যবহার করব। এই প্রকল্পে একটি অ্যাপ রয়েছে যা একটি প্লেইন টেক্সট ফরম্যাটে সংবাদ নিবন্ধ প্রদর্শন করে।

1. HelloNews.zip ফাইলের নমুনা ডাউনলোড করুন।
2. ফাইলটিকে আনজিপ করতে ডাবল-ক্লিক করুন, যা HelloNews নামে একটি ফোল্ডার তৈরি করবে। এটি আপনার হোম ফোল্ডারে সরান।
3. অ্যান্ড্রয়েড স্টুডিওতে ফিরে যান। File > Open এ যান, আপনার হোম ফোল্ডারে নেভিগেট করুন, HelloNews নির্বাচন করুন এবং Open এ ক্লিক করুন।
4. আপনি যখন প্রকল্পটি খুলবেন, তখন অ্যান্ড্রয়েড স্টুডিও আপনাকে জিজ্ঞাসা করবে আপনি প্রকল্পে বিশ্বাস করেন কিনা। ট্রাস্ট প্রজেক্টে ক্লিক করুন।

অ্যান্ড্রয়েড স্টুডিওতে আমদানি করুন

প্রকল্পে আমাদের ফিগমা উপাদান আমদানি করা যাক।

1. ফিগমা-এ ফিরে, নিউজ কার্ড টিউটোরিয়াল ফিগমা ফাইলের URL কপি করুন। আমরা আমাদের উপাদান আমদানি করতে এই URL ব্যবহার করব. ফিগমার উপরের ডানদিকের কোণায়, শেয়ার বোতামে ক্লিক করুন। খোলা ডায়ালগ বক্সে, অনুলিপি লিঙ্ক ক্লিক করুন।

   

2. অ্যান্ড্রয়েড স্টুডিওতে HelloNews প্রকল্পে যান। অ্যান্ড্রয়েড স্টুডিও মেনু বার থেকে ফাইল > নতুন > UI প্যাকেজ আমদানি করুন… এ যান।

   

3. আপনার Figma ফাইলের URL টি পেস্ট করুন এবং Next এ ক্লিক করুন।

   

   

   1. ফাইলটি আনার কাজ শেষ হয়ে গেলে (যা কিছু সময় নিতে পারে), Finish এ ক্লিক করুন।

   

4. ক্লিক করুন আপনার প্রকল্প তৈরি করতে। এতে এক মিনিট বা তার বেশি সময় লাগতে পারে।

   

প্রাকদর্শন অ্যাপ্লিকেশন এবং উপাদান

1. অ্যান্ড্রয়েড ভিউতে, app/java/com/example/hellonews/ui/home/HomeScreen.kt খুলুন, আপনি অ্যাপটির একটি প্রিভিউ দেখতে পাবেন, যা অডিও গল্পের উপরে প্রিন্ট গল্প সহ একটি প্লেইন টেক্সট ফরম্যাটে বেশ কয়েকটি সংবাদ নিবন্ধ প্রদর্শন করে। .

   

2. app/java (generated)/com/example/hellonews/newscard/NewsCard.kt খুলুন। এটি আমাদের ফিগমা উপাদানের জন্য জেনারেট করা জেটপ্যাক কম্পোজ কোড। পূর্বরূপ থেকে, আমরা দেখতে পাচ্ছি যে নিউজকার্ড উপাদানের তিনটি রূপ Figma থেকে কোডে অনুবাদ করা হয়েছে। আসুন কোডটি ঘনিষ্ঠভাবে দেখে নেওয়া যাক।

   

3. View enum আমাদের এই উপাদানটির জন্য কোন বৈকল্পিকটি ব্যবহার করতে হবে তা চয়ন করতে দেয়। এনামের নাম এবং এর মানগুলি আমাদের ফিগমা উপাদানের রূপগুলি থেকে উদ্ভূত হয়েছিল। এটি আমাদের নিউজকার্ড কম্পোজেবলের view প্যারামিটারে ব্যবহৃত হয়।

   

4. নিউজকার্ড কম্পোজেবল UI প্যাকেজ থেকে তৈরি করা হয়েছে। এতে View টাইপের একটি প্যারামিটার রয়েছে, যা নিউজ কার্ডের বৈকল্পিককে তাৎক্ষণিকভাবে সেট করে।

   package com.example.myapplication.newscard
   
   import ...
   
   // Design to select for NewsCard
   enum class View {
       HeroItem,
       ArticleItem,
       AudioItem
   }
   
   /**
   * News card component intended to display news items for a list.
   *
   * 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
   ) {...}
   
   

পরবর্তী আপ

আমরা এখনও নিউজকার্ড ব্যবহার করার জন্য পুরোপুরি প্রস্তুত নই। কম্পোনেন্টটি জানে না কিভাবে বিভিন্ন সংবাদের গল্প প্রদর্শন করতে হয়, শুধুমাত্র ফিগমাতে একই হার্ডকোড করা। সুতরাং, যদি আমরা এখন কম্পোনেন্ট যোগ করি, আমরা যা পাব তা হল একই সংবাদের পুনরাবৃত্তি। নিউজকার্ডের কোন অংশগুলি গতিশীল ডেটা দিয়ে পূর্ণ করা উচিত তা নির্দিষ্ট করার জন্য আমাদের একটি উপায় প্রয়োজন৷

বিষয়বস্তুর পরামিতি

এই বিভাগে, আমরা NewsCard উপাদানে বিষয়বস্তুর পরামিতি যোগ করব।