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

شاید بتوان گفت این قسمت از آموزش پس از آشنایی با مفاهیم کلی توسعه اپلیکیشن اندروید اولین قسمتی است که به طور عملی به آموزش پیرامون یک پروژه واقعی خواهیم پرداخت. پیش از شروع کار نیاز است تا یک سناریو تعریف کنیم:

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

درست است که پول نداریم اما دانش برنامه نویسی خوبی داریم. می دانیم که مادر بزرگ آدم همیشه هم در حال ذکر گفتن است و با خودمان فکر می کنیم که برای آشتی دادن مادر بزرگ با فناوری راه خوبی است که یک اپلیکیشن «ذکر شمار» برایش طرحی کنیم.

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

پس از رسیدن به خانه مادر بزرگمان، می بینیم که همه با خوشحالی هدیه های خود را به مادر بزرگ تقدیم می کنند و تنها کسی باقیمانده ما هستیم. با لبخند به مادر بزرگ می گوییم که لطفا بولوتوث را روشن کنید تا هدیه را برایتان بفرستم!

برای شروع کار همانطور که در آموزش هشتم توضیح داده شد یک پروژه جدید در محیط برنامه نویسی اکلیپس تحت عنوان My Prayer Counter به معنی "ذکر شمار من" ایجاد می کنیم:

همانطور که در تصویر فوق مشخص است UI اپلیکیشن ما در قالب یک فایل تحت عنوان main.xml که به صورت خودکار توسط اکلیپس ایجاد شده است در زیرشاخه فولدر layout که در زیرشاخه فولدر res قرار گرفته است می باشد. اکلیپس به صورت پیش فرض یک TextView حاوی عبارت Hello World به علاوه نام فایل جاوایی که در حین ساخت پروژه در نظر گرفتیم که در اینجا MainActivity است را ایجاد می کند. ابتدا نیاز است تا این TextView را با موس انتخاب کرده سپس دکمه Delete را فشار دهیم. اولین کاری که می بایست انجام دهیم این است تا آیکان اپلیکیشن خود را به موضوع اپلیکیشن مرتبط سازیم. حال طبق آموزش های 24 و 25 و 26 یک آیکان مرتبط با ذکر شمار طراحی می کنیم:

همانطور که در تصویری که از Emulator گرفته شده است مشخص است، آیکانی مرتبط طراحی کرده و در سه نسخه 36*36 و 48*48 و 72*72 تبدیل به فرمت PNG شده و در فولدر های مربوطه drawalbe-ldpi و drawable-mdpi و drawable-hdpi به ترتیب با نام ic-launcher.png قرار گرفته اند (عکس انتخاب شده برای این آیکان با نوشتن نام "صلوات" در گوگل در اولین صفحه از سرچ پیدا شده است).

حال مجدد به محیط اکلیپس بازگشته و این بار با نشانگر موس خود یکبار روی صفحه مشکی رنگ UI کلیک می کنیم. هدف از انجام اینکار این است که کل Layout ما انتخاب شود تا بتوانیم برخی خصوصیات آن را در پنجره Properties تغییر دهیم:

از آنجا که ما کل Layout را با نشانگر موس خود انتخاب کرده ایم، از اینرو همانطور که در تصویر فوق مشخص است خصوصیات LinearLayout به ما نشان داده می شوند. حال از میان گزینه های موجود Backgound به معنی "پس زمینه" را پیدا نموده و Value مرتبط با آن را #fbfbdd قرار می دهیم سپس دکمه Enter را می زنیم تا تغییرات اعمال شوند. در حقیقت برای آنکه یکنواختی مابین اجزای مختلف اپلیکیشن ما وجود داشته باشد در فتوشاپ با ابزار Eyedropper نمونه رنگی از روی آیکانی که در نظر گرفته شده انتخاب کرده ایم:

در تصویر فوق ابزار قطره چکان با یک دایره قرمز رنگ کوچک مشخص شده است. در واقع پس از انتخاب این ابزار و کلیک کردن روی نقطه ای که می خواهیم نمونه رنگی از آن نقطه بگیریم، جزئیات رنگ نمونه در پنجره Color به نمایش در خواهد آمد (لازم به ذکر است که اگر پنجره Color باز نبود می توان از منوی اصلی Window و کلیک کردن روی گزینه Color آن را باز نمود).

همانطور که در تصویر فوق با یک بیضی قرمز رنگ بزرگ نشان داده شده است جزئیات به نمایش درآمده از نمونه رنگ مد نظر RGB است و همانطور هم که قبلاً توضیح داده شد در سیستم عامل اندروید تنها رنگی که می توانیم مورد استفاده قرار دهیم واحد Hexadecimal است. برای تبدیل واحد RGB به Hexadecimal می بایست طبق تصویر زیر عمل نماییم:

منوی پنجره Color با یک فلش قرمز رنگ مشخص شده است. با کلیک روی منو پنجره دیگری باز خواهد شد که همانطور که در تصویر فوق مشخص است با کلیک روی گزینه Web Color Sliders رنگ های RGB را به واحدهای Hexadecimal تبدیل می کنیم:

همانطور که در تصویر فوق مشخص است یک علامت Hash قرار گرفته و مقابل آن واحد Hexadecimal معادل با هر سه رنگ قرمز، سبز و آبی نوشته شده است که به طور خلاصه عبارت است از #fbfbdd . این کد را برای رنگ پس زمینه اپلیکیشن خود در نظر می گیریم.

اکنون اگر به UI خود نگاهی بیندازیم مشاهده خواهیم کرد که رنگ آن تغییر کرده است:

برای آنکه بتوانیم از رنگ تیره موجود در آیکان هم برای نوشته های روی UI استفاده کنیم، باز هم به روش فوق مقدار Hexadecimal آن را پیدا نموده تا در ادامه آموزش بتوانیم از این رنگ برای متون روی UI استفاده کنیم.

حال همانطور که در آموزش بیست و نهم گفته شد، یک TextView روی UI ایجاد می کنیم:

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

اولین کاری که انجام می دهیم این است که id اختصاص داده شده به این TextView را به id مد نظر خود تغییر می دهیم. برای این TextView بنده id یی تحت عنوان txt_textOne را در نظر گرفته ام و این در حالی است که می توان با id اختصاص داده شده توسط اکلیپس یا هر id دیگری به کار خود ادامه دهیم.

سپس همانطور که در تصویر زیر مشخص است اقدام به تغییر رنگ متن و اندازه متن می نماییم:

کد #763f05 نمونه رنگی است که از متن داخل آیکان اپلیکیشن در فتوشاپ به دست آورده ایم که رنگی متمایل به قهوه ای است. در ارتباط با اندازه متن هم 40dip در نظر می گیریم:

می بینیم تغییراتی که در پنجره Properties ایجاد کردیم روی 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:background="#fbfbdd"
6. android:orientation="vertical" >
7. <TextView
8. android:id="@+id/txt_textOne"
9. android:layout_width="wrap_content"
10. android:layout_height="wrap_content"
11. android:text="Large Text"
12. android:textAppearance="?android:attr/textAppearanceLarge"
13. android:textColor="#763f05"
14. android:textSize="40dip" />
15. </LinearLayout>

در آموزش بعد خواهیم دید که به چه نحوه می توان یک متن فارسی را وارد اپلیکیشن خود نماییم.