در چند فصل قبلی با چیدمان خطی یا LinearLayout آشنا شدید. در این فصل می خواهیم با چیدمان وابسته یا RelativeLayout آشنا شویم.

مقدمه:

چیدمان خطی یا RelativeLayout نوعی چیدمان است که جای عناصر در آن به دقت نسبت به والد (Parent) یا خواهرانش (Sibling) مشخص می شود. در ادامه با این تعریف بیشتر آشنا می شویم.

هر RelativeLayout دارای قسمتهایی است که فرزندانش می توانند جای خود را بر اساس آنها مشخص کنند. عکس زیر این موضوع را توضیح می دهد:

با استفاده از این مکانها می توان جای عناصر داخلی RelativeLayout را مشخص کرد. مثلاً فرض کنید می خواهیم دکمه ای به پایین این چیدمان اضافه کنیم. مشابه شکل زیر:

اگر کد این دکمه (Button) را ببینید، دو ویژگی جدید می بینید که جای این دکمه را در RelativeLayout والد مشخص می کنند:

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Button" />

این دو ویژگی android:layout_alignParentBottom و android:layout_centerHorizontal هستند. ویژگی اول می گوید این دکمه در قسمت پایین RelativeLayout والد قرار می گیرد و دومی هم می گوید که این دکمه در وسط محور افقی قرار می گیرد. ترکیب این دو ویژگی با هم، دکمه را «وسط افقی و پایین» چیدمان قرار می دهد. حالا احتمالاً حدس می زنید که برای قرار دادن دکمه مثلاً در قسمت بالای RelativeLayout احتمالاً ویژگی دیگری باید باشد شبیه android:layout_alignParentTop. درست حدس زدید!

جاسازی عناصر داخل RelativeLayout بر حسب والد

همانطور که گفتیم برای قرار دادن عناصر داخل RelativeLayout باید دقیقاً جای آنها را مشخص کنید. برای این کار نقاط اصلی روی یک RelativeLayout را که «بالا»، «پایین»، «چپ» و «راست» است معرفی کردیم. هر کدام از این پهار نقطه یک ویژگی اختصاصی دارند. این ویژگی ها به شرح زیر هستند:

android:layout_alignParentTop="true"
android:layout_alignParentBottom="true"
android:layout_alignParentRight="true"
android:layout_alignParentLeft="true"

این ویژگی ها را می توان با هم ترکیب کرد. برای مثال اگر بخواهیم یک دکمه را بالا و سمت راست نشان دهیم، باید از دو ویژگی android:layout_alignParentTop و android:layout_alignParentRight با مقادیر true استفاده کنیم:

کد این دکمه در RelativeLayout والد این است:

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignParentRight="true"
        android:text="Button" />

برای تمرین بیشتر، جای دکمه را در صفحه جا به جا کنید و کد تولید شده متناظر را ببینید.

در مرکز محور افقی یا عمودی قرار دادن عناصر داخل RelativeLayout

اگر یک View را داخل یک RelativeLayout قرار دهیم و بخواهیم آن را در محور افقی وسط والد خود نمایش دهیم باید ویژگی android:layout_centerHorizontal آن را true کنیم. با این کار View مورد نظر در وسط محور افقی قرار می گیرد. به همین ترتیب اگر ویژگی android:layout_centerVertical را True کنیم، View در وسط محور عمودی قرار می گیرد. حال اگر بخواهیم یک View هم در وسط محور افقی باشد و هم در وسط محور عمودی، می توانیم هم زمان هر دو ویژگی فوق را true کنیم یا به صورت خلاصه ویژگی android:layout_centerInParent را true کنیم.

جاسازی عناصر داخل RelativeLayout بر حسب خواهرانش

همانطور که در تعریف اولیه RelativeLayout گفتیم، جای عناصر را می توان بر اساس سایر عناصر موجود که اصطلاحاً Sibling یا خواهر نامیده می شوند نیز مشخص کرد. برای این کار هم چندین ویژگی وجود دارد که در این قسمت با آنها آشنا می شوید.

فرض کنید دکمه ای را در وسط صفحه دارید. مثل شکل زیر:

