FrameLayout: মূল ধারণা, Android-এ সহজ পজিশনিং

FrameLayout কী?

FrameLayout হল Android SDK-এর সবচেয়ে সহজ ViewGroup, যা একটি স্ক্রিন এলাকা ব্লক করার এবং একটি একক চাইল্ড ভিউ (বা একাধিক ওভারলে) প্রদর্শনের জন্য ডিজাইন করা হয়েছে। LinearLayout (ক্রমিক বিন্যাস) এবং RelativeLayout (আপেক্ষিক অবস্থান) এর বিপরীতে, FrameLayout চাইল্ড অবস্থান পরিবর্তন করে না — প্রতিটি নতুন চাইল্ড ডিফল্টরূপে উপরের-বাম কোণে (0,0) স্থাপন করা হয় এবং আগেরটির উপরে ড্র হয়।

FrameLayout API Level 1-এ প্রবর্তিত হয়েছিল এবং এটি এখনও সবচেয়ে হালকা Android কন্টেইনার: এটি জটিল লজিক দিয়ে onMeasure ওভাররাইড করে না এবং ন্যূনতম layout অপারেশন সম্পাদন করে। Android Performance Blog-এর মতে, FrameLayout একটি একক পাসে onLayout সম্পাদন করে এবং সরাসরি View স্থাপনের তুলনায় প্রায় কোনো ওভারহেড যোগ করে না। এটি এটিকে সেই কন্টেইনারগুলির জন্য আদর্শ করে তোলে যেখানে গতি গুরুত্বপূর্ণ: RecyclerView আইটেম লেআউট (পজিশনিংয়ের জন্য ConstraintLayout-এর সাথে), Fragment কন্টেইনার, ওভারলে স্তর।

FrameLayout-এর আকার ডিফল্টরূপে বৃহত্তম চাইল্ড এলিমেন্ট (যদি match_parent সেট না করা হয়) দ্বারা নির্ধারিত হয়। যদি কোনো চাইল্ড নির্দিষ্ট না করা হয়, FrameLayout (0,0) এ সঙ্কুচিত হয়। android:measureAllChildren অ্যাট্রিবিউট (নীচের বিভাগ) এই আচরণ পরিবর্তন করে।

Android ViewGroup স্তরক্রমে FrameLayout

FrameLayout ViewGroup থেকে ইনহেরিট করে এবং এটি অনেক বিশেষায়িত কন্টেইনারের সরাসরি প্যারেন্ট: FragmentContainerView (ফ্র্যাগমেন্ট), CardView (ছায়া সহ কার্ড), ScrollView (একক চাইল্ড), NestedScrollView। Fragment নেভিগেশন সহ Activity তৈরি করার সময়, স্ট্যান্ডার্ড Android Studio টেমপ্লেট ফ্র্যাগমেন্টের জন্য রুট কন্টেইনার হিসাবে FrameLayout (বা FragmentContainerView) ব্যবহার করে।

ফোরগ্রাউন্ড এবং measureAllChildren

android:foreground — একটি FrameLayout অ্যাট্রিবিউট যা সমস্ত চাইল্ড এলিমেন্টের উপরে ড্র হওয়া একটি drawable নির্দিষ্ট করে। background (চাইল্ডের নীচে) এর বিপরীতে, foreground কন্টেন্টের উপরে প্রদর্শিত হয় এবং স্বচ্ছ হতে পারে। এটি ব্যবহার করা হয়: চাপ দেওয়ার সময় ওভারলে ইফেক্ট (ripple ?attr/selectableItemBackground এর মাধ্যমে), ইমেজ মাস্কিং, স্ট্যাটাস ইন্ডিকেটর প্রদর্শন (ছবির উপরে নির্বাচন চেকমার্ক)।

Foreground স্ট্যান্ডার্ড drawable রিসোর্স সমর্থন করে: ColorDrawable, ShapeDrawable, RippleDrawable, LayerDrawable। API 23+ থেকে, ফোরগ্রাউন্ড পজিশনিংয়ের জন্য android:foregroundGravity উপলব্ধ (fill, center, top, bottom)। ফিল মোডে (fill), ফোরগ্রাউন্ড সমগ্র FrameLayout জুড়ে প্রসারিত হয়; সেন্টার মোডে, এটি কেন্দ্রে ড্র হয়।

