تماشای برخط [لینک مستقیم] فیلم آموزشی «واحدها»
زیر نویس انگلیسی [English Subtitle]

دریافت نسخه‌ی pdf این آموزش [641 کیلوبایت]

خوب تا الان به طور پیش فرض از صفحه‌بندی نسبی (RelativeLayout) برای واسط کاربری پروژه‌هامون استفاده می‌کردیم. حالا می‌خوایم با انواع صفحه‌بندی آشنا بشیم.

۱.یه پروژه جدید در ایکلیپس بسازید و از فولدر res به زیر شاخه layout برید و activity_main.xml رو باز کنید. وقتی از منوی پایین روی activity_main.xml کلیک می‌کنیم و به کد مربوط به این فایل می‌ریم، می‌بینیم که در اولین خط نوع صفحه‌بندی تعیین شده.

۲.صفحه‌بندی نسبی که به طور پیش‌فرض برای تمام پروژه‌های اندروید قرار داره، بگونه‌ای که ما می‌تونیم، نسبت به دیواره‌های اطراف یا اشیائی که در صفحه قرار دارند، اشیا جدید رو قرار بدیم، الان همون متنی که تو صفحه هست رو حذف کنید و مثلا یه دکمه می‌خوایم به صفحه اضافه کنیم، وقتی دکمه رو از منوی سمت چپ می‌کشیم، هرجایی در صفحه که بخوایم قرارش بدیم، به طور نسبی مشخص می‌کنه اون دکمه چه وضعیتی با دیواره‌های اطراف داره، و بعد اون رو جایی که به نظرمون مناسبه رها می‌کنیم. (مثلا ۹۰ dp از بالا و ۹۰ dp از چپ فاصله داشته باشه) حتی وقتی دکمه رو روی صفحه رها می‌کنیم، هنوز برامون مشخص می‌کنه که اندازه‌های ما نسبت به دیواره‌های سمت چپ و بالاست (با دو تا فلش سبز رنگ)

۳.حالا بیاید یه RadioButton رو به صفحه اضافه کنیم، می‌تونیم طوری تنظیمش کنیم که نسبت اون رو با دکمه‌ای که قبلا اضافه کرده بودیم بسنجیم و قرارش بدیم. الان دکمه‌ی قبلی و این radioButton به عنوان یک مجموعه در نظر گرفته می‌شن، چون جای قرار گرفتن‌شون نسبت به هم سنجیده شده، حالا اگه جای دکمه‌ی اولی رو تغییر بدیم، radioButton هم به تبعیت از اون تغییر می کنه. (همین طور اگه radioButton رو تغییر بدید، دکمه اولی هم همراه‌ش تغییر مکان می‌ده.)

۴.حالا بیایید مقدار ثقل (Gravity) دکمه radioButton را به مرکز (center) تغییر بدیم، برای این کار روی دکمه‌ای که در تصویر مشخص شده کلیک کنید و center را انتخاب کنید، حالا مرکز ثقل مجموعه دو دکمه، به مرکز صفحه تغییر مکان می‌ده.

حالا اگه به داخل پنجره properties نگاه کنید، می‌بینید که مقدار ثقل (Gravity) هر دو دکمه به مقدار زیر تغییر پیدا کرده:

center_vertical|start

۴.از انواع دیگه‌ی صفحه‌بندی می‌تونم به صفحه‌بندی خطی (LinearLayout) اشاره کنم، در این نوع صفحه‌بندی، همه چیز به صورت خطی پشت‌سرهم قرار می‌گیره. روی صفحه راست کلیک کنید، Change Layout و بعد هم LinearLayout، صفحه‌بندی خطی دو مدل داره افقی (Horizantal) یا عمودی (Vertical)، بیاید اول افقی رو انتخاب کنیم:

و قسمت کد activity_main.xml به صورت زیر تغییر می‌کنه:

یعنی به جای کلمه Relative نوشته شده Linear و یه شناسه جدید بهش داده شده، به همراه اینکه افقی بودنش مشخص شده.

۵.برای اینکه بهتر متوجه بشیم این صفحه‌بندی چطور عمل می‌کنه، در قسمت گرافیکی، یه متن تو صفحه بندازید و یه دکمه از منوی سمت چپ بکشید و کنار متن رها کنین، خواهید دید که دکمه به صورت خطی کنار متن قرار می‌گیره و شما نمی‌تونید اون رو جای دیگه‌ای در صفحه (مثلا پایین صفحه) قرار بدید. این خطی قرار گرفتن همه چیز به صورت افقی است، می‌تونیم با کلیک روی دکمه‌ای که تو شکل مشخص شده، خطی بودن رو به صورت عمودی تنظیم کنیم. در این صورت هیچ چیز را نمی‌تونید در صفحه، افقی کنار هم قرار بدید و باید همه اشیا به صورت خطی و عمودی پشت‌سر‌هم قرار بگیرن.

بعد از خطی شدن به صورت عمودی، اگر به کد نگاه کنیم می‌بینیم که این کد در قسمت مشخصات صفحه‌بندی تغییر کرده و نوع جهت‌یابی رو به عمودی تغییر داده:

android:orientation="vertical"

