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

জেটপ্যাক কম্পোজ আর্কিটেকচারাল লেয়ারিং

এই পৃষ্ঠাটি জেটপ্যাক কম্পোজ তৈরির স্থাপত্য স্তরগুলির একটি উচ্চ-স্তরের ওভারভিউ এবং এই নকশাকে নির্দেশ করে এমন মূল নীতিগুলি প্রদান করে।

জেটপ্যাক কম্পোজ কোনও একক একক প্রকল্প নয়; এটি বেশ কয়েকটি মডিউল থেকে তৈরি করা হয়েছে যা একত্রিত হয়ে একটি সম্পূর্ণ স্ট্যাক তৈরি করে। জেটপ্যাক কম্পোজ তৈরির বিভিন্ন মডিউলগুলি বোঝার মাধ্যমে আপনি নিম্নলিখিতগুলি করতে পারবেন:

আপনার অ্যাপ বা লাইব্রেরি তৈরি করতে উপযুক্ত স্তরের বিমূর্ততা ব্যবহার করুন।
আরও নিয়ন্ত্রণ বা কাস্টমাইজেশনের জন্য কখন আপনি নিম্ন স্তরে 'ড্রপ ডাউন' করতে পারবেন তা বুঝুন
আপনার নির্ভরতা কমিয়ে আনুন

স্তরসমূহ

জেটপ্যাক কম্পোজের প্রধান স্তরগুলি হল:

চিত্র ১. জেটপ্যাক কম্পোজের প্রধান স্তরগুলি।

প্রতিটি স্তর নিম্ন স্তরের উপর নির্মিত, উচ্চ স্তরের উপাদান তৈরি করার জন্য কার্যকারিতা একত্রিত করে। প্রতিটি স্তর মডিউল সীমানা যাচাই করার জন্য নিম্ন স্তরের পাবলিক API গুলির উপর তৈরি করে এবং প্রয়োজনে যেকোনো স্তর প্রতিস্থাপন করতে সক্ষম করে। আসুন নীচে থেকে এই স্তরগুলি পরীক্ষা করি।

রানটাইম: এই মডিউলটি Compose রানটাইমের মৌলিক বিষয়গুলি প্রদান করে যেমন remember , mutableStateOf , @Composable অ্যানোটেশন এবং SideEffect । যদি আপনার শুধুমাত্র Compose এর ট্রি ম্যানেজমেন্ট ক্ষমতার প্রয়োজন হয়, এর UI এর প্রয়োজন হয় না, তাহলে আপনি সরাসরি এই স্তরটি তৈরি করার কথা বিবেচনা করতে পারেন।
ইউআই: UI স্তরটি একাধিক মডিউল ( ui-text , ui-graphics , ui-tooling , ইত্যাদি) দিয়ে তৈরি। এই মডিউলগুলি UI টুলকিটের মৌলিক বিষয়গুলি বাস্তবায়ন করে, যেমন LayoutNode , Modifier , ইনপুট হ্যান্ডলার, কাস্টম লেআউট এবং অঙ্কন। যদি আপনার শুধুমাত্র UI টুলকিটের মৌলিক ধারণাগুলির প্রয়োজন হয় তবে আপনি এই স্তরটি তৈরি করার কথা বিবেচনা করতে পারেন।
ফাউন্ডেশন: এই মডিউলটি কম্পোজ UI এর জন্য ডিজাইন সিস্টেম অ্যাগনস্টিক বিল্ডিং ব্লক প্রদান করে, যেমন Row এবং Column , LazyColumn , নির্দিষ্ট অঙ্গভঙ্গির স্বীকৃতি ইত্যাদি। আপনি আপনার নিজস্ব ডিজাইন সিস্টেম তৈরি করার জন্য ভিত্তি স্তরের উপর ভিত্তি করে নির্মাণের কথা বিবেচনা করতে পারেন।
উপাদান: এই মডিউলটি কম্পোজ UI এর জন্য মেটেরিয়াল ডিজাইন সিস্টেমের একটি বাস্তবায়ন প্রদান করে, একটি থিমিং সিস্টেম, স্টাইল করা উপাদান, রিপল ইঙ্গিত, আইকন প্রদান করে। আপনার অ্যাপে মেটেরিয়াল ডিজাইন ব্যবহার করার সময় এই স্তরের উপর ভিত্তি করে তৈরি করুন।

