লেআউট বেসিক রচনা করুন

জেটপ্যাক কম্পোজ আপনার অ্যাপের UI ডিজাইন এবং তৈরি করা অনেক সহজ করে তোলে। রচনা রাষ্ট্রকে UI উপাদানে রূপান্তরিত করে, এর মাধ্যমে:

1. উপাদানের রচনা
2. উপাদানের বিন্যাস
3. উপাদানের অঙ্কন

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

রচনায় লেআউটের লক্ষ্য

লেআউট সিস্টেমের জেটপ্যাক কম্পোজ বাস্তবায়নের দুটি প্রধান লক্ষ্য রয়েছে:

• উচ্চ কর্মক্ষমতা
• সহজেই কাস্টম লেআউট লেখার ক্ষমতা

কম্পোজেবল ফাংশনের মৌলিক বিষয়

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

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

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}
LayoutBasicsSnippets.kt

আপনি কীভাবে সেগুলিকে সাজাতে চান তার নির্দেশিকা ছাড়াই, রচনা করুন পাঠ্য উপাদানগুলিকে একে অপরের উপরে স্ট্যাক করে, তাদের অপঠনযোগ্য করে তোলে:

কম্পোজ আপনার UI উপাদানগুলিকে সাজাতে সাহায্য করার জন্য ব্যবহারের জন্য প্রস্তুত লেআউটগুলির একটি সংগ্রহ প্রদান করে এবং আপনার নিজস্ব, আরও বিশেষায়িত লেআউটগুলিকে সংজ্ঞায়িত করা সহজ করে তোলে৷

স্ট্যান্ডার্ড লেআউট উপাদান

অনেক ক্ষেত্রে, আপনি শুধু কম্পোজের স্ট্যান্ডার্ড লেআউট উপাদান ব্যবহার করতে পারেন।

স্ক্রিনে উল্লম্বভাবে আইটেম রাখতে Column ব্যবহার করুন।

@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}
LayoutBasicsSnippets.kt

একইভাবে, স্ক্রিনে অনুভূমিকভাবে আইটেম রাখতে Row ব্যবহার করুন। Column এবং Row উভয়ই তাদের মধ্যে থাকা উপাদানগুলির প্রান্তিককরণ কনফিগার করতে সমর্থন করে।

@Composable
fun ArtistCardRow(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}
LayoutBasicsSnippets.kt

অন্যটির উপরে উপাদান রাখতে Box ব্যবহার করুন। Box এটিতে থাকা উপাদানগুলির নির্দিষ্ট প্রান্তিককরণ কনফিগার করা সমর্থন করে।

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}
LayoutBasicsSnippets.kt

প্রায়শই এই বিল্ডিং ব্লকগুলি আপনার প্রয়োজন। আপনি এই লেআউটগুলিকে আরও বিস্তৃত লেআউটে একত্রিত করতে আপনার নিজস্ব কম্পোজযোগ্য ফাংশন লিখতে পারেন যা আপনার অ্যাপের জন্য উপযুক্ত।

একটি Row মধ্যে শিশুদের অবস্থান সেট করতে, horizontalArrangement এবং verticalAlignment আর্গুমেন্ট সেট করুন। একটি Column জন্য, verticalArrangement এবং horizontalAlignment আর্গুমেন্ট সেট করুন:

