এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

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

ভূমিকা

আরও পরামিতি সহ নিউজকার্ড আপডেট করা হচ্ছে

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

ফিগমাতে পরামিতি যোগ করুন

আমাদের কম্পোনেন্টে কন্টেন্ট প্যারামিটার যোগ করা যাক।

ফিগমাতে স্যুইচ করুন। NewsCardTutorial-এ, হিরো-আইটেম ভেরিয়েন্টে থাম্বনেইল ইমেজ লেয়ারটি নির্বাচন করুন (⌘ + ম্যাকে ক্লিক করুন, অথবা Ctrl + ইমেজে Windows এবং Linux-এ ক্লিক করুন)।
রিলে ফর ফিগমা প্লাগইনে, + ক্লিক করুন এবং ড্রপ ডাউন মেনুতে image-content নির্বাচন করুন, তারপর নামটি "থাম্বনেইল" এ পরিবর্তন করুন।
শিরোনাম পাঠ্য স্তর নির্বাচন করুন, + ক্লিক করুন এবং text-content নির্বাচন করুন। লেখকের জন্য একই ধাপগুলি পুনরাবৃত্তি করুন এবং নায়ক-আইটেম ভেরিয়েন্টে তারিখ পাঠ্য স্তরগুলি। তাদের যথাক্রমে "শিরোনাম", "লেখক", এবং "তারিখ" নাম দিন।
প্লাগইনে থাম্বনেইল প্যারামিটারে ক্লিক করুন। লক্ষ্য করুন যে প্রতিটি কম্পোনেন্ট ভেরিয়েন্টে, থাম্বনেইল স্তরটি একটি চিত্র এবং এটি নির্বাচিত।
যেহেতু তিনটি স্তরের একই নাম ("থাম্বনেইল") এবং একই ডেটা টাইপ (ছবি-বিষয়বস্তু) তাই কন্টেন্ট প্যারামিটারটি তিনটি ভেরিয়েন্টেই এর সাথে সংযুক্ত করা হয়েছে৷ এর মানে হল যে একটি প্যারামিটার একাধিক ভেরিয়েন্টে একই ডেটা দেয়। এটি শিরোনাম, লেখক এবং তারিখের পরামিতিগুলির জন্যও সত্য।

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

এখন এই সংস্করণটিকে কোডে আমদানি করার জন্য প্রস্তুত হিসাবে চিহ্নিত করা যাক।

ফিগমা রিলে প্লাগইন খুলুন, যদি ইতিমধ্যে খোলা না থাকে।
বিকাশকারীর সাথে ভাগ করুন ক্লিক করুন।
বিকাশকারীর সাথে শেয়ার করুন স্ক্রিনে, সংস্করণটির জন্য একটি নাম এবং বিবরণ লিখুন।
উদাহরণ শিরোনাম : যোগ করা পরামিতি
উদাহরণ বর্ণনা : কার্ডে সামগ্রীর পরামিতি যোগ করা হয়েছে
Save এ ক্লিক করুন।

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

নিউজকার্ড কম্পোনেন্ট আপডেট করা যাক:

অ্যান্ড্রয়েড স্টুডিওতে, প্রজেক্ট টুল উইন্ডোটি অ্যান্ড্রয়েড ভিউতে রয়েছে তা নিশ্চিত করুন। তারপরে app/ui-packages/news_card/ এ ডান-ক্লিক করুন এবং UI প্যাকেজ আপডেট করুন-এ ক্লিক করুন।
ক্লিক করুন আপনার প্রকল্প তৈরি করতে। এটি আপডেট করা UI প্যাকেজ গ্রহণ করবে এবং কম্পোজযোগ্য কোডের একটি আপডেট সংস্করণ তৈরি করবে।

আপনি যদি app/java (generated)/com/example/hellonews/newscard/NewsCard.kt দেখেন, আপনি দেখতে পাবেন যে আমরা যে বিষয়বস্তু প্যারামিটারগুলি যোগ করেছি ( thumbnail , headline , author , date ) আমাদের কম্পোজেবলের প্যারামিটার তালিকায় উপস্থিত হয়েছে৷