নকশা নীতিমালা

জেটপ্যাক কম্পোজের একটি নির্দেশিকা নীতি হল কয়েকটি একক উপাদানের পরিবর্তে ছোট, কেন্দ্রীভূত কার্যকারিতা প্রদান করা যা একসাথে একত্রিত (বা রচনা) করা যেতে পারে। এই পদ্ধতির বেশ কয়েকটি সুবিধা রয়েছে।

নিয়ন্ত্রণ

উচ্চ স্তরের উপাদানগুলি আপনার জন্য আরও বেশি কাজ করে, তবে আপনার কাছে সরাসরি নিয়ন্ত্রণের পরিমাণ সীমিত করুন। যদি আপনার আরও নিয়ন্ত্রণের প্রয়োজন হয়, তাহলে আপনি নিম্ন স্তরের উপাদান ব্যবহার করার জন্য "ড্রপ ডাউন" করতে পারেন।

উদাহরণস্বরূপ, যদি আপনি কোনও উপাদানের রঙ অ্যানিমেট করতে চান তবে আপনি animateColorAsState API ব্যবহার করতে পারেন:

val color = animateColorAsState(if (condition) Color.Green else Color.Red)ArchitectureLayering.kt

তবে, যদি আপনার কম্পোনেন্টটি সর্বদা ধূসর রঙের শুরুতে শুরু করার প্রয়োজন হয়, তাহলে আপনি এই API দিয়ে এটি করতে পারবেন না। পরিবর্তে, আপনি নিম্ন স্তরের Animatable API ব্যবহার করতে ড্রপ ডাউন করতে পারেন:

val color = remember { Animatable(Color.Gray) }
LaunchedEffect(condition) {
    color.animateTo(if (condition) Color.Green else Color.Red)
}ArchitectureLayering.kt

উচ্চ স্তরের animateColorAsState API নিজেই নিম্ন স্তরের Animatable API এর উপর নির্মিত। নিম্ন স্তরের API ব্যবহার করা আরও জটিল তবে আরও নিয়ন্ত্রণ প্রদান করে। আপনার প্রয়োজন অনুসারে সবচেয়ে উপযুক্ত স্তরের অ্যাবস্ট্রাকশন বেছে নিন।

কাস্টমাইজেশন

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

@Composable
fun Button(
    // …
    content: @Composable RowScope.() -> Unit
) {
    Surface(/* … */) {
        CompositionLocalProvider(/* … */) { // set LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                Row(
                    // …
                    content = content
                )
            }
        }
    }
}ArchitectureLayering.kt

একটি Button ৪টি উপাদান দিয়ে তৈরি করা হয়:

একটি উপাদান Surface যা পটভূমি, আকৃতি, ক্লিক হ্যান্ডলিং ইত্যাদি প্রদান করে।
একটি CompositionLocalProvider যা বোতামটি সক্রিয় বা নিষ্ক্রিয় করা হলে কন্টেন্টের আলফা পরিবর্তন করে।
একটি ProvideTextStyle ব্যবহারের জন্য ডিফল্ট টেক্সট স্টাইল সেট করে।
একটি Row বোতামের বিষয়বস্তুর জন্য ডিফল্ট লেআউট নীতি প্রদান করে।

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

তবে, যদি আপনি কোনও কম্পোনেন্টের প্যারামিটারের বাইরে কাস্টমাইজেশন করতে চান, তাহলে আপনি একটি লেভেল "ড্রপ ডাউন" করতে পারেন এবং একটি কম্পোনেন্টকে ফোর্ক করতে পারেন। উদাহরণস্বরূপ, ম্যাটেরিয়াল ডিজাইন নির্দিষ্ট করে যে বোতামগুলির একটি শক্ত রঙের ব্যাকগ্রাউন্ড থাকা উচিত। যদি আপনার একটি গ্রেডিয়েন্ট ব্যাকগ্রাউন্ডের প্রয়োজন হয়, তাহলে এই বিকল্পটি Button প্যারামিটার দ্বারা সমর্থিত নয়। এই ক্ষেত্রে আপনি ম্যাটেরিয়াল Button বাস্তবায়নকে একটি রেফারেন্স হিসাবে ব্যবহার করতে পারেন এবং আপনার নিজস্ব কম্পোনেন্ট তৈরি করতে পারেন:

    )              }@Composable >fun GradientButton( // … background: List<Color>, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit class="devsite-syntax-w"> { Row( // … modifier = modifier .clickable(onClick = {}) .background( Brush.horizontalGradient(background) ) ) { CompositionLocalProvider(/* … */) { // set material LocalContentAlpha ProvideTextStyle(MaterialTheme.typography.button) { content() } } } class="devsite-github-link nocode no-select">ArchitectureLayering.kt

উপরের বাস্তবায়নে Material স্তরের উপাদানগুলি ব্যবহার করা অব্যাহত রয়েছে, যেমন Material-এর বর্তমান কন্টেন্ট আলফা সম্পর্কে ধারণা এবং বর্তমান টেক্সট স্টাইল। যাইহোক, এটি Material Surface একটি Row দিয়ে প্রতিস্থাপন করে এবং পছন্দসই চেহারা অর্জনের জন্য এটিকে স্টাইল করে।

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

@Composable
fun BespokeButton(
    // …
    backgroundColor: Color,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(backgroundColor)
    ) {
        // No Material components used
        content()
    }
}ArchitectureLayering.kt

