زمانی که برای یک activity ، یک فایل xml متناظر می سازیم، معمولا نوع نمایش عناصر فایل xml متناظر آن، به صورت یکی از دو حالت LinearLayout و RelativeLayout می باشد. تفاوت این دو نوع نمایش، در نحوه قرارگیری عناصر مختلف در کنار یکدیگر می باشد.
مثلا اگر ما یک ImageView و یک TextView داشته باشیم، چنانچه بخواهیم که این دو عنصر، دقیقا در کنار هم چیده شوند، باید از حالت LinearLayout استفاده کنیم و چنانچه بخواهیم TextView بر روی ImageView قرار بگیرد، باید از حالت RelativeLayout استفاده کنیم.
برای آشنایی بهتر با این دو حالت، یک پروژه می سازیم و سعی می کنیم که تفاوت این دو حالت را به شما نشان بدهیم.
در برنامه eclipse ، ابتدا یک پروژه اندروید با نام Kelidestan.com بسازید (نام package را برابر com.example.kelidestan انتخاب کنید. نام activity اصلی را برابر Activity1 انتخاب کنید و فایل xml متناظر آن را هم، activity_activity1 انتخاب کنید).
فایل activity_activity1.xml را باز می کنیم. کدهای آن به این صورت می باشد :
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".Activity1" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</RelativeLayout>
به تگ RelativeLayout (یک تگ شروع و یک تگ پایان) دقت کنید. این تگ است که مشخص کرده است که نوع نمایش فایل xml به صورت RelativeLayout باشد. بنابراین اگر بخواهیم که نوع نمایش، به صورت LinearLayout باشد، باید دو عبارت RelativeLayout را به LinearLayout تبدیل کنیم، یعنی کدها باید به صورت زیر تغییر داده شوند :
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context=".MainActivity" >
<TextView
android:id="@+id/textView1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/hello_world" />
</LinearLayout>
حالت LinearLayout :
ابتدا حالت LinearLayout را شرح می دهیم. زمانی که نوع نمایش فایل xml به صورت LinearLayout باشد، می توانیم عناصر مورد نظرمان را که می خواهیم در فایل xml قرار بگیرند را در کنار هم بچینیم، به گونه ای که بر روی هم قرار نگیرند. این نوع چیدمان عناصر، مثل چیدن تعدادی کتاب در یک قفسه می باشد. ابتدا فایل xml با نام activity_activity1.xml را باز می کنیم (نمایش به صورت گرافیکی). این فایل به صورت گرافیکی، همانند شکل زیر خواهد بود (در حالت LinearLayout) :
به گزینه های نمایش داده شده در بالای تصویر فایل xml دقت کنید. دو گزینه را با شماره های 1 و 2 مشخص کرده ایم. این دو گزینه، تنها برای حالت LinearLayout نمایش داده می شوند و برای حالت RelativeLayout ، چنین گزینه هایی وجود ندارد.
همان طور که قبلا گفتیم، چیده شدن عناصر فایل xml در حالت LinearLayout ، همانند چیده شدن تعدادی کتاب در کنار هم در قفسه کتاب می باشد. حال اگر ما گزینه شماره 1 را انتخاب کنیم، عناصر در کنار هم و در جهت افقی چیده می شوند، اما اگر گزینه شماره 2 را انتخاب کنیم، عناصر در جهت عمودی چیده می شوند. دقت کنید که در هر دو حالت، عناصر کاملا به هم می چسبند (نه روی هم قرار می گیرند و نه از هم فاصله می گیرند).
اگر در شکل قبل دقت کنید، گزینه شماره 1 انتخاب شده است، بنابراین عناصر در جهت افقی در کنار هم چیده می شوند. یک Button را به داخل فایل xml می کشیم تا ببینیم نحوه قرار گیری آن به چه صورت خواهد بود :
مشاهده می کنید که زمانی که Button را به درون صفحه می کشیم، یک سری خطوط خط چین نمایش داده می شود که عملا نشان می دهد که Button را تنها می توانیم به صورت افقی در کنار TextView قرار بدهیم. بعد از رها کردن دکمه موس، موقعیت Button و TextView به صورت شکل زیر می باشد :
به گزینه ای که در شکل زیر با فلش قرمز رنگ مشخص کرده ایم، توجه کنید :
بر روی آن کلیک می کنیم تا دو عنصر Button و TextView ، در جهت عمودی، در کنار هم چیده شوند. نتیجه به صورت شکل زیر می باشد :
حالت RelativeLayout :
در حالت RelativeLayout ، می توانیم تعیین کنیم که عناصر بر روی یکدیگر قرار بگیرند.
شکل زیر، فایل xml را به صورت گرافیکی، در حالت RelativeLayout ، نمایش داده است :
مشاهده می کنید که از آن دو گزینه ای که برای حالت LinearLayout داشتیم، دیگر خبری نیست.
اکنون یک button را به درون صفحه فایل xml می کشیم. تصویری همانند تصویر زیر را خواهیم دید :
Button را در هر محل دلخواه می توانیم قرار دهیم. مثلا اگر دکمه موس را رها کنیم، محل قرار گیری Button به صورت شکل زیر خواهد بود :
یا اینکه حتی می توانیم button را بر روی TextView قرار بدهیم، مثل شکل زیر (با موس، Button را گرفته و به محل قرارگیری Textview می بریم) :
مشاهده می کنید که button بر روی TextView قرار گرفته است.
سورس منو در نوار صفحه