Jetpack Compose: এটি কী, মূল ধারণা এবং Composable ফাংশন

Jetpack Compose কী?

Jetpack Compose হল Android ইউজার ইন্টারফেস তৈরির জন্য Google-এর একটি ডিক্লেয়ারেটিভ ফ্রেমওয়ার্ক, যা 2019 সালে ঘোষণা করা হয়েছিল এবং 2021 সালে স্থিতিশীল রিলিজে পৌঁছেছিল। পুরানো View System (XML লেআউট + Activity/Fragment) থেকে ভিন্ন, Compose অ্যানোটেটেড Kotlin ফাংশন — @Composable ব্যবহার করে। ইন্টারফেস সম্পূর্ণরূপে Kotlin-এ বর্ণিত হয়: XML এবং কোডের মধ্যে কোনো বিভাজন নেই। এটি XML এবং Kotlin-এ বেমানান ID-সম্পর্কিত ত্রুটির শ্রেণি দূর করেছে (type-safe synthetic রিফ্যাক্টরিংয়ে সাহায্য করেনি)।

Compose তার নিজস্ব রেন্ডারিং সিস্টেম — Canvas-এর উপর নির্মিত, যা View হায়ারার্কির সাথে আবদ্ধ নয়। প্রতিটি Composable View System-এর onMeasure/onDraw এড়িয়ে সরাসরি Canvas-এ নিজেকে আঁকে। এটি জটিল স্ক্রিনে কর্মক্ষমতা বৃদ্ধি প্রদান করে: Google পরীক্ষায় (2023), 200 এলিমেন্টের একটি Compose স্ক্রিন RecyclerView + ViewHolder-এর অনুরূপ স্ক্রিনের তুলনায় 40% দ্রুত রেন্ডার হয়েছে।

ন্যূনতম প্রয়োজনীয়তা এবং সামঞ্জস্যতা

Compose-এর জন্য minSdk 21 (Android 5.0) এবং Kotlin 1.9+ প্রয়োজন। Compose BOM (Bill of Materials) সমস্ত Compose লাইব্রেরির সংস্করণ সিঙ্ক্রোনাইজ করে। ফ্রেমওয়ার্ক বিদ্যমান View System কোডের সাথে সামঞ্জস্যপূর্ণ: Compose XML লেআউটে ComposeView-এর মাধ্যমে এম্বেড করা হয়, এবং পুরানো Viewগুলি Compose হায়ারার্কিতে AndroidView-এর মাধ্যমে। Google Play Console (2025) অনুসারে, Android 5.0+ সক্রিয় ডিভাইসের 97% কভার করে, তাই বেশিরভাগ প্রকল্পের জন্য সামঞ্জস্যতা কোনো সীমাবদ্ধতা নয়।

Composable ফাংশন এবং কম্পোজিশন

@Composable হল একটি অ্যানোটেশন যা একটি সাধারণ Kotlin ফাংশনকে UI বিল্ডিং ব্লকে রূপান্তরিত করে। একটি Composable ফাংশন বর্ণনা করে যে ইন্টারফেসের একটি টুকরো কেমন দেখাতে হবে — টেক্সট, বাটন, তালিকা। মান ফেরানোর পরিবর্তে, ফাংশন কম্পোজিশনে UI কম্পোনেন্ট নির্গত (emit) করে। এটি একটি জেনারেটরের মতো: প্রতিটি ফাংশন কল করার সময় স্ক্রিনে এলিমেন্ট যোগ করে।

@Composable
fun ProfileCard(name: String, avatarUrl: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            AsyncImage(
                model = avatarUrl,
                contentDescription = "অবতার",
                modifier = Modifier.size(48.dp).clip(CircleShape)
            )
            Spacer(Modifier.width(12.dp))
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium
            )
        }
    }
}

ProfileCard ফাংশন প্যারামিটার (name, avatarUrl) নেয় এবং Card → Row → AsyncImage + Text নির্গত করে। কম্পোজিশন হল একটি একক পাসে নির্গত কম্পোনেন্টের গাছ। যদি প্যারামিটার পরিবর্তিত না হয়, Compose ফাংশন কল এড়িয়ে যায় (recomposition skip)। যদি শুধুমাত্র name পরিবর্তিত হয়, শুধুমাত্র Text কল করা হবে, বাকি এলিমেন্টগুলি পুনরায় আঁকা হবে না। এই বুদ্ধিমান পুনঃসংযোজন ম্যানুয়াল View System অপ্টিমাইজেশনের তুলনায় Compose-এর মূল কর্মক্ষমতা সুবিধা।

স্লট এবং Content Lambda