android:measureAllChildren — একটি বুলিয়ান অ্যাট্রিবিউট (ডিফল্ট true) যা নির্ধারণ করে FrameLayout আকার গণনা করার সময় সমস্ত চাইল্ড এলিমেন্ট মাপতে হবে কিনা। যদি true (ডিফল্ট), FrameLayout GONE (আকার 0 সহ) সহ সমস্ত চাইল্ডের আকার বিবেচনা করে। যদি false, FrameLayout শুধুমাত্র VISIBLE এবং INVISIBLE চাইল্ড মাপে — GONE এলিমেন্টগুলি গণনা থেকে বাদ দেওয়া হয়। Google I/O 2019-এর মতে, অনেক GONE এলিমেন্ট (যেমন, দৃশ্যমানতা টগল করে এমন তালিকা) সহ কন্টেইনারগুলির জন্য measureAllChildren বন্ধ করলে প্রাথমিক ড্রইং 20–60% দ্রুত হয়।

layout_gravity: FrameLayout-এর ভিতরে পজিশনিং

android:layout_gravity — FrameLayout (এবং অন্যান্য ViewGroups) এর একটি চাইল্ড এলিমেন্টের অ্যাট্রিবিউট যা কন্টেইনারের ভিতরে তার অবস্থান নির্ধারণ করে। FrameLayout-এ, layout_gravity হল চাইল্ড এলিমেন্টের অবস্থান নিয়ন্ত্রণের একমাত্র উপায়, যেহেতু FrameLayout তার নিজস্ব পজিশনিং নিয়ম (যেমন RelativeLayout) বা দিক (যেমন LinearLayout) প্রদান করে না।

সম্ভাব্য মান: top, bottom, left, right, center, center_horizontal, center_vertical, fill, fill_horizontal, fill_vertical, clip_horizontal, clip_vertical। | এর মাধ্যমে একত্রিত: android:layout_gravity="bottom|center_horizontal" — এলিমেন্টটি নীচের প্রান্তের সাথে সংযুক্ত থাকে এবং অনুভূমিকভাবে কেন্দ্রীভূত হয়। FrameLayout-এর থেকে ছোট এলিমেন্টের জন্য, layout_gravity খালি স্থানে তাদের অবস্থান নির্ধারণ করে।

যদি layout_gravity সেট না করা হয়, এলিমেন্টটি ডিফল্টরূপে উপরের-বাম কোণে (top|left) স্থাপন করা হয়। একাধিক চাইল্ড ধারণকারী FrameLayout-এর জন্য, প্রতিটির নিজস্ব layout_gravity থাকতে পারে — একটি এলিমেন্ট উপরের-বাম কোণে, অন্যটি নীচের-ডান কোণে, তৃতীয়টি কেন্দ্রে থাকতে পারে। এটি সহজ ওভারলে তৈরি করার অনুমতি দেয় (যেমন, ছবির উপরে ক্লোজ আইকন)।

পার্থক্য: gravity বনাম layout_gravity

android:gravity (প্যারেন্ট অ্যাট্রিবিউট) FrameLayout-এর ভিতরে কন্টেন্ট সারিবদ্ধ করে — উদাহরণস্বরূপ, TextView-এর ভিতরে টেক্সট। android:layout_gravity (চাইল্ড অ্যাট্রিবিউট) এলিমেন্টটিকে নিজেই FrameLayout-এর ভিতরে সারিবদ্ধ করে। FrameLayout-এর প্রেক্ষাপটে, gravity নির্ধারণ করে কীভাবে চাইল্ডগুলি ডিফল্টরূপে অবস্থান করে (সব চাইল্ডের জন্য একসাথে layout_gravity-এর অনুরূপ), কিন্তু প্রতিটি নির্দিষ্ট এলিমেন্টের layout_gravity প্যারেন্ট মানকে ওভাররাইড করে।

উদাহরণ: XML এবং ব্যবহারের ক্ষেত্রে

উদাহরণ 1: মৌলিক ওভারলে — ছবির উপর লেবেল

নীচের-ডান কোণায় টেক্সট লেবেল সহ একটি ছবি। FrameLayout-এ পুরো স্ক্রিন ভর্তি ImageView এবং ছবির উপরে অবস্থানের জন্য layout_gravity="bottom|end" সহ TextView রয়েছে।

<FrameLayout
    android:layout_width="match_parent"
    android:layout_height="200dp">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/product_photo"
        android:scaleType="centerCrop" />

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="bottom|end"
        android:layout_margin="8dp"
        android:background="@drawable/badge_background"
        android:elevation="2dp"
        android:paddingHorizontal="8dp"
        android:paddingVertical="4dp"
        android:text="-30%"
        android:textColor="@android:color/white"
        android:textSize="14sp"
        android:textStyle="bold" />

</FrameLayout>

