verticalArrangement ও horizontalAlignment কি?

 

📌 verticalArrangement ও horizontalAlignment কি? 🤔

Kotlin-এর Jetpack Compose-এ যখন আমরা Column বা Row ব্যবহার করি, তখন কিভাবে Child (বাচ্চা) আইটেমগুলোর অবস্থান (Positioning) হবে, তা কন্ট্রোল করতে verticalArrangement ও horizontalAlignment ব্যবহার করা হয়।
আসুন, সহজভাবে বোঝার চেষ্টা করি! 🧠💡

---

🎯 1️⃣ verticalArrangement (উল্লম্বে আইটেম সাজানো)

📌 যখন Column (উল্লম্ব Layout) ব্যবহার করি, তখন আইটেমগুলো কিভাবে উপরে-নিচে সাজানো হবে তা নিয়ন্ত্রণ করে verticalArrangement।

👉 এটি মূলত Column-এর ভিতরে Child গুলোর স্পেসিং ও অবস্থান ঠিক করে।

🚀 মূল Arrangement Options:

1️⃣ Arrangement.Top → সব আইটেম উপরে (Top) থাকবে।
2️⃣ Arrangement.Center → সব আইটেম মাঝখানে (Center) থাকবে।
3️⃣ Arrangement.Bottom → সব আইটেম নিচে (Bottom) থাকবে।
4️⃣ Arrangement.SpaceEvenly → সব আইটেমের মাঝে সমান স্পেস (Equal Space) থাকবে।
5️⃣ Arrangement.SpaceAround → প্রান্তের বাইরে ও ভিতরে স্পেস থাকবে।
6️⃣ Arrangement.SpaceBetween → প্রথম ও শেষ আইটেমের মাঝে সমান স্পেস থাকবে।

---

✨ Column-এ verticalArrangement এর উদাহরণ:

@Composable
fun VerticalArrangementExample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalArrangement = Arrangement.Center // মাঝখানে সব আইটেম রাখবে
    ) {
        Text("Item 1", fontSize = 20.sp, color = Color.Black)
        Text("Item 2", fontSize = 20.sp, color = Color.Black)
        Text("Item 3", fontSize = 20.sp, color = Color.Black)
    }
}

✅ এখানে:

• Column-এর verticalArrangement = Arrangement.Center মানে সব টেক্সট উল্লম্বভাবে মাঝখানে থাকবে! 🎯

---

🎯 2️⃣ horizontalAlignment (অনুভূমিকভাবে আইটেম সাজানো)

📌 যখন Column ব্যবহার করা হয়, তখন আইটেমগুলোর অনুভূমিক (Horizontally) অবস্থান কন্ট্রোল করতে horizontalAlignment ব্যবহার করা হয়।

👉 এটি মূলত Column-এর ভিতরে আইটেমগুলোর বাঁ (Left), মাঝ (Center), বা ডান (Right) পাশে রাখে।

🚀 মূল Alignment Options:

1️⃣ Alignment.Start → বাঁ দিকে (Left) আইটেম থাকবে।
2️⃣ Alignment.CenterHorizontally → মাঝখানে (Center) আইটেম থাকবে।
3️⃣ Alignment.End → ডান দিকে (Right) আইটেম থাকবে।

---

✨ Column-এ horizontalAlignment এর উদাহরণ:

@Composable
fun HorizontalAlignmentExample() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        horizontalAlignment = Alignment.CenterHorizontally // সব আইটেম অনুভূমিকভাবে Center থাকবে
    ) {
        Text("Item 1", fontSize = 20.sp, color = Color.Black)
        Text("Item 2", fontSize = 20.sp, color = Color.Black)
        Text("Item 3", fontSize = 20.sp, color = Color.Black)
    }
}

✅ এখানে:

• Column-এর horizontalAlignment = Alignment.CenterHorizontally মানে সব টেক্সট অনুভূমিকভাবে মাঝখানে থাকবে! 🎯

---

🏆 🚀 verticalArrangement & horizontalAlignment একসাথে!

আমরা চাইলে উল্লম্ব (Vertical) ও অনুভূমিক (Horizontal) উভয় দিকেই আইটেমের অবস্থান নিয়ন্ত্রণ করতে পারি! 🎯

🎨 উদাহরণ:

@Composable
fun CenterAlignedColumn() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.LightGray),
        verticalArrangement = Arrangement.Center, // উপরে-নিচে Center
        horizontalAlignment = Alignment.CenterHorizontally // ডানে-বামে Center
    ) {
        Text("Item 1", fontSize = 20.sp, color = Color.Black)
        Text("Item 2", fontSize = 20.sp, color = Color.Black)
        Text("Item 3", fontSize = 20.sp, color = Color.Black)
    }
}

✅ এখানে:

• সব আইটেম উল্লম্বভাবে (Vertical) মাঝখানে থাকবে (Arrangement.Center)।
• সব আইটেম অনুভূমিকভাবে (Horizontal) মাঝখানে থাকবে (Alignment.CenterHorizontally)।

---

🔥 Row-এর ক্ষেত্রে? 🤔

📌 Row-এর ক্ষেত্রে horizontalArrangement ও verticalAlignment ব্যবহার করা হয়।

• Row-এর ক্ষেত্রে:
  • horizontalArrangement → বামের দিকে, মাঝখানে বা ডানের দিকে আইটেম রাখবে।
  • verticalAlignment → উপরে, মাঝখানে বা নিচে আইটেম রাখবে।

---

🎯 সারসংক্ষেপ:

Property	Column-এ কাজ করে	Row-এ কাজ করে
verticalArrangement	✅ (উল্লম্ব আইটেম সাজায়)	❌ কাজ করে না
horizontalAlignment	✅ (অনুভূমিকভাবে আইটেম সাজায়)	❌ কাজ করে না
horizontalArrangement	❌ কাজ করে না	✅ (অনুভূমিক আইটেম সাজায়)
verticalAlignment	❌ কাজ করে না	✅ (উল্লম্বভাবে আইটেম সাজায়)

---

🎯 সংক্ষেপে মনে রাখার কৌশল 🧠

👉 Column = "C" = Center করে verticalArrangement ✅
👉 Row = "R" = Right-left করে horizontalArrangement ✅

এখন থেকে আপনি সহজেই Compose UI Layout ডিজাইন করতে পারবেন! 🚀🔥

😎 Happy Coding! 💡