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

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

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

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

স্তর

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

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

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

রানটাইম

এই মডিউলটি কম্পোজ রানটাইমের মৌলিক বিষয়গুলি প্রদান করে যেমন remember , mutableStateOf , @Composable টীকা এবং SideEffect । আপনি যদি কম্পোজের ট্রি ম্যানেজমেন্টের ক্ষমতার প্রয়োজন হয়, তবে এর UI না হলে আপনি সরাসরি এই স্তরের উপর নির্মাণের কথা বিবেচনা করতে পারেন।

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 4 টি উপাদান থেকে একত্রিত হয়:

1. পটভূমি, আকৃতি, ক্লিক হ্যান্ডলিং, ইত্যাদি প্রদান করে একটি উপাদান Surface

2. একটি CompositionLocalProvider যা বোতামটি সক্ষম বা অক্ষম করা হলে বিষয়বস্তুর আলফা পরিবর্তন করে

3. একটি ProvideTextStyle ব্যবহার করার জন্য ডিফল্ট পাঠ্য শৈলী সেট করে

4. একটি Row বোতামের বিষয়বস্তুর জন্য ডিফল্ট বিন্যাস নীতি প্রদান করে

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

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

@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

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

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

@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

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

সঠিক বিমূর্ততা বাছাই

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

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

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

আরও জানুন

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

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

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

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

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