حالا یک دکمه دیگر بگیرید و آن را در بالای این دکمه رها کنید. مثل عکس زیر:

حالا کد را باز کنید و ویژگی های این دکمه را ببینید:

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/button1"
        android:layout_centerHorizontal="true"
        android:text="Button" />

در میان ویژگی های این دکمه یک ویژگی برای ما جدید است: android:layout_above. این ویژگی جدید اعلام می کند که این دکمه «بالای عنصری با شناسه button1» قرار می گیرد. حالا اگر دکمه اصلی را جابجا کنیم، این دکمه هم با آن جابجا می شود، چرا؟ چون تعریف کرده ایم که این دکمه همواره بالای دکمه ای با شناسه button1 است! عکس زیر را ببینید. در این عکس ما دکمه اصلی را به پایین صفحه منتقل کرده ایم و دکمه دیگر هم همراه با آن جابجا شده است:

برخی از ویژگی هایی که جای یک عنصر را بر اساس خواهرانش مشخص می کنند، اینها هستند:

android:layout_above="@+id/anotherView"
android:layout_below="@+id/anotherView"
android:layout_toRightOf="@+id/anotherView"
android:layout_toLeftOf="@+id/anotherView"

ویژگی align یا تراز RelativeLayout

توانایی های RelativeLayout محدود به موارد گفته شد و هنوز ویژگی های دیگری هم وجود دارد که می توان با آنها یک رابط کاربری فوق العاده ساخت. یکی از این ویژگی ها align یا تراز است. با استفاده از این ویژگی می توانید دو یا چند View را با هم تراز کنید. تراز کردن می تواند در پنج جهت انجام شود. تراز کردن بالا یا top، راست یا right، چپ یا left، پایین یا bottom و خط پایه یا baseline.

مثلاً فرض کنید می خواهید سه دکمه را در صفحه از سمت چپ با هم تراز کنید؛ مثل عکس زیر:

کد این چیدمان این است:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="34dp"
        android:layout_marginTop="39dp"
        android:text="Button One" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_below="@+id/button1"
        android:text="Button Two" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button2"
        android:layout_below="@+id/button2"
        android:text="Button Three" />

</RelativeLayout>

به ویژگی android:layout_alignLeft در دکمه های دوم و سوم توجه کنید.

حال فرض کنید بخواهیم یک دکمه را از سمت چپ با یک View تراز کنیم و از سمت راست با یک View دیگر؛ مثل عکس زیر:

در این حالت دکمه Button One و Button Two با خظ پایه تراز شده اند و دکمه Button Three از سمت چپ با Button One تراز شده و از سمت راست با Button Two. کد این چیدمان را ببینید:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="${relativePackage}.${activityClass}" >

    <Button
        android:id="@+id/button1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:layout_marginLeft="34dp"
        android:layout_marginTop="39dp"
        android:text="Button One" />

    <Button
        android:id="@+id/button2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignBaseline="@+id/button1"
        android:layout_alignBottom="@+id/button1"
        android:layout_toRightOf="@+id/button1"
        android:text="Button Two" />

    <Button
        android:id="@+id/button3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignLeft="@+id/button1"
        android:layout_alignRight="@+id/button2"
        android:layout_below="@+id/button1"
        android:text="Button Three" />

</RelativeLayout>

کجا از RelativeLayout استفاده کنیم؟

حالا که هم با LinearLayout آشنا شده اید و هم با RelativeLayout، احتمالاً این سؤال برایتان مطرح می شود که در هر کجا از کدام یک از اینها استفاده کنید؟ قبل از این که به این پرسش پاسخ بدهم باید مزایا و معایب هر کدام از این دو چیدمان را توضیح دهم.

مزایای LinearLayout:

1. سادگی فراوان: چیدمان خطی ساده است. می دانیم که عناصر داخل آن به ترتیبی که در فایل XML کد ظاهر می شوند، در Layout هم قرار می گیرند؛ حالا یا افقی یا عمودی. با چند ویژگی ساده می توان کمی این رفتار را تغییر داد. با این حال، LinearLayout ساختار ساده ای دارد و به سادگی می توان آن را حتا در ذهن تصور کرد.
2. قابلیت تغییر ساده: به علت سادگی فروان این چیدمان، تغییر دادن آن هم بسیار ساده است. اگر بخواهید مثلاً دکمه ای را بین دو View دیگر قرار دهید، فقط باید آن را در کد میان دو View دیگر قرار دهید! به همین سادگی!

معایب LinearLayout:

1. ممکن نبودن ساخت برخی چیدمان ها: سادگی زیاد چیدمان خطی و محدودیت امکانات آن باعث شده است که نتوان برخی چیدمانها که در برنامه های مختلف اندروید می بینیم، صرفاً با اتکا به چیدمان خطی و ویژگی های آن بسازیم.
2. حجم زیاد کد برای ساخت چیدمان ها: اگر بخواهیم یک رابط کاربری پیچیده و پر از View های مختلف که به شدت در هم آمیخته شده اند، با LinearLayout بسازیم، باید Layout های زیادی را به صورت تو در تو به کار ببریم که باعث حجم بالای کد می شود.

مزایای RelativeLayout:

1. امکانات فراوان: همانطور که در این فصل دیدید، RelativeLayout امکانات خیلی بیشتری از LinearLayout دارد. این امکانات بیشتر، عملاً دو مزیت زیر را به ارمغام می آورد.
2. امکان ساخت برخی چیدمانها که در LinearLayout نشدنی است: امکانات فراوان RelativeLayout باعث می شود که برخی چیدمانها که آنها را نمی توان به LinearLayout ساخت، با اندکی ذوق و سلیقه و کمی تجربه، به سادگی با RelativeLayout ساخت. در آینده با برخی از این چیدمانها آشنا خواهید شد!
3. حجم کم کد برای ساخت چیدمان های پیچیده: چیزی که بسیار مشخص است این است که برای ساخت یک چیدمان مشابه، اگر از RelativeLayout استفاده کنیم، حجم کد تولید شده بسیار کمتر از وقتی است که از LinearLayout استفاده می کنیم.

معایب RelativeLayout:

1. پیچیده بودن کد XML چیدمان: گفتیم که کد تولید شده برای RelativeLayout کمتر از کد LinearLayout است ولی این کمتر کد، نتیجه معکوسی در سادگی کد دارد. هر چه که امکانات بیشتر می شود، حجم کد کمتر ولی پیچیدگی آن بیشتر می شود. با کمی تجربه، به این نتیجه خواهید رسید!
2. سخت بودن تغییر چیدمان طراحی شده: گفتیم که با RelativeLayout می توان چیدمانهایی ساخت که با LinearLayout یا سخت است یا ممکن نیست. از سوی دیگر چیدمانی که با RelativeLayout ساخته می شود را نمی توان به سادگی تغییر داد. فرض کنید یک View در Layout خود دارید که چند View دیگر، به شدت به آن وابسته اند. اگر بخواهید آن View را حذف کنید، کل چیدمان شما به هم می ریزد و مجبورید کل آنها را مجدداً طراحی کنید!

نتیجه گیری:

بر اساس تجربه نوشتن چندین برنامه، معمولاً روشی که من برای ساخت رابط کاربری برنامه ها انجام می دهم به این صورت است که کلیت چیدمان را بر اساس LinearLayout می سازم. مثلاً اگر برنامه قرار است سربرگ یا Header و محتوا یا Content و ته برگ یا Footer داشته باشد (مثل مثالی که در فصل های مربوط به LinearLayout دیدیم)، شکل کلی صفحه را با LinearLayout می سازم و اگر هر کدام از این سه قسمت، چیدمانی داشت که ساخت آن با LinearLayout سخت یا نشدنی بود، آن قسمت ها را با RelativeLayout می سازم. در فصل های آینده، احتمالاً هر کجا چیدمانی داشته باشیم، از این الگوی کلی استفاده خواهیم کرد.

---

در چند فصل بعد، درباره گرافیک برنامه های اندروید بیشتر خواهید آموخت! اگر سؤالی دارید، در نظرات بپرسید!