@Composable
fun ArtistCardArrangement(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

লেআউট মডেল

লেআউট মডেলে, UI ট্রি একটি একক পাসে রাখা হয়। প্রতিটি নোডকে প্রথমে নিজেকে পরিমাপ করতে বলা হয়, তারপরে যেকোন শিশুকে পুনরাবৃত্তভাবে পরিমাপ করতে বলা হয়, শিশুদের কাছে গাছের নিচের আকারের সীমাবদ্ধতা পাস করে। তারপরে, পাতার নোডগুলিকে আকার দেওয়া হয় এবং স্থাপন করা হয়, সমাধান করা মাপ এবং বসানোর নির্দেশাবলী গাছের উপরে চলে যায়।

সংক্ষেপে, পিতামাতারা তাদের সন্তানদের আগে পরিমাপ করে, কিন্তু মাপ এবং তাদের সন্তানদের পরে স্থাপন করা হয়।

নিম্নলিখিত SearchResult ফাংশন বিবেচনা করুন.

@Composable
fun SearchResult() {
    Row {
        Image(
            // ...
        )
        Column {
            Text(
                // ...
            )
            Text(
                // ...
            )
        }
    }
}
LayoutBasicsSnippets.kt

এই ফাংশনটি নিম্নলিখিত UI ট্রি প্রদান করে।

SearchResult
  Row
    Image
    Column
      Text
      Text

SearchResult উদাহরণে, UI ট্রি লেআউট এই ক্রম অনুসরণ করে:

1. রুট নোড Row পরিমাপ করতে বলা হয়।
2. রুট নোড Row তার প্রথম সন্তান, Image পরিমাপ করতে বলে।
3. Image একটি লিফ নোড (অর্থাৎ, এটির কোন সন্তান নেই), তাই এটি একটি আকারের প্রতিবেদন করে এবং স্থান নির্ধারণের নির্দেশাবলী প্রদান করে।
4. রুট নোড Row তার দ্বিতীয় সন্তান Column পরিমাপ করতে বলে।
5. Column নোড তার প্রথম Text শিশুকে পরিমাপ করতে বলে।
6. প্রথম Text নোডটি একটি লিফ নোড, তাই এটি একটি আকারের প্রতিবেদন করে এবং স্থান নির্ধারণের নির্দেশনা প্রদান করে।
7. Column নোড তার দ্বিতীয় Text চাইল্ডকে পরিমাপ করতে বলে।
8. দ্বিতীয় Text নোডটি একটি লিফ নোড, তাই এটি একটি আকারের প্রতিবেদন করে এবং স্থান নির্ধারণের নির্দেশাবলী প্রদান করে।
9. এখন যেহেতু Column নোড তার বাচ্চাদের পরিমাপ, আকার এবং স্থাপন করেছে, এটি তার নিজস্ব আকার এবং স্থান নির্ধারণ করতে পারে।
10. এখন যেহেতু রুট নোড Row তার বাচ্চাদের পরিমাপ করেছে, আকার দিয়েছে এবং স্থাপন করেছে, এটি তার নিজস্ব আকার এবং স্থান নির্ধারণ করতে পারে।

কর্মক্ষমতা

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

কোনো কারণে আপনার লেআউটের একাধিক পরিমাপের প্রয়োজন হলে, রচনা একটি বিশেষ সিস্টেম, অন্তর্নিহিত পরিমাপ অফার করে। আপনি রচনা লেআউটের অন্তর্নিহিত পরিমাপে এই বৈশিষ্ট্যটি সম্পর্কে আরও পড়তে পারেন।

যেহেতু পরিমাপ এবং বসানো লেআউট পাসের স্বতন্ত্র উপ-পর্যায়, যেকোন পরিবর্তন যা শুধুমাত্র আইটেমগুলির স্থাপনকে প্রভাবিত করে, পরিমাপ নয়, আলাদাভাবে কার্যকর করা যেতে পারে।

আপনার লেআউটে মডিফায়ার ব্যবহার করা

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

@Composable
fun ArtistCardModifiers(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        ) { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

উপরের কোডে, একসাথে ব্যবহৃত বিভিন্ন মডিফায়ার ফাংশন লক্ষ্য করুন।

• clickable ব্যবহারকারীর ইনপুটে একটি সংমিশ্রণযোগ্য প্রতিক্রিয়া তৈরি করে এবং একটি লহর দেখায়।
• padding একটি উপাদানের চারপাশে স্থান রাখে।
• fillMaxWidth তার অভিভাবক থেকে প্রদত্ত সর্বাধিক প্রস্থ কম্পোজযোগ্য পূরণ করে।
• size() একটি উপাদানের পছন্দের প্রস্থ এবং উচ্চতা নির্দিষ্ট করে।

স্ক্রোলযোগ্য লেআউট

রচনা অঙ্গভঙ্গি ডকুমেন্টেশনে স্ক্রোলযোগ্য লেআউট সম্পর্কে আরও জানুন।

তালিকা এবং অলস তালিকার জন্য, কম্পোজ তালিকা ডকুমেন্টেশন দেখুন।

প্রতিক্রিয়াশীল লেআউট

একটি বিন্যাস বিভিন্ন স্ক্রীন ওরিয়েন্টেশন এবং ফর্ম ফ্যাক্টর আকার বিবেচনা করে ডিজাইন করা উচিত। বিভিন্ন স্ক্রীন কনফিগারেশনে আপনার কম্পোজযোগ্য লেআউটগুলিকে অভিযোজিত করার সুবিধার্থে কম্পোজ বাক্সের বাইরে কয়েকটি প্রক্রিয়া অফার করে।

সীমাবদ্ধতা

পিতামাতার কাছ থেকে আসা সীমাবদ্ধতাগুলি জানতে এবং সেই অনুযায়ী লেআউট ডিজাইন করতে, আপনি একটি BoxWithConstraints ব্যবহার করতে পারেন। পরিমাপ সীমাবদ্ধতা বিষয়বস্তু ল্যাম্বডা সুযোগ পাওয়া যাবে. আপনি বিভিন্ন স্ক্রীন কনফিগারেশনের জন্য বিভিন্ন লেআউট রচনা করতে এই পরিমাপের সীমাবদ্ধতাগুলি ব্যবহার করতে পারেন:

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("My minHeight is $minHeight while my maxWidth is $maxWidth")
    }
}
LayoutBasicsSnippets.kt

স্লট-ভিত্তিক লেআউট

কম্পোজ UI বিল্ডিং সহজ করতে androidx.compose.material:material নির্ভরতা (Android স্টুডিওতে একটি রচনা প্রকল্প তৈরি করার সময় অন্তর্ভুক্ত) সহ উপাদান ডিজাইনের উপর ভিত্তি করে বিভিন্ন ধরনের কম্পোজেবল সরবরাহ করে। Drawer , FloatingActionButton , এবং TopAppBar মতো উপাদানগুলি সরবরাহ করা হয়েছে৷

উপাদানের উপাদানগুলি স্লট API- এর ব্যাপক ব্যবহার করে, একটি প্যাটার্ন কম্পোজ কম্পোজেবলের উপরে কাস্টমাইজেশনের একটি স্তর আনতে প্রবর্তন করে। এই পদ্ধতিটি উপাদানগুলিকে আরও নমনীয় করে তোলে, কারণ তারা একটি শিশু উপাদান গ্রহণ করে যা সন্তানের প্রতিটি কনফিগারেশন পরামিতি প্রকাশ করার পরিবর্তে নিজেকে কনফিগার করতে পারে। স্লটগুলি UI-তে একটি খালি স্থান ছেড়ে দেয় যাতে বিকাশকারী তাদের ইচ্ছামত পূরণ করতে পারে। উদাহরণস্বরূপ, এই স্লটগুলি যা আপনি একটি TopAppBar এ কাস্টমাইজ করতে পারেন:

কম্পোজেবল সাধারণত একটি content কম্পোজেবল ল্যাম্বডা নেয় ( content: @Composable () -> Unit )। স্লট API নির্দিষ্ট ব্যবহারের জন্য একাধিক content পরামিতি প্রকাশ করে। উদাহরণস্বরূপ, TopAppBar আপনাকে title , navigationIcon এবং actions জন্য সামগ্রী সরবরাহ করতে দেয়।

উদাহরণস্বরূপ, Scaffold আপনাকে মৌলিক মেটেরিয়াল ডিজাইন লেআউট কাঠামোর সাথে একটি UI বাস্তবায়ন করতে দেয়। Scaffold সর্বাধিক সাধারণ শীর্ষ-স্তরের উপাদান উপাদানগুলির জন্য স্লট প্রদান করে, যেমন TopAppBar , BottomAppBar , FloatingActionButton , এবং Drawer ৷ Scaffold ব্যবহার করে, এই উপাদানগুলি সঠিকভাবে অবস্থান করছে এবং সঠিকভাবে একসাথে কাজ করছে তা নিশ্চিত করা সহজ।

@Composable
fun HomeScreen(/*...*/) {
    ModalNavigationDrawer(drawerContent = { /* ... */ }) {
        Scaffold(
            topBar = { /*...*/ }
        ) { contentPadding ->
            // ...
        }
    }
}
LayoutBasicsSnippets.kt