RelativeLayout — جوہر، Android ایپلیکیشنز میں لے آؤٹ قواعد

RelativeLayout کیا ہے؟

RelativeLayout — ایک ViewGroup جو Android SDK میں API Level 1 سے متعارف کرائی گئی، جو اعلانیہ قواعد (layout rules) کے ذریعے چائلڈ عناصر کو پیرنٹ یا دیگر چائلڈ عناصر کے نسبت پوزیشن دیتی ہے۔ ہر قاعدہ ایک XML صفت کے ذریعے سیٹ کیا جاتا ہے جیسے android:layout_above، android:layout_below، android:layout_toLeftOf جس میں ہدف عنصر کی ID کی قدر ہوتی ہے۔

RelativeLayout کے آنے سے پہلے، ڈویلپرز کو ہر غیر معیاری پوزیشننگ کے لیے نیسٹڈ LinearLayout استعمال کرنا پڑتا تھا — اس سے گہری نیسٹنگ اور سست رینڈرنگ ہوتی تھی۔ RelativeLayout نے ایک ہی درجہ بندی کی سطح پر رشتہ دار پوزیشننگ پیش کرکے اس مسئلے کو حل کیا۔ تاہم، اس کی لچک جدید ConstraintLayout کے مقابلے میں محدود ہے: RelativeLayout زنجیریں، رکاوٹیں، رہنما خطوط یا فیصد پر مبنی جہتوں کو سپورٹ نہیں کرتا۔

RelativeLayout کی دو اہم خصوصیات ہیں: ایک onMeasure پاس (LinearLayout کے برعکس جس میں weight کے لیے دو پاس درکار ہیں) اور اعلان کی ترتیب پر انحصار — اگر عنصر A عنصر B کا حوالہ دیتا ہے، اور B کا اعلان A کے بعد کیا گیا ہے، تو A کی پیمائش کے وقت B کا سائز معلوم ہونا چاہیے۔ Android Developers Guide (2024) کے مطابق، RelativeLayout پیمائش ایک پاس میں کرتا ہے اگر تمام قواعد پہلے سے ماپے گئے عناصر کا حوالہ دیں۔ بصورت دیگر، دوسرے پاس کی ضرورت ہوتی ہے، جو کارکردگی کو کم کرتا ہے۔

RelativeLayout کی کب ضرورت ہے؟

RelativeLayout سادہ لے آؤٹ کے لیے موزوں ہے جس میں 3–7 عناصر ہوں جہاں رشتہ دار پوزیشننگ درکار ہو (بٹن کے اوپر لیبل، متن کے دائیں آئیکن، اسکرین کے نیچے پینل)۔ نئے پروجیکٹس کے لیے، ConstraintLayout کی سفارش کی جاتی ہے، لیکن RelativeLayout اب بھی میراثی کوڈ اور لائبریریوں میں وسیع پیمانے پر استعمال ہوتا ہے۔

پوزیشننگ کے قواعد: relative اور align

RelativeLayout دو قسم کے قواعد استعمال کرتا ہے: relative قواعد (کسی دوسرے عنصر کے نسبت پوزیشننگ) اور align قواعد (پیرنٹ سے اینکرنگ)۔ ہر چائلڈ عنصر میں لامحدود تعداد میں قواعد ہو سکتے ہیں، لیکن متصادم قواعد (مثلاً، alignParentTop اور کسی دوسرے عنصر کا below) آخری اعلان کردہ صفت کے حق میں حل کیے جاتے ہیں۔

Relative قواعد: - android:layout_above="@id/target" — عنصر کا نچلا کنارہ target کے اوپری کنارے سے اینکر ہوتا ہے۔ - android:layout_below="@id/target" — عنصر کا اوپری کنارہ target کے نچلے کنارے سے اینکر ہوتا ہے۔ - android:layout_toLeftOf="@id/target" — دایاں کنارہ target کے بائیں کنارے سے اینکر ہوتا ہے۔ - android:layout_toRightOf="@id/target" — بایاں کنارہ target کے دائیں کنارے سے اینکر ہوتا ہے۔ - android:layout_toStartOf="@id/target" — RTL مقامات کے لیے toLeftOf کے مشابہ۔ - android:layout_toEndOf="@id/target" — RTL کے لیے toRightOf کے مشابہ۔

