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

پس از آشنایی با ساختار کلی یک فایل XML در آموزش بیست و هشتم، در این آموزش قصد داریم تا به بررسی اجزای تشکیل دهنده یک رابط گرافیکی بپردازیم.

برای همین منظور مجدد به پروژه ای که در آموزش هشتم تحت عنوان My First Android Project ایجاد کردیم رجوع می کنیم. پس از باز کردی فایل main.xml که در فولدر layout زیرشاخه res قرار دارد با کد زیر مواجه خواهیم شد:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6. <TextView
7. android:layout_width="fill_parent"
8. android:layout_height="wrap_content"
9. android:text="@string/hello" >
10. </LinearLayout>

در آموزش گذشته ساختار کلی کد فوق مورد بررسی قرار گرفت. در این آموزش قصد داریم تا تگ مرتبط با را مورد بررسی قرار دهیم. اگر خاطرمان باشد پس از ساخت این پروژه و اجرای آن روی Emulator یا یک دستگاه واقعی عبارت Hello World, MainActivity! روی صفحه دستگاه به نمایش در آمد. در حقیقت چیزی که این عبارت را در خود ذخیره ساخته است همین Tag است که در کد فوق مشاهده می شود. همانطور که می بینیم در تگ layout_width مقدار fill_parent در نظر گرفته شده است که در آموزش پیشین با آن آشنا شدیم. در تگ layout_height می بینیم که مقدار wrap_content در نظر گرفته شده است. معادل های فارسی واژه انگلیسی wrap را می توان "پیچیدن، پوشاندن، بسته بندی کردی، کادو کردن و ..." در نظر گرفت. معادل فارسی واژه انگلیسی content هم "محتوا" یا به عبارتی محتویات داخل چیزی است. به طور کلی می توان گفت که هر زمانیکه ما از مقدار wrap_content استفاده کنیم این دستور را به سیستم می دهیم که چیزی که عرض یا ارتفاع آن دارای این مقدار می باشد بایستی فقط آنقدر یا از عرض و یا از ارتفاع امتداد یابد که محتویات داخلش را نشان دهد. به عبارت دیگر فرض کنیم که متنی داریم که ارتفاع فونت آن معادل با 12 پیکسل است. حال اگر layout_height این متن را معادل با wrap_content قرار دهیم، ارتفاع این متن فقط به اندازه ای خواهد بود که ارتفاع فونت قرار گرفته در این متن را پوشش دهد نه کمتر و نه بیشتر(نکته ای که در مورد مقادیر fill_parent و wrap_content می بایست همواره مد نظر قرار دهیم این است که این دو مقدار هم می توانند برای تگ layout_width و هم برای تگ layout_height مورد استفاده قرار گیرند). به طور کلی می توان گفت که هر چیزی که روی یک UI قرار می گیرد به منزله یک view است یعنی چیزی که نمایی دارد مثل یک متن، یک دکمه و غیره. می توان گفت که علاوه بر مقادیر fill_parent و wrap_content می توان از مقادیر عددی هم استفاده کرد. در صورتیکه بخواهیم از مقادیر عددی استفاده کنیم همواره این نکته را می بایست به خاطر داشته باشیم که از چه واحدی استفاده کنیم(برای آشنایی بیشتر با واحدهای اندازه گیری در سیستم عامل اندروید به آموزش شانزدهم مراجعه نمایید). به طور خلاصه واحدی که این تضمین را به ما خواهد داد تا کمترین تفاوت را در صفحه نمایش هایی با Density مختلف داشته باشیم واحد dip است(این واحد به صورت dp هم نوشته می شود. به خاطر داشته باشیم که dip را با dpi اشتباه نگیریم). برای روشن شدن این مطلب روی Tab مرتبط با Graphical Layout کلیک کرده و تصویری همچون تصویر زیر مشاهده خواهیم کرد:

همانطور که در تصویر فوق ملاحظه می شود با یک بار کلیک کردن روی TextView یک حاشیه آبی رنگ دور آن قرار می گیرد که نشانگر این مسئله است که این متن انتخاب شده است. ناحیه سیاه رنگی که در تصویر مشخص است نشانگر کل صفحه نمایش است. اگر خاطرمان باشد تگ layout_width را با مقدار fill_parent تعریف کردیم. در حقیقت این صفحه سیاه رنگ به منزله parent یا همان چیزی است که متن را در خود جای داده است. حال از آنجا که مقدار Layout_width معادل با fill_parent است این دستور را می دهیم تا عرض این متن ساختار parent یا همان ساختاری در برگیرنده اش را "پر" سازد(فعل fill در زبان فارسی به معنی "پر کردن" است). از این رو می بینیم که خط آبی کل عرض صفحه سیاه رنگ را پوشش داده است. اکنون اگر ارتفاع این حاشیه آبی رنگ را مد نظر قرار دهیم، خواهیم دید که فقط به اندازه ای امتداد پیدا کرده است که ارتفاع فونت موجود در آن را پوشش دهد نه بیشتر و نه کمتر. حال فرض کنیم که می خواهیم ابعاد این TextView را به طور دستی وارد کنیم. برای این منظور مجدد به Tab مربوط به main.xml رفته و آن را به صورت زیر ویرایش می کنیم:

1. <?xml version="1.0" encoding="utf-8"?>
2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
3. android:layout_width="fill_parent"
4. android:layout_height="fill_parent"
5. android:orientation="vertical" >
6. <TextView
7. android:layout_width="200dip"
8. android:layout_height="48dip"
9. android:text="@string/hello" >
10. <LinearLayout>

همانطور که در کد فوق ملاحظه می شود مقادیر layout_width و layout_height به ترتیب به 200dip و 48dip تغییر پیدا کرده اند. اکنون مجدد به Tab مربوط به Graphical Layout بازگشته و انتظار می رود که حالتی همچون تصویر زیر را ببینیم:

همانطور که در تصویر فوق در قالب یک کادر قرمز رنگ نشان داده شده است ابعاد عرض و ارتفاع این متن به ترتیب به 200dip و 48dip تغییر یافته اند که این موضوع را می توان از روی تغییر اندازه کادر آبی رنگ به وضوح درک کرد. یک راه تغییر ابعدا یک view همین روشی است که در بالا انجام دادیم یعنی ویرایش کردن مستقیم کد اما این در حالی است که اینکار را می توان از طریق پنجره Properties هم انجام داد(چنانچه این پنجره باز نباشد طبق آموزش بیستم می توان آن را باز نمود):

همانطور که در تصویر فوق ملاحظه می شود پس از باز کردن پنجره Properties در محیط اکلیپس که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است Tab های مختلفی خواهیم دید که یکی از آنها که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است Misc است که مخفف واژه Miscellaneous به معنی "متفرقه و گوناگون" می باشد. همانطور که در تصویر فوق ملاحظه می شود مقابل Layout height دقیقا همان مقداری را می بینیم که به طور دستی وارد کردیم و مقابل Layout width هم مقدار 200dip را می بینیم که قبلا وارد کرده بودیم. حال در تصویر فوق با کلیک کردن روی جاهایی که با دو خط قرمز رنگ مشخص شده اند امکان ویرایش آن مقادیر برای ما بوجود خواهد آمد. به طور مثال مقدار Layout height را به fill_parent و مقدار Layout_width را هم به fill_parent تغییر می دهیم:

همانطور که در تصویر فوق مشاهده می شود، پس کلیک کردن به طور مثال روی عدد 200dip خواهیم دید که یک فلش نمایان می شود(در تصویر فوق با یک دایره قرمز رنگ مشخص شده است). پس از کلیک کردن روی آن فلش خواهیم دید که پنجره کوچکی باز خواهد شد که از داخل آن می توانیم مقادیر از پیش تعریف شده fill_parent و wrap_content را انتخاب کنیم. اکنون پس از اینکار خواهیم دید که کادر آبی رنگ به صورت زیر به کلی تغییر اندازه خواهد داد:

همانطور که در تصویر فوق با یک کادر قرمز رنگ مشخص شده است، می بینیم که ابعاد متن ما تغییر اندازه پیدا کرده و از آنجا که مقدار layout_width و layout_height هر دو معادل fill_parent است، می بینیم که کادر آبی رنگ کل فضای سیاه صفحه را در برگرفته است(به خاطر داشته باشیم که ما با اینکار فقط اندازه کادر متن را می توانیم تغییر دهیم و با اینکار به هیچ وجه اندازه فونت متن تغییر پیدا نخواهد کرد. در آموزش های آتی به تفصیل پیرامون نحوه تغییر اندازه فونت صحبت خواهیم کرد).