ImageView সম্পূর্ণ FrameLayout (200dp উচ্চতা) ভর্তি করে। layout_gravity="bottom|end" সহ TextView ছবির উপরে নীচের-ডান কোণায় স্থাপিত হয়। elevation=2dp লেবেলের নীচে ছায়া যোগ করে, এটিকে ছবি থেকে দৃশ্যত আলাদা করে। এই ন্যূনতম উদাহরণটির জন্য LinearLayout-এ নেস্টেড কন্টেইনার বা কাস্টম কোডের প্রয়োজন হবে।

উদাহরণ 2: লোডিং ইন্ডিকেটর (কন্টেন্টের উপরে প্রোগ্রেস বার)

কন্টেন্ট এবং একটি কেন্দ্রীভূত প্রোগ্রেস বার সহ স্ক্রিন যা লোডিংয়ের সময় উপস্থিত হয়। FrameLayout-এ দুটি এলিমেন্ট রয়েছে: কন্টেন্ট এবং visibility="gone" সহ ProgressBar (কোডে টগল করা হয়েছে)।

<FrameLayout
    android:id="@+id/content_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/content_text"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="লোড করা কন্টেন্ট"
        android:textSize="18sp" />

    <ProgressBar
        android:id="@+id/loading_spinner"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>

ProgressBar ডিফল্টরূপে লুকানো (gone)। লোডিং শুরু হলে, findViewById(R.id.loading_spinner).visibility = View.VISIBLE কল করা হয় — স্পিনার কন্টেন্টের উপরে কেন্দ্রে উপস্থিত হয়। লোডিং শেষে — .visibility = View.GONE। FrameLayout কন্টেন্টের অবস্থান না সরিয়েই ওভারলে প্রদান করে — স্পিনার উপস্থিত হলে টেক্সট নড়ে না, কারণ ProgressBar উপরে ড্র হয়।

উদাহরণ 3: Fragment কন্টেইনার

FrameLayout FragmentTransaction-এর জন্য আদর্শ কন্টেইনার হিসাবে। অ্যাক্টিভিটি নেভিগেশনের উপর নির্ভর করে এই কন্টেইনারের ভিতরে ফ্র্যাগমেন্ট প্রতিস্থাপন করে।

<FrameLayout
    android:id="@+id/fragment_container"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />

import androidx.fragment.app.FragmentTransaction

val fragmentContainer = R.id.fragment_container

fun navigateTo(fragment: Fragment) {
    supportFragmentManager
        .beginTransaction()
        .setTransition(FragmentTransaction.TRANSIT_FRAGMENT_FADE)
        .replace(fragmentContainer, fragment)
        .addToBackStack(null)
        .commit()
}

FrameLayout ফ্র্যাগমেন্ট কন্টেইনার হিসাবে Fragment Navigation সমর্থন করার সবচেয়ে হালকা উপায়। Navigation Component 2.4+ এর সাথে FragmentContainerView (FrameLayout-এর একটি উপশ্রেণী) সুপারিশ করা হয়, কিন্তু সরল FrameLayout ম্যানুয়াল FragmentTransaction-এর জন্য বৈধ থাকে। মূল সুবিধা হল যে FragmentTransaction.replace() অ্যাক্টিভিটিকে প্রভাবিত না করেই সম্পূর্ণ কন্টেন্ট প্রতিস্থাপন করে।

কখন FrameLayout ব্যবহার করবেন

FrameLayout চারটি পরিস্থিতির জন্য সর্বোত্তম: ফ্র্যাগমেন্ট কন্টেইনার (FragmentContainerView বা FrameLayout), লোডিং ওভারলে (কন্টেন্টের উপরে ProgressBar), কার্ড লেবেল (ছবির উপর লেবেল), ViewStub-এর জন্য প্লেসহোল্ডার কন্টেইনার (লেজি লোডিং)।

এর জন্য উপযুক্ত নয়: একাধিক এলিমেন্টের জটিল পজিশনিং (ConstraintLayout ব্যবহার করুন), ক্রমিক তালিকা (LinearLayout বা RecyclerView), এলিমেন্ট ক্রম পরিবর্তন করে এমন ডায়নামিক লেআউট।

স্ক্রিনের রুট এলিমেন্ট হিসাবে FrameLayout — খারাপ অভ্যাস যদি স্ক্রিনে 2–3-এর বেশি এলিমেন্ট থাকে। রুট কন্টেইনারের জন্য, ConstraintLayout ব্যবহার করুন — এটি কর্মক্ষমতা হ্রাস ছাড়াই পজিশনিংয়ে আরও নিয়ন্ত্রণ দেয়। শুধুমাত্র চাইল্ড ব্লকের জন্য FrameLayout ব্যবহার করুন যেখানে ওভারলে বা প্লেসহোল্ডার প্রয়োজন।