Composable ফাংশন সক্রিয়ভাবে স্লট ব্যবহার করে — ট্রেইলিং ল্যাম্বডা, content: @Composable (() -> Unit)। এটি কন্টেইনার তৈরি করতে দেয়: Card, Column, Row কন্টেন্ট ল্যাম্বডা গ্রহণ করে এবং কন্টেন্ট স্লটে এম্বেড হয়। Slot API android:layout_gravity-এর মতো XML অ্যাট্রিবিউট প্রতিস্থাপন করেছে — এখন চাইল্ড এলিমেন্টের অবস্থান কন্টেন্ট ব্লকের ভিতরে Kotlin কোড দ্বারা সেট করা হয়।

Compose-এ স্টেট ব্যবস্থাপনা

Compose-এ স্টেট (State) হল যেকোনো মান যা সময়ের সাথে পরিবর্তিত হতে পারে। যখন স্টেট পরিবর্তিত হয়, Compose এই স্টেট পড়া সমস্ত কম্পোনেন্টের জন্য পুনঃসংযোজন নির্ধারণ করে। প্রক্রিয়াটি React hooks-এর মতো: mutableStateOf MutableState<T> ফেরত দেয়, .value পড়া স্বয়ংক্রিয়ভাবে বর্তমান কম্পোজিশনকে পরিবর্তনের সাবস্ক্রাইব করে।

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("ক্লিক করা হয়েছে: $count")
        Button(onClick = { count++ }) {
            Text("বাড়ান")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("ব্যবহারকারী: $userName")
}

remember পুনঃসংযোজনের মধ্যে মান সংরক্ষণ করে — অন্যথায় প্রতিটি UI আপডেটে mutableStateOf নতুন করে তৈরি হবে। collectAsState() ViewModel থেকে StateFlow-কে Compose-সামঞ্জস্যপূর্ণ স্টেটে রূপান্তর করে। সুপারিশ — স্ক্রিন-স্তরের স্টেটের জন্য StateFlow-সহ ViewModel ব্যবহার করুন, এবং স্থানীয় স্টেটের (যেমন সম্প্রসারিত কার্ড) জন্য mutableStateOf ব্যবহার করুন। এই বিভাজন স্মার্ট/ডাম্ব কম্পোনেন্ট নীতি অনুসরণ করে।

State Hoisting

State Hoisting হল চাইল্ড কম্পোনেন্ট থেকে প্যারেন্টে স্টেট উত্তোলনের প্যাটার্ন। প্যারেন্ট প্যারামিটার মাধ্যমে মান এবং কলব্যাক পাঠায়, চাইল্ড পরিবর্তনে কলব্যাক কল করে। প্যারেন্ট mutableStateOf ধরে, চাইল্ড শুধুমাত্র প্যারামিটার ধরে। এটি কম্পোনেন্টকে পুনঃব্যবহারযোগ্য এবং পরীক্ষণযোগ্য করে: একই TextField যেকোনো ডেটা উৎসের সাথে ব্যবহার করা যেতে পারে।

Modifier — চেহারা কাস্টমাইজেশন

Modifier হল একটি অবজেক্ট যা Composable রূপান্তর বর্ণনা করে: আকার, প্যাডিং, ব্যাকগ্রাউন্ড, ক্লিক হ্যান্ডলিং, অ্যানিমেশন, স্ক্রল। মডিফায়ার কল চেইনের মাধ্যমে প্রয়োগ করা হয়: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }। প্রতিটি কল যোগ করা বৈশিষ্ট্য সহ একটি নতুন Modifier ফেরত দেয় — মূল অবজেক্টের কোনো মিউটেশন নেই।

মডিফায়ারের ক্রম গুরুত্বপূর্ণ। Modifier.padding(16.dp).background(Color.Blue) প্যাডিংসহ এলাকা রঙ করে। Modifier.background(Color.Blue).padding(16.dp) ভিতরের আয়তক্ষেত্র রঙ করে এবং প্যাডিং স্বচ্ছ থাকে। প্রক্রিয়াটি CSS বক্স মডেলের মতো: প্রথমে padding → background margin + background-এর মতো কাজ করে; প্রথমে background → padding background + ভিতরের প্যাডিং-এর মতো কাজ করে। ডেভেলপারকে শুধু মনে রাখতে হবে: প্রথমে padding = বাইরের মার্জিন, পরে padding = ভিতরের প্যাডিং।

কাস্টম মডিফায়ার

যদি বিল্ট-ইন মডিফায়ার পর্যাপ্ত না হয়, Modifier.composed { ... } বা Modifier.then()-এর মাধ্যমে কাস্টম মডিফায়ার তৈরি করা হয়। কাস্টম মডিফায়ারের ভিতরে, লেআউট পরিমাপ (Modifier.layout { measurable, constraints -> ... }), ড্রয়িং (Modifier.drawWithContent { ... }), জেসচার (Modifier.pointerInput { ... }) ব্যবহার করা যেতে পারে। উদাহরণ: ক্লিকে স্পন্দন অ্যানিমেশনের জন্য মডিফায়ার — আকার পরিমাপ করে, ক্লিকে animateFloatAsState-এর মাধ্যমে স্কেল অ্যানিমেশন শুরু করে।