۶.نوع بعدی، صفحه‌بندی چهارچوبی است (FrameLayout). یعنی هر چیزی برای خودش چهارچوبی داره که اون رو از بقیه جدا می‌کنه، به طوریکه حتی اشیا می‌تونن روی همدیگه بیوفتن، چون این نوع صفحه‌بندی طوری سازمان‌دهی نشده که اشیا رو مجزا از هم نگه داره.

برای تغییر به صفحه‌بندی چهارچوبی، روی صفحه راست کلیک کنید، Change Layout و بعد هم FrameLayout :

۷.الان می‌تونید یه متن و یه دکمه رو، روی هم بندازید، می‌تونید روی دکمه کلیک کنید و از قسمت ثقل (Gravity) مرکز (center) رو انتخاب کنید و ببنید که دکمه مستقلا به مرکز صفحه منتقل شد.

این نوع صفحه‌بندی خیلی استفاده نداره، مگر اینکه مثلا شما می‌خواید با توجه به واکنش‌هایی که کاربر می‌ده، یه شی رو قابل رویت کنید و یه شی رو نامرئی کنید، مثلا می‌خواید یه سری عکس رو دنبال هم نشون بدید، می‌تونید با این صفحه‌بندی همه رو، روی هم بندازید و یکی یکی اونها رو قابل رویت بکنید. خلاصه این صفحه‌بندی در واقع هیچ کاری برای شما انجام نمی‌ده که شما رو مطمئن کنه اشیائتون به صورت مجزا از هم نشون داده می‌شن و همه زحمتش رو خودتتون باید بکشید.

۸.نوع دیگه، صفحه‌بندی جدولی (TableLayout) هست، که خیلی هم می‌تونه مفید و کارراه‌انداز باشه. مفهومش خیلی شبیه جدول توی Excel یا HTML هست. راستی یه راه دیگه برای تغییر صفحه‌بندی اینه که مستقیما خود فایل activity_main.xml رو دستکاری کنید. (یعنی الان به جای کلمه Frame بنویسید Table)

۹.در این صفحه‌بندی هر چیزی رو بندازید خودش به صورت سطرهای جدول در نظر می‌گیره و عرضشون رو به اندازه صفحه زیاد می‌کنه. اگر بخواید دوتا شی رو کنار هم در یه ردیف از جدول قرار بدید باید از منوی سمت چپ، گزینه layout رو بزنید و از توش TableRow رو انتخاب کنید و تو صفحه بندازیدش بعد تو این سطر می‌تونید چند تا شی رو کنار هم قرار بدید.

این نوع صفحه‌بندی خیلی مناسب درست کردن فرم عضویت در سایت و موارد مشابه.

۱۰.بحث دیگه ای که وجود داره اینه که مثلا ما می‌خوایم تو صفحه دو تا دکمه با صفحه‌بندی خطی عمودی کنار هم باشن و سایر اجزای صفحه، با صفحه‌بندی نسبی(یا هرچیز دیگه‌ای که دلخواهتون هست) برای این کار باید صفحه‌بندی کلی‌مون همون نسبی باشه اما اون دوتا دکمه رو تو یه ظرف (container) بذاریم و صفحه‌بندی اون ظرف رو از نوع خطی عمودی تنظیم کنیم، برای این کار، اول هرچی تو صفحه هست رو پاک کنید، بعد با راست کلیک روی صفحه -> change layout بعد هم RelativeLayout. با این کار صفحه‌بندی کلی نسبی شد، حالا دوتا دکمه تو صفحه بندازید، یکی شون رو انتخاب کنید بعد کلید شیفت رو نگه دارید و اون یکی رو هم انتخاب کنید (دور هردوشون خط آبی بشه) بعد راست کلیک کنید و wrap in container رو بزنید.

نوع صفحه‌بندی این دو تا دکمه رو انتخاب کنید و براشون یه اسمی بذارید. بعد هم ok.

دکمه ها این شکلی شدن (تو این مثال) همون طور که می‌بینید حالا دور مجموعه‌ی دو دکمه یه خط آبی کشیده (البته به راحتی می‌تونید هر کدوم از دکمه‌ها رو با کشیدن و رها کردن از تو مجموعه در بیارید)

با این کار توی activity_main.xml یه LinearLayout داخل تگ RelativeLayout با مشخصات زیر درست می شه:

من می‌خواستم فاصله‌ی دو تا دکمه از هم صفر بشه پس مقدار margin هاشون رو صفر کردم که اینطوری شدن. هر تغییر دیگه‌ای که دلتون بخواد به راحتی می‌تونید توش اعمال کنین.

پس حواستون باشه قبل از این که یه صفحه به وجود بیارید درباره محتویات صفحه و اینکه چطور می‌خواید در صفحه چیده بشن خوب فکر کنید و صفحه‌بندی مناسبش رو انتخاب کنید. البته وقتی change Layout رو می‌زنید می‌بینید که انواع صفحه‌بندی خیلی زیاده، می‌تونید خودتون هر کدومشون رو امتحان کنید ولی صفحه‌بندی های اصلی همین‌ها بودن.

فهرست مطالب

ادامه آموزش:‌ دکمه‌ها (Buttons)