Jetpack Compose সর্বোচ্চ স্তরের উপাদানগুলির জন্য সবচেয়ে সহজ নাম সংরক্ষণ করে। উদাহরণস্বরূপ, androidx.compose.material.Text androidx.compose.foundation.text.BasicText উপর ভিত্তি করে তৈরি। এর ফলে আপনি যদি উচ্চ স্তরের প্রতিস্থাপন করতে চান তবে আপনার নিজস্ব বাস্তবায়নকে সবচেয়ে আবিষ্কারযোগ্য নাম প্রদান করা সম্ভব হয়।

সঠিক বিমূর্ততা নির্বাচন করা

স্তরযুক্ত, পুনঃব্যবহারযোগ্য উপাদান তৈরির কম্পোজের দর্শনের অর্থ হল আপনার সর্বদা নিম্ন স্তরের বিল্ডিং ব্লকগুলির দিকে পৌঁছানো উচিত নয়। অনেক উচ্চ স্তরের উপাদান কেবল আরও কার্যকারিতা প্রদান করে না বরং প্রায়শই অ্যাক্সেসযোগ্যতা সমর্থন করার মতো সেরা অনুশীলনগুলি বাস্তবায়ন করে।

উদাহরণস্বরূপ, যদি আপনি আপনার কাস্টম কম্পোনেন্টে জেসচার সাপোর্ট যোগ করতে চান, তাহলে আপনি Modifier.pointerInput ব্যবহার করে এটি শুরু থেকে তৈরি করতে পারেন তবে এর উপরে তৈরি অন্যান্য, উচ্চ স্তরের কম্পোনেন্ট রয়েছে যা একটি ভাল সূচনা বিন্দু প্রদান করতে পারে, উদাহরণস্বরূপ Modifier.draggable , Modifier.scrollable অথবা Modifier.swipeable ।

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

আরও জানুন

একটি কাস্টম ডিজাইন সিস্টেম তৈরির উদাহরণের জন্য জেটসন্যাক নমুনা দেখুন।

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}

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

দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়।
জেটপ্যাক কম্পোজের জন্য কোটলিন
তালিকা এবং গ্রিড
কম্পোজে পার্শ্বপ্রতিক্রিয়া

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %} ,

আপনার অ্যাপ বা লাইব্রেরি তৈরি করতে উপযুক্ত স্তরের বিমূর্ততা ব্যবহার করুন।
আরও নিয়ন্ত্রণ বা কাস্টমাইজেশনের জন্য কখন আপনি নিম্ন স্তরে 'ড্রপ ডাউন' করতে পারবেন তা বুঝুন
আপনার নির্ভরতা কমিয়ে আনুন

স্তরসমূহ

জেটপ্যাক কম্পোজের প্রধান স্তরগুলি হল:

চিত্র ১. জেটপ্যাক কম্পোজের প্রধান স্তরগুলি।

