آموزش برنامه نویسی اندروید

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

حال که نوع Layout ما LinearLayout است اگر سعی کنیم تا با موس خود یکی از TextView ها را گرفته و روی صفحه جا به جا کنیم، مشاهده می کنیم که نمی توانیم عناصر روی UI را به هر قسمتی که تمایل داریم مثلا پایین صفحه انتقال دهیم بلکه تنها گزینه ای که پیش روی ما است این می باشد که چنانچه Layout ما vertical باشد خواهیم توانست یک TextView با موس گرفته و آنرا به پایین یا بالای TextView دیگری کشیده و رها سازیم و یا اگر Layout ما horizontal یا "افقی" باشد فقط می توانیم یک TextView را با موس گرفته و آنرا به سمت راست یا چپ TextView دیگری کشیده و رها سازیم. به عبارت دیگر به هیچ وجه نخواهیم توانست تا با گرفتن یک TextView و کشیدن آن به سمت پایین صفحه آن را در آنجا قرار دهیم.

نوع Layout به کار گرفته شده در این پروژه LinearLayout است و چنانچه بخواهیم آن را به یک RelativeLayout تبدیل کنیم می بایست به صورت زیر عمل کنیم:

همانطور که در تصویر فوق مشاهده می شود با قرار دادن نشانگر موس خود روی UI یا همان صفحه مشکلی رنگ و راست کلیک کردن پنجره ای باز خواهد شد که از میان گزینه های آن همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است روی Change Layout به معنی "تغییر Layout پروژه" کلیک کرده و پنجره ای به شکل زیر خواهیم دید:

همانطور که در پنجره فوق مشاهده می شود مقابل New Layout Type: به معنی "نوع جدید Layout " یک Drop Down لیست است که با باز کردن آن می توانیم به لیستی از انواع مختلف Layout های مورد استفاده در یک اپلیکیشن دست پیدا کنیم. در این مثال پس از کلیک روی لیست گزینه RelativeLayout را انتخاب می کنیم. سپس با گزینه ای تحت عنوان Flatten hierarchy مواجه می شویم. در حقیقت زمانیکه بخواهیم یک Layout را به RelativeLayout تبدیل کنیم این گزینه نمایان خواهد شد. در صورتیکه این گزینه را تیک بزنیم این امکان برای ما فراهم خواهد شد تا نه تنها بتوانیم نوع Layout خود را به یک RelativeLayout تبدیل کنیم بلکه این امکان برای ما فراهم خواهد شد تا به صورت خودکار سلسله مراتب و جایگاه عناصر داخل UI را نیز تبدیل کنیم. به عبارت دیگر اندازه عناصر داخل UI و همچین ترتیب و جایگاه آن ها را نیز مد نظر قرار داده و بهترین حالت ممکن را ایجاد خواهد کرد. اکنون می توانیم روی گزینه OK کلیک نماییم.

پس از کلیک کردن روی دکمه OK و باز گشتن به محیط اکلیپس مشاهده خواهیم کرد که چیزی تغییر نکرده است اما این در حالی است که نوع Layout ما از LinearLayout به RelativeLayout مبدل شده و از این پس دست ما به مراتب برای تغییر مکان عناصر روی UI باز تر خواهد بود. با کلیک کردن روی Tab مربوط به main.xml کد زیر را مشاهده خواهیم کرد:

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/RelativeLayout1"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:orientation="horizontal" >
7. <TextView
8. android:id="@+id/TextView1"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_alignBaseline="@+id/textView1"
12. android:layout_alignParentLeft="true"
13. android:layout_alignParentTop="true"
14. android:text="@string/hello">
15. <TextView
16. android:id="@+id/textView1"
17. android:layout_width="wrap_content"
18. android:layout_height="wrap_content"
19. android:layout_alignParentTop="true"
20. android:layout_toRightOf="@+id/TextView1"
21. android:text="Large Text"
22. android:textAppearance="?android:attr/textAppearanceLarge" >
23. <RelativeLayout>

همانطور که در کد فوق مشاهده می شود تگ های ابتدایی و انتهای به RelativeLayout تبدیل شده اند. لازم به ذکر است که به منظور تبدیل یک LinearLayout به یک RelativeLayout صرفاً با تغییر این دو تگ می توان این تغییر را انجام داد اما این در حالی است که اگر از این روش استفاده کنیم امکانی که گزینه Flatten hierarchy برای ما ایجاد می کرد محروم خواهیم شد (پیشنهاد می شود همواره برای تبدیل Layout ها به یکدیگر از روش اول استفاده شود چرا که روش فوق الذکر احتمال خطای کدنویسی ما افزایش خواهد داد). اگر به کد فوق با دقت بیشتری نگاه کنیم خواهیم دید که علاوه بر تغییر تگ های ابتدای و انتهای فایل XML تعدادی متد جدید دیگر نیز به هر یک از TextView ها اضافه شده است. به طور خلاصه می توان گفت که این متدهای جدید همان قابلیتی که از آن طریق خواهیم توانست عناصر روی UI را در هرکجای Layout که خواستیم قرار دهیم به اپلیکیشن ما اضافه می کنند. پیش از توضیح بیشتر پیرامون این متدها مجدد به Tab مربوط به Graphical Layout باز می گردیم:

همانطور که در تصویر فوق نشان داده شده است با یک بار کلیک کردن روی TextView یی که حاوی متن Large Text است خواهیم دید که پنجره کوچکی نمایان خواهد شد که در تصویر فوق با یک مستطیل قرمز رنگ مشخص شده است. در حقیقت اینها همان متدهای جدیدی است که به این TextView پس از تبدیل Layout خود به RelativeLayout ایجاد شده اند. متد بالا متدی است تحت عنوان toRightOf به معنی "قرار گرفته در سمت راست ... " که Value این متد هم TextView1 است. به عبارت دیگر TextView1 همان TextView یی است که به صورت خودکار در حین ساخت اپلیکیشن ایجاد شده و حاوی عبارت Hello World می باشد. به طور خلاصه این متد حاکی از آن است که این TextView یی که روی آن کلیک کرده ایم در سمت راست TextView یی تحت عنوان TextView1 قرار دارد. متد دومی که در تصویر فوق مشاهده می شود alignParentTop نام دارد که معنی تحت الفظی آن "قرار گرفته به موازات قسمت بالایی رابط گرافیکی" می باشد. به عبارت دیگر خود RelativeLayout به منزله یک ظرفی است که دیگر عناصر روی UI همچون TextView ها و غیره را در خود جای می دهد. از همین روی RelativeLayout به عنوان Parent یا "والد" این TextView حساب خواهد شد. مقدار این متد برابر با true است یعنی این TextView به موازات قسمت فوقانی RelativeLayout قرار گرفته است. در حقیقت از آنجا که پس از تبدیل Layout خود به RelativeLayout هیچ گونه تغییری روی UI خود اعمال نکرده ایم، بالتبع همین دو متد در مورد این TextView نوشته شده اند. حال همانند تصویر زیر روی TextView دیگر کلیک می کنیم:

همانطور که در تصویر فوق ملاحظه می شود با کلیک کردن روی TextView سمت چپ خواهیم دید که متدهای مرتبط این TextView با RelativeLayout تغییر خواهند کرد. اکنون همانطور که در تصویر زیر نمایش داده شده است جایگاه یکی از TextView ها را تغییر می دهیم:

همانطور که در تصویر فوق مشاهده می شود با نشانگر موس TextView یی که حاوی متن Large Text است را گرفته و به وسط UI می کشیم و سپس دکمه موس خود را رها می کنیم. حال به متدهای مرتبط جدیدی که برای این TextView ایجاد شدند توجه کرده و می بینیم که تغییر کرده اند. به طور مثال متدی تحت عنوان centerHorizontal با Value یی تحت عنوان true برای این TextView ایجاد شده است. اگر به تصویر فوق توجه کنیم خواهیم دید که یک خط فرضی شبرنگ به صورت عمودی روی صفحه قرار گرفته است(البته از آنجا که ممکن است شما این TextView را دقیقاً در وسط UI رها نکرده باشید این خط فرضی را مشاهده نکنید که در این صورت پیشنهاد می شود این TextView را با نشانگر موس گرفته و آنقدر آن را به چپ و راست بکشیم که این خط نمایان شود). به طور کلی این خط حاکی از آن است که این TextView دقیقاً در وسط UI به صورت افقی قرار گرفته است. حال برای مشاهده کل متدهای ایجاد شده برای این TextView پس از تغییر جایگاه آن روی Tab مربوط به main.xml کلیک می کنیم:

1. <?xml version="1.0" encoding="utf-8"?>
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:id="@+id/RelativeLayout1"
4. android:layout_width="fill_parent"
5. android:layout_height="fill_parent"
6. android:orientation="horizontal" >
7. <TextView
8. android:id="@+id/TextView1"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:layout_alignBaseline="@+id/textView1"
12. android:layout_alignParentLeft="true"
13. android:layout_alignParentTop="true"
14. android:text="@string/hello" >
15. <TextView
16. android:id="@+id/textView2"
17. android:layout_width="wrap_content"
18. android:layout_height="wrap_content"
19. android:layout_below="@+id/TextView1"
20. android:layout_centerHorizontal="true"
21. android:layout_marginTop="190dp"
22. android:text="Large Text"
23. android:textAppearance="?android:attr/textAppearanceLarge" >
24. <RelativeLayout>

اگر به TextView دوم نگاه کنیم می بینیم که سه متد جدید به آن اضافه شده است. متد اول below به معنی "زیر" است که Value مرتبط با آن @+id/TextView1 است. به عبارت دیگر این متد حاکی از آن است که این TextView زیر یک TextView دیگر تحت عنوان TextView1 قرار گرفته است. متد بعدی centerHorizontal است که Value آن ture است که حاکی از آن است که این TextView به صورت افقی در وسط UI قرار گرفته است و متد آخر marginTop است که Value آن 190dp است که حاکی از آن است که این TextView دارای فاصله 190dp از بالای UI می باشد(به خاطر داشته باشیم که در XML کلیه Value ها داخل گیومه قرار می گیرند). به طور خلاصه می توان گفت که در RelativeLayout همانگونه که از نام آن بر می آید جایگاه عناصر روی UI نسبت به یکدیگر نسبی بوده و با استفاده از متدهای مختلف مرتبط با RelativeLayout می توان بر این نسبت ها کنترل داشت.