Align قواعد (پیرنٹ سے): - android:layout_alignParentTop="true" — عنصر کا اوپری کنارہ پیرنٹ کے اوپری کنارے سے ملتا ہے۔ - android:layout_alignParentBottom="true" — نچلا کنارہ پیرنٹ کے نچلے کنارے سے ملتا ہے۔ - android:layout_alignParentLeft="true" — بایاں کنارہ پیرنٹ کے بائیں کنارے سے ملتا ہے۔ - android:layout_alignParentRight="true" — دایاں کنارہ پیرنٹ کے دائیں کنارے سے ملتا ہے۔ - android:layout_alignParentStart اور android:layout_alignParentEnd — RTL کے لیے۔

دیگر عناصر سے align قواعد: - android:layout_alignTop="@id/target" — عنصر کا اوپری حصہ target کے اوپری حصے سے ملتا ہے۔ - android:layout_alignBottom، android:layout_alignLeft، android:layout_alignRight، android:layout_alignStart، android:layout_alignEnd — مشابہ۔ - android:layout_alignBaseline="@id/target" — متن کی بنیاد لائن کے مطابق سیدھ (مختلف فونٹ سائز کی تاروں کے لیے مفید)۔

مرکزیت اور Z ترتیب

RelativeLayout میں مرکزیت تین صفات کے ذریعے سیٹ کی جاتی ہے: android:layout_centerInParent="true" (دونوں محوروں پر پیرنٹ کا مرکز)، android:layout_centerHorizontal="true" (افقی مرکز) اور android:layout_centerVertical="true" (عمودی مرکز)۔ مرکزیت دیگر قواعد کے ساتھ مطابقت رکھتی ہے: ایک عنصر افقی طور پر مرکز میں ہو سکتا ہے اور پیرنٹ کے نچلے کنارے سے اینکر ہو سکتا ہے۔

Z ترتیب (اوورلی ترتیب) RelativeLayout میں XML میں عناصر کے اعلان کی ترتیب سے متعین ہوتی ہے۔ پہلے اعلان کردہ عنصر پہلے کھینچا جاتا ہے (نیچے ہوگا)، آخری — آخر میں (اوپر ہوگا)۔ اگر آپ XML کو تبدیل کیے بغیر اوورلی ترتیب تبدیل کرنا چاہتے ہیں، تو android:elevation (API 21 سے) استعمال کریں — زیادہ elevation والے عناصر اوپر کھینچے جاتے ہیں۔ API 21 سے نیچے کے ورژن کے لیے، اوورلی ترتیب صرف اعلان کی ترتیب سے کنٹرول ہوتی ہے۔

اہم: RelativeLayout پیرنٹ کے لیے android:elevation صفت کو سپورٹ نہیں کرتا — ہر عنصر اپنی elevation کو کنٹرول کرتا ہے۔ جب پوزیشننگ کے قواعد اور elevation متصادم ہوں (مثلاً، اوورلیپنگ عناصر)، elevation رینڈرنگ کے لیے ترجیح رکھتا ہے، لیکن پوزیشننگ کے لیے نہیں — زیادہ elevation والا عنصر بصری طور پر دوسرے عنصر کو اوورلیپ کر سکتا ہے، چاہے اس کے لے آؤٹ قواعد اسے "پیچھے" رکھیں۔

مثالیں: RelativeLayout کے ساتھ XML لے آؤٹ

مثال 1: صارف پروفائل

اوپر مرکز میں اوتار، اوتار کے نیچے نام، نام کے نیچے حیثیت، اسکرین کے نیچے ایکشن بٹن۔ تمام عناصر ترتیب وار اینکرنگ کے لیے relative قواعد استعمال کرتے ہیں۔

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <ImageView
        android:id="@+id/avatar"
        android:layout_width="100dp"
        android:layout_height="100dp"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="32dp"
        android:src="@drawable/avatar_placeholder" />

    <TextView
        android:id="@+id/user_name"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/avatar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:text="ایوان ایوانوف"
        android:textSize="20sp"
        android:textStyle="bold" />

    <TextView
        android:id="@+id/user_status"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/user_name"
        android:layout_centerHorizontal="true"
        android:text="آن لائن"
        android:textColor="@color/green" />

    <Button
        android:id="@+id/edit_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="24dp"
        android:text="پروفائل میں ترمیم کریں" />

</RelativeLayout>

اوتار marginTop + centerHorizontal کے ذریعے اوپر سے اینکر ہے، نام layout_below کے ذریعے اوتار کے نیچے، حیثیت نام کے نیچے، اور بٹن alignParentBottom کے ذریعے پیرنٹ کے نچلے کنارے سے اینکر ہے۔ تمام عناصر ایک دوسرے سے آزاد ہیں — کوئی زنجیر یا نیسٹنگ نہیں۔

مثال 2: آئیکن اور بیج کے ساتھ پینل

اوپری دائیں کونے میں سرخ بیج (نمبر کے ساتھ دائرہ) والا آئیکن۔ بیج آئیکن کے نسبت اس کے کناروں پر سیدھ کے ذریعے اوورلیپ کے لیے منفی مارجن کے ساتھ پوزیشن کیا گیا ہے۔

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/icon"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:src="@drawable/ic_notification" />

    <TextView
        android:id="@+id/badge"
        android:layout_width="20dp"
        android:layout_height="20dp"
        android:layout_alignTop="@+id/icon"
        android:layout_alignRight="@+id/icon"
        android:layout_marginTop="-6dp"
        android:layout_marginRight="-6dp"
        android:gravity="center"
        android:background="@drawable/badge_background"
        android:text="3"
        android:textColor="@android:color/white"
        android:textSize="10sp" />

</RelativeLayout>

بیج آئیکن کے اوپری اور دائیں کناروں سے اینکر ہے۔ منفی مارجن (-6dp) بیج کو باہر کی طرف منتقل کرتے ہیں، آئیکن کی سرحد کو اوورلیپ کرنے کا اثر پیدا کرتے ہیں۔ یہ اطلاعات کے لیے ایک مقبول نمونہ ہے، جس کے لیے RelativeLayout کے بغیر FrameLayout یا کسٹم ڈرائنگ کی ضرورت ہوگی۔

مثال 3: RelativeLayout کے ساتھ لاگ ان اسکرین

لاگ ان فارم: لوگو اوپر مرکز میں، اس کے نیچے ای میل فیلڈ، ای میل کے نیچے پاس ورڈ فیلڈ، پاس ورڈ کے نیچے "لاگ ان" بٹن، "رجسٹر" لنک نیچے سے اینکر۔ تمام عناصر layout_below کے ذریعے ترتیب وار اینکر ہیں۔

<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="24dp">

    <TextView
        android:id="@+id/logo"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="48dp"
        android:text="MyApp"
        android:textSize="32sp"
        android:textStyle="bold" />

    <EditText
        android:id="@+id/email_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/logo"
        android:layout_marginTop="32dp"
        android:hint="Email" />

    <EditText
        android:id="@+id/password_input"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/email_input"
        android:layout_marginTop="16dp"
        android:hint="پاس ورڈ"
        android:inputType="textPassword" />

    <Button
        android:id="@+id/login_button"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/password_input"
        android:layout_marginTop="24dp"
        android:text="لاگ ان کریں" />

    <TextView
        android:id="@+id/register_link"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="16dp"
        android:text="اکاؤنٹ نہیں ہے؟ رجسٹر کریں"
        android:textColor="@color/primary" />

</RelativeLayout>

اسکرین ایک ہی درجہ بندی کی سطح پر 5 عناصر استعمال کرتی ہے۔ اوپر سے نیچے کا بہاؤ (لوگو → ای میل → پاس ورڈ → بٹن) layout_below کے ذریعے حاصل کیا جاتا ہے، اور لنک alignParentBottom کے ذریعے نیچے دھکیل دیا جاتا ہے۔ اسی فعالیت کے لیے، LinearLayout کو دو نیسٹڈ کنٹینرز کی ضرورت ہوگی (ایک اوپری گروپ کے لیے، دوسرا weight کے ساتھ لنک کے لیے)۔

RelativeLayout بمقابلہ ConstraintLayout: موازنہ

رشتہ دار پوزیشننگ کے لیے دو ViewGroup کا موازنہ: RelativeLayout (کلاسک، API 1+) اور ConstraintLayout (جدید، Jetpack)۔ معیار: لچک، کارکردگی، RTL سپورٹ اور موافقت۔

RelativeLayout ایک کے علاوہ تقریباً ہر پہلو میں ConstraintLayout سے کمتر ہے: یہ API 1 سے Android SDK میں بلٹ ان ہے اور اسے اضافی انحصار کی ضرورت نہیں ہے۔ ان پروجیکٹس کے لیے جو اب بھی API 14 (Android 4.0) سے نیچے minSdk استعمال کرتے ہیں، RelativeLayout رشتہ دار پوزیشننگ کے لیے واحد معیاری آپشن ہے۔ باقی تمام صورتوں میں، Google ConstraintLayout کی سفارش کرتا ہے۔