অ্যানিমেশনের জন্য, Compose animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) প্রদান করে — পরিবর্তনে মান পুরাতন এবং নতুন স্টেটের মধ্যে অ্যানিমেট হয়। প্রবেশ/প্রস্থান অ্যানিমেশনের জন্য — AnimatedVisibility এবং AnimatedContent বিল্ট-ইন ট্রানজিশন (fade, slide, expand) সহ। সব অ্যানিমেশন গ্রাফিক্স লেয়ারে কাজ করে, অপ্রয়োজনীয় কম্পোজিশন ট্রিগার না করে।

Side Effects: LaunchedEffect, DisposableEffect, remember

Composable ফাংশনের সরাসরি সাইড ইফেক্ট (নেটওয়ার্ক রিকোয়েস্ট, টাইমার, সাবস্ক্রিপশন) করা উচিত নয় — এগুলি প্রতিটি পুনঃসংযোজনে কল হয়, যা ডুপ্লিকেট রিকোয়েস্টের দিকে নিয়ে যাবে। সাইড ইফেক্টের জন্য, Compose Effect ফাংশনের একটি পরিবার প্রদান করে: LaunchedEffect কম্পোজিশনে প্রবেশে করুটিন শুরু করে এবং প্রস্থানে বাতিল করে, DisposableEffect — সেইসব রিসোর্সের জন্য যার স্পষ্ট পরিষ্কার প্রয়োজন (সেন্সর, BroadcastReceiver)।

@Composable
fun SensorReader() {
    val context = LocalContext.current
    var sensorValue by remember { mutableStateOf(0f) }

    DisposableEffect(Unit) {
        val sensor = registerSensorListener(context) { value ->
            sensorValue = value
        }
        onDispose {
            unregisterSensorListener(sensor)
        }
    }

    Text("মান: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // স্টেট আপডেট
    }
}

LaunchedEffect(userId) পুনরায় শুরু হয় যদি userId পরিবর্তিত হয় — আগের করুটিন বাতিল হয়, নতুন userId-সহ নতুন শুরু হয়। এটি ম্যানুয়াল রিকোয়েস্ট বাতিলকরণ ব্যবস্থাপনা দূর করে। DisposableEffect(Unit) — একটি নির্দিষ্ট কী Unit-সহ ইফেক্ট, কম্পোজিশনে প্রবেশে সক্রিয় হয় এবং প্রস্থানে onDispose কল করে। SensorReader লিসেনার রেজিস্টার করে এবং স্ক্রিন ছাড়ার সময় আনসাবস্ক্রাইব করে — লিকের ঝুঁকি ছাড়া।

rememberCoroutineScope

যদি কম্পোজিশনে প্রবেশে নয় বরং কোনো ইভেন্টে (বাটন ক্লিক) করুটিন শুরু করার প্রয়োজন হয়, rememberCoroutineScope() ব্যবহার করুন। এটি Composable লাইফসাইকেলের সাথে আবদ্ধ CoroutineScope ফেরত দেয়, যেখানে DisposableEffect-এর প্রয়োজন নেই। উদাহরণ: বাটন ক্লিকে নেটওয়ার্ক রিকোয়েস্ট শুরু করা — scope.launch { viewModel.loadData() }।

Jetpack Compose বনাম View System: তুলনা

Compose এবং View System-এর মধ্যে পছন্দ 2026 সালে Android ডেভেলপারদের জন্য প্রধান আর্কিটেকচারাল প্রশ্ন। উভয় প্রযুক্তিই Google-সমর্থিত, কিন্তু Compose হল প্রধান দিক যেখানে Google সম্পদ ব্যয় করে। View System শুধুমাত্র গুরুত্বপূর্ণ ফিক্স পায় এবং বিকশিত হচ্ছে না। পার্থক্য সিনট্যাক্স, স্টেট ব্যবস্থাপনা, কর্মক্ষমতা এবং উন্নয়ন সময়ে প্রকাশ পায়।

নতুন প্রকল্পের জন্য, Google Jetpack Compose-কে UI উন্নয়নের মান হিসেবে সুপারিশ করে। View System 2021-এর আগে লেখা কোড বজায় রাখার জন্য এবং যেসব ক্ষেত্রে ন্যূনতম APK আকার গুরুত্বপূর্ণ (যেমন, এন্ট্রি-লেভেল ডিভাইস সহ উদীয়মান বাজারের জন্য) সেসব ক্ষেত্রে রয়ে গেছে। Compose তার ডিক্লেয়ারেটিভ সিনট্যাক্স এবং বিল্ট-ইন অ্যানিমেশনের মাধ্যমে View System-এর তুলনায় UI কোডের পরিমাণ 30–50% কমায়।