// View 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; don't edit directly.
*/
@Composable
fun NewsCard(
    modifier: Modifier = Modifier,
    view: View = View.HeroItem,
    thumbnail: Painter = EmptyPainter(),
    headline: String = "",
    author: String = "",
    date: String = ""
) {
...

অ্যাপে ইন্টিগ্রেট করুন

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

PostListArticleStories কম্পোজেবল নিয়মিত খবরের জন্য দায়ী।
পোস্টটপ প্যারামিটার শীর্ষস্থানীয় গল্পের প্রতিনিধিত্ব করে।
পোস্ট প্যারামিটার বাকি গল্প প্রতিনিধিত্ব করে.
পোস্টলিস্টঅডিওস্টোরিজ কম্পোজেবল অডিও নিউজ স্টোরি রেন্ডার করে।
এখন হোম স্ক্রিনে আমাদের নিউজকার্ড কম্পোনেন্ট একত্রিত করা যাক।

app/java/com/example/hellonews/ui/home/HomeScreen.kt এ, ফাইলের শীর্ষের কাছে অন্যান্য আমদানি লাইনের পাশে নিম্নলিখিত আমদানিগুলি যোগ করুন: com.example.hellonews.newscard.NewsCard আমদানি করুন
import com.example.hellonews.newscard.View

এখনও HomeScreen.kt- এ, PostListArticleStories- এ স্ক্রোল করুন।

@Composable
fun HomeScreen(...)

@Composable
private fun PostList(...)

@Composable
private fun PostListArticleStoriesSection(...)

@Composable
private fun SearchArticlesSection(...)

@Composable
private fun PostListArticleStories(
    postTop: Post,
    posts: List<Post>,
    createOnTapped: (String, String) -> () -> Unit
) {...}

@Composable
private fun AudioStoriesTitle(...)

@Composable
private fun PostListAudioStories(...)

@Composable
fun Dialog(...)
...

পোস্টটপের জন্য, HeroItem ভিউ ব্যবহার করে আমাদের নতুন আমদানি করা নিউজকার্ডের সাথে পাঠ্য উপাদানটি প্রতিস্থাপন করুন।

@Composable
private fun PostListArticleStories(
    postTop: Post,
    posts: List<Post>,
    createOnTapped: (String, String) -> () -> Unit
) {
    ...
    Column(
        horizontalAlignment = Alignment.Start,
        modifier = ...
    ) {
        Spacer(modifier = Modifier.size(12.dp))
        NewsCard(
            thumbnail = painterResource(postTop.imageId),
            headline = postTop.title,
            author = postTop.metadata.author.name,
            date = postTop.metadata.date,
            view = View.HeroItem
        )
        Spacer(modifier = Modifier.size(12.dp))
        ...
    }
}

প্রতিটি পোস্টের জন্য, ArticleItem ভিউ ব্যবহার করে, আমাদের নতুন আমদানি করা নিউজকার্ডের সাথে পাঠ্য উপাদানটি প্রতিস্থাপন করুন।

@Composable
private fun PostListArticleStories(
    postTop: Post,
    posts: List<Post>,
    createOnTapped: (String, String) -> () -> Unit
) {
    ...
    Column(
        horizontalAlignment = Alignment.Start,
        modifier = ...
    ) {
        ...
        posts.forEach { post ->
            NewsCard(
                thumbnail = painterResource(post.imageId),
                headline = post.title,
                author = post.metadata.author.name,
                date = post.metadata.date,
                view = View.ArticleItem
            )
            Spacer(modifier = Modifier.size(12.dp))
        }
    }
}

আমরা নীচের অডিও গল্পগুলির জন্য একই কাজ করতে পারি। এখনও HomeScreen.kt এ, 260 লাইনের কাছাকাছি, PostListAudioStories- এ স্ক্রোল করুন।

@Composable
fun HomeScreen(...)

@Composable
private fun PostList(...)

@Composable
private fun PostListArticleStoriesSection(...)

@Composable
private fun SearchArticlesSection(...)

@Composable
private fun PostListArticleStories(...)

@Composable
private fun AudioStoriesTitle(...)

@Composable
private fun PostListAudioStories(
    posts: List<Post>,
    createOnTapped: (String, String) -> () -> Unit
) {...}

@Composable
fun Dialog(...)
...

প্রতিটি পোস্টের জন্য, অডিওআইটেম ভিউ ব্যবহার করে, আমাদের নতুন আমদানি করা নিউজকার্ডের সাথে পাঠ্য উপাদানটি প্রতিস্থাপন করুন।

@Composable
    private fun PostListAudioStories(
    posts: List<Post>,
    createOnTapped: (String, String) -> () -> Unit
) {
    Column(
        horizontalAlignment = ...,
        modifier = ...
    ) {
        posts.forEach { post ->
            NewsCard(
                thumbnail = painterResource(post.imageId),
                headline = post.title,
                author = post.metadata.author.name,
                date = post.metadata.date,
                view = View.AudioItem
            )
            Spacer(modifier = Modifier.size(12.dp))
        }
    }
}

ক্লিক করুন আপনার প্রজেক্ট আবার তৈরি করতে এবং প্রিভিউতে ফলাফল দেখতে (স্ক্রিন ভিউ স্প্লিট):

পরবর্তী ধাপ

পরবর্তীতে, আমরা আমাদের অ্যাপে কিছু মিথস্ক্রিয়া যোগ করব ।

{% শব্দার্থে %} {% endverbatim %}

আপনার জন্য প্রস্তাবিত

দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়
ডিজাইনে ইন্টারঅ্যাকশন হ্যান্ডলার যোগ করুন
নকশা বৈকল্পিক হ্যান্ডলিং
অ্যান্ড্রয়েড স্টুডিওতে ডিজাইনগুলিকে কোডে রূপান্তর করুন

{% শব্দার্থে %} {% endverbatim %}