রানটাইম: এই মডিউলটি Compose রানটাইমের মৌলিক বিষয়গুলি প্রদান করে যেমন remember , mutableStateOf , @Composable অ্যানোটেশন এবং SideEffect । যদি আপনার শুধুমাত্র Compose এর ট্রি ম্যানেজমেন্ট ক্ষমতার প্রয়োজন হয়, এর UI এর প্রয়োজন হয় না, তাহলে আপনি সরাসরি এই স্তরটি তৈরি করার কথা বিবেচনা করতে পারেন।
ইউআই: UI স্তরটি একাধিক মডিউল ( ui-text , ui-graphics , ui-tooling , ইত্যাদি) দিয়ে তৈরি। এই মডিউলগুলি UI টুলকিটের মৌলিক বিষয়গুলি বাস্তবায়ন করে, যেমন LayoutNode , Modifier , ইনপুট হ্যান্ডলার, কাস্টম লেআউট এবং অঙ্কন। যদি আপনার শুধুমাত্র UI টুলকিটের মৌলিক ধারণাগুলির প্রয়োজন হয় তবে আপনি এই স্তরটি তৈরি করার কথা বিবেচনা করতে পারেন।
ফাউন্ডেশন: এই মডিউলটি কম্পোজ UI এর জন্য ডিজাইন সিস্টেম অ্যাগনস্টিক বিল্ডিং ব্লক প্রদান করে, যেমন Row এবং Column , LazyColumn , নির্দিষ্ট অঙ্গভঙ্গির স্বীকৃতি ইত্যাদি। আপনি আপনার নিজস্ব ডিজাইন সিস্টেম তৈরি করার জন্য ভিত্তি স্তরের উপর ভিত্তি করে নির্মাণের কথা বিবেচনা করতে পারেন।
উপাদান: এই মডিউলটি কম্পোজ UI এর জন্য মেটেরিয়াল ডিজাইন সিস্টেমের একটি বাস্তবায়ন প্রদান করে, একটি থিমিং সিস্টেম, স্টাইল করা উপাদান, রিপল ইঙ্গিত, আইকন প্রদান করে। আপনার অ্যাপে মেটেরিয়াল ডিজাইন ব্যবহার করার সময় এই স্তরের উপর ভিত্তি করে তৈরি করুন।

নকশা নীতিমালা

নিয়ন্ত্রণ

val color = animateColorAsState(if (condition) Color.Green else Color.Red)ArchitectureLayering.kt

val color = remember { Animatable(Color.Gray) }
LaunchedEffect(condition) {
    color.animateTo(if (condition) Color.Green else Color.Red)
}ArchitectureLayering.kt

কাস্টমাইজেশন

@Composable
fun Button(
    // …
    content: @Composable RowScope.() -> Unit
) {
    Surface(/* … */) {
        CompositionLocalProvider(/* … */) { // set LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                Row(
                    // …
                    content = content
                )
            }
        }
    }
}ArchitectureLayering.kt

একটি Button ৪টি উপাদান দিয়ে তৈরি করা হয়:

একটি উপাদান Surface যা পটভূমি, আকৃতি, ক্লিক হ্যান্ডলিং ইত্যাদি প্রদান করে।
একটি CompositionLocalProvider যা বোতামটি সক্রিয় বা নিষ্ক্রিয় করা হলে কন্টেন্টের আলফা পরিবর্তন করে।
একটি ProvideTextStyle ব্যবহারের জন্য ডিফল্ট টেক্সট স্টাইল সেট করে।
একটি Row বোতামের বিষয়বস্তুর জন্য ডিফল্ট লেআউট নীতি প্রদান করে।

@Composable
fun GradientButton(
    // …
    background: List<Color>,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(
                Brush.horizontalGradient(background)
            )
    ) {
        CompositionLocalProvider(/* … */) { // set material LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                content()
            }
        }
    }
}ArchitectureLayering.kt

@Composable
fun BespokeButton(
    // …
    backgroundColor: Color,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(backgroundColor)
    ) {
        // No Material components used
        content()
    }
}ArchitectureLayering.kt

সঠিক বিমূর্ততা নির্বাচন করা

আরও জানুন

একটি কাস্টম ডিজাইন সিস্টেম তৈরির উদাহরণের জন্য জেটসন্যাক নমুনা দেখুন।

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}

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

দ্রষ্টব্য: জাভাস্ক্রিপ্ট বন্ধ থাকলে লিঙ্ক টেক্সট প্রদর্শিত হয়।
জেটপ্যাক কম্পোজের জন্য কোটলিন
তালিকা এবং গ্রিড
কম্পোজে পার্শ্বপ্রতিক্রিয়া

{% অক্ষরে অক্ষরে %} {% এন্ডভারব্যাটিম %}