آموزش اندروید، فصل ۱۲: آشنایی با RelativeLayout

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

مقدمه:

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

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

android-ch12-1-relative-layout-main

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

android-ch12-2-add-button-to-bottom-relative-layout

اگر کد این دکمه (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 استفاده کنیم:

android-ch12-3-add-button-to-top-right-relative-layout

کد این دکمه در 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 یا خواهر نامیده می شوند نیز مشخص کرد. برای این کار هم چندین ویژگی وجود دارد که در این قسمت با آنها آشنا می شوید.

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

android-ch12-4-sibling-relations-relative-layout

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

android-ch12-5-sibling-relations-above-relative-layout

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

    <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-ch12-6-sibling-relations-move-views-relative-layout

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

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.

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

android-ch12-7-align-with-siblings-left-relative-layout

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

<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 دیگر؛ مثل عکس زیر:

android-ch12-8-align-with-siblings-left-right-relative-layout

در این حالت دکمه 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 می سازم. در فصل های آینده، احتمالاً هر کجا چیدمانی داشته باشیم، از این الگوی کلی استفاده خواهیم کرد.


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

18 فکر می‌کنند “آموزش اندروید، فصل ۱۲: آشنایی با RelativeLayout

  1. زهرا

    عالیییییییییییییییییییییییییییییییییییییییییییییییییی بوددد ممنون از شما. اجرتون با خداا
    تشکر

    پاسخ
  2. reza3822

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

    پاسخ
  3. اعظم

    با عرض سلام
    من از مطالبتون در یادگیری RelativeLayout استفاده کردم و دوست دارم این لینک رو در محصول آموزشی که تولید می کنم قرار بدهم. اما طبق لایسنس باید چند تا مورد رو کنار هم بگذارم. شیوه صحیح اش چگونه است؟ اگر فقط لینک این بخش رو قرار بدهم و موارد دیگر رو نگذارم مشکلی هست؟

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سلام. خوشحالم که به مجوز مطالب اهمیت می‌دهید. طبق این مجوز CC BY 4.0 شما می‌توانید محتوا را بازنشر کنید، تغییر بدهید یا حتی آن را تجاری کنید. فقط باید به نحوی که کاربر محتوای شما لینک و اشاره مستقیم به استفاده از این مطلب را ببیند و طبق این مجوز شما هم باید همین آزادی را به کاربران خود بدهید.

      پاسخ
  4. اعظم

    با عرض سلام
    آقای بهزادیان نژاد، اصولاً مواردی مثل مطالب سایت شما که تحت CC BY 4.0 یا CC BY-SA 4.0 هستند رو چگونه باید مرجع نویسی کرد؟
    ۱-اگر بخشی از کد را استفاده کنیم
    ۲-اگر همه کد را استفاده کنیم
    ۳-اگر از ترکیب کد شما و کدهای دیگر برای رسیدن به هدفمون استفاده کنیم
    ۴-اگر از بخشی از کد شما استفاده کنیم ولی تغییر هم بدهیم تا به هدفمون برسیم
    با سپاس

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      سلام. مجوز CC BY 4.0 برای مطالب سایت است. کدها اگر مجوزی صراحتا ذکر نشده باشد متعلق به حوزه عمومی (public domain) هستند.

      پاسخ
  5. اعظم

    با سلام و تشکر از شما
    من از مطالب این بخش خیلی خوشم اومد و تصمیم گرفتم که در کارم معرفی اش کنم. اولش به لایسنس توجهی نداشتم ولی بک یکباره نظرم جلب شد. اصولاً لایسنس ها برای من گیج کننده هستند و سوال هایی رو در ذهنم ایجاد می کنند مثل اینکه اگر اثرم رو ثبت کنم و به چاپ برسونم باید بگویم که تحت این لایسنس است؟ و اینکه هر کسی می تواند اثر ثبت شده من را بفروشد یا توزیع کند؟

    پاسخ
    1. علی بهزادیان نژاد نویسنده

      هر چیزی که تولید می‌شه، یک دارایی حساب میشه. همیشه باید لایسنس کار مشخص باشه. مثلا کتابهای خارجی رو ببینید. حتما یک جایی در اول کتاب نوشته که نقل مطالب آزاده یا محدوده و چه شرایطی داره. اگر چیزی صراحتا لایسنس نداشته باشه و به نوعی منتشر شده باشه که دسترسی عموم بهش وجود داشته باشه اصطلاحا بهش می‌گن پابلیک دومین (public domain) و استفاده ازش مجازه. در کنار این‌ها یک نوع استفاده است که بهش می‌گن استفاده منصفانه یا Fair Use. مثلا شما قسمت کوتاهی از یک آهنگ یا نوشته رو منتشر کنی و مثلا نقد کنی. استفاده منصفانه رو حس مشترک یا common sense جامعه مشخص می‌کنه و در موارد اختلافی به هیات منصفه ارجاع میشه.

      پاسخ

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *