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

اگر خاطرمان باشد در آموزش قسمت بیست و نهم کلیه بخش های مرتبط با یک TextView را مورد بررسی قرار دادیم به جزء بخشی که مرتبط با متن داخل آن TextView بود. برای همین منظور کد مرتبط با UI پروژه ای که در قسمت هشتم ایجاد کردیم را باز می نماییم:

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="fill_parent"
9. android:text="@string/hello" >
10. <LinearLayout>

در تگ مربوط به TextView در خط آخر تگ android:text="@string/hello" را مشاهده می کنیم. به طور کلی می توان گفت که این خط از کد مسئول نمایش دادن نوشته داخل TextView می باشد. اگر خاطرمان باشد نوشته داخل این TextView معادل با Hello World, MainActivity! می باشد اما این در حالی است که در این تگ چیزی به جزء hello نمی بینیم. به منظور روشن شدن این مسئله به پنجره Package Explorer باز می گردیم:

همانطور که در تصویر فوق ملاحظه می شود زیرشاخه این پروژه تحت عنوان My First Android Project فولدری تحت عنوان res وجود دارد. پس از باز کردن فولدر res فولدری تحت عنوان values وجود دارد که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است. پس از باز کردن این فولدر همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است فایلی تحت عنوان strings.xml وجود دارد. به طور کلی می توان گفت که این فایل مسئول ذخیره سازی متون در یک اپلیکیشن می باشد. برای درک بهتر ماهیت این فایل با دو بار کلیک کردن روی آن در محیط اصلی اکلیپس باز خواهد شد:

همانطور که در تصویر فوق ملاحظه می شود فلش قرمز زنگ نشان دهنده گزینه ای تحت عنوان hello است و این hello همان hello یی است که در TextView به آن اشاره کردیم. در صورتیکه یک بار روی گزینه hello کلیک کنیم خواهیم دید که به رنگ آبی در خواهد آمد سپس اگر به کادر قرمز رنگ توجه کنیم می بینیم که در بخش Name به معنی "نام" واژه hello نوشته شده و در بخش Value به معنی "مقدار" Hello World, MainAvtivity! نوشته شده است.

نحوه ایجاد یک String جدید و اختصاص آن به یک TextView

در این پنجره دکمه ای تحت عنوان Add به معنی "اضافه کردن" وجود دارد که می توانیم از آن برای ایجاد متون جدید استفاده کنیم. برای روشن شدن این مسئله به ذکر مثالی اکتفا می کنیم. فرض کنیم که می خواهیم به جای Hello World, MainActivity! می خواهیم نام خود را روی صفحه نمایش دهیم. برای این منظور روی دکمه Add کلیک کرده و پنجره ای به شکل زیر خواهیم دید:

همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است، روی گزینه String دو بار کلیک می کنیم و یا پس از انتخاب آن روی دکمه OK کلیک می کنیم(در حقیقت از آنجا که می خواهیم یک متن جدید ایجاد کنیم می بایست از گزینه String استفاده کنیم. به طور مثال برای تعریف یک رنگ جدید می توان از گزینه Color استفاده کرد. موارد دیگر در آموزش های آتی بسته به نیاز پروژه ها مورد بررسی قرار خواهند گرفت):

همانطور که در تصویر فوق ملاحظه می شود پس از کلیک کردن روی دکمه OK به پنجره قبل بازگشته با این تفاوت که گزینه دیگری همانطور که با یک بیضی قرمز رنگ مشخص شده است تحت عنوان String به لیست اضافه شده است. در بخشی که با یک کادر قرمز رنگ مشخص شده است در بخش Name نامی را برای این String در نظر می گیریم. به طور مثال بنده نام developer به معنی "توسعه دهنده" را تایپ می کنم(توجه داشته باشید که حرف اول این نام با حرف کوچک تایپ شده است). سپس در بخش Value عبارت I am Behzad Moradi به معنی "من بهزاد مرادی هستم" را تایپ می کنم(فراگیران می توانند نام خود و یا هر چیزی دیگری را تایپ کنند). نکته ای که در اینجا حائز اهمیت است این است که برخلاف بخش Name که در آن می بایست اصول خاصی را برای نامگذاری استفاده کرد و مثلا به هیچ وجه از فاصله استفاده نکرد، در بخش Value هر چیزی را می توانیم وارد کنیم تا جاییکه حتی می توان نام خود را به فارسی بنویسیم:

همانطور که در تصویر فوق ملاحظه می شود مقادیر مرتبط با Name و Value وارد شده اند و به محض اینکه فایل خود را از طریق فشردن هم زمان دکمه های Ctrl و S و یا از طریق منوی اصلی گزینه File سپس گزینه Save ذخیره سازیم، خواهیم دید که گزینه جدید که با فلش قرمز رنگ در تصویر قبل تحت عنوان String به لیست اضافه شده بود بلافاصله به نامی که در بخش Name وارد کرده ایم یا در این مثال همان واژه developer تغییر نام می دهد. در همین مرحله ادامه آموزش در مورد پنجره بالا را متوقف می کنیم چرا که می خواهیم در اولین برنامه اندروید خود نام خود را به نمایش در آوریم. برای این منظور به فایل 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="fill_parent"
8. android:layout_height="fill_parent"
9. android:text="@string/developer" >
10. <LinearLayout>

همانطور که در کد فوق ملاحظه می شود در تگ مربوط به text به جای واژه hello واژه جدیدی که تحت عنوان developer ساختیم را می نویسیم و پس از Save کردن همانطور که قبلا آموزش داده شد اپلیکیشن خود را از طریق Emulator اجرا می کنیم:

همانطور که در تصویر فوق که از Emulator گرفته شده است مشاهده می شود عبارت قبلی با عبارتی که برای String جدید خود تحت عنوان developer در نظر گرفتیم یا همان جمله I am Behzad Moradi نمایش داده می شود. اکنون مجدد به فایل strings.xml باز می گردیم:

همانطور که در تصویر فوق ملاحظه می شود در پایین این پنجره یک Tab تحت عنوان Resources به معنی "منابع" و یک Tab دیگر تحت عنوان strings.xml وجود دارد. پیش از آنکه روی Tab مربوط به strings.xml کلیک کنیم توجه مان را به String دیگر تحت عنوان app_name که در لیست دیده می شود جلب می کنیم که در ادامه آموزش به معرفی آن خواهیم پرداخت:

به طور کلی می توان گفت که Tab مربوط به strings.xml همان Tab مربوط به Resources است با این تفاوت که به صورت کد نمایش داده می شود. دقیقاً همان سه String یی که در پنجره قبل وجود داشتند با همان نام در این پنجره به شکل کد نمایش داده شده اند. همانطور که در کد فوق مشاهده می شود مابین دو تگ و جملاتی به رنگ روشن نوشته شده اند که این جملات دقیقاً همان جملاتی هستند که از طریق نام یک String انتقال داده شده و به نمایش در می آید. پیش از این، در مورد String یی تحت عنوان app_name صحبت کردیم که متن مرتبط با آن My First Android Project می باشد. این String زمانیکه در حین ساخت یک پروژه جدید اقدام به انتخاب نامی برای اپلیکیشن خود می نماییم ایجاد شده و نام مد نظر ما را در خود جای می دهد. اما اکنون ببینیم که این String در کجای اپلیکیشن مورد استفاده قرار می گیرد:

1. <?xml version="1.0" encoding="utf-8"?>
2. <manifest xmlns:android="http://schemas.android.com/apk/res/android"
3. package="com.behzadmoradi.mainpackage"
4. android:versionCode="1"
5. android:versionName="1.0" >
6. <uses-sdk android:minSdkVersion="7" >
7. <application
8. android:icon="@drawable/ic_launcher"
9. android:label="@string/app_name" >
10. <activity
11. android:name=".MainActivity"
12. android:label="@string/app_name" >
13. <intent-filter>
14. <action android:name="android.intent.action.MAIN" >
15. <category android:name="android.intent.category.LAUNCHER" >
16. <intent-filter>
17. <activity>
18. <application>
19. <manifest>

پس از باز کردن فایل AndroidManifest.xml کدی به صورت فوق ملاحظه خواهیم کرد. در تنها تگ مربوط به activity این فایل تگی تحت عنوان android:label وجود دارد که مقدار اختصاص داده شده به آن همین app_name است.

نحوه لینک دادن به یک String

اگر به نحوه لینک دادن String های ایجاد شده مثلاً همین String مرتبط با app_name در کد فوق توجه کرده باشیم، خواهیم دید که اول می بایست یک علامت @ قرار داده سپس کلید واژه string را نوشته و در نهایت پس از قرار دادن یک علامت / نام String مد نظر را می نویسیم که به طور کامل به صورت زیر خواهد بود:

1. android:label="@string/app_name"

نحوه تغییر متن یک TextView بدون نیاز به فایل strings.xml

به طور کلی می توان گفت که دلیل اصلی استفاده از فایل strings.xml برای ذخیره سازی متون در یک اپلیکیشن، امکان برخورداری از قابلیت تغییر زبان است. به عبارت دیگر ما می توانیم چندین فولدر values برای زبان های مختلف در نظر بگیریم و محتویات فایل strings.xml داخل آنها را بسته به نوع زبان مدنظر ویرایش کنیم تا هر زمان که کاربر زبان دستگاه خود را تغییر داد، اپلیکیشن به صورت خودکار از منابع مرتبط با آن زبان انتخاب کند. حال چنانچه نخواهیم از این قابلیت اندروید استفاده کنیم، می توان به سادگی فایل strings.xml را نادیده گرفته و متن خود را به صورت زیر وارد کرد:

همانطور که در تصویر فوق ملاحظه می شود، کد @string/ را که به اندروید دستور می دهد تا به فایل strings.xml رجوع کند را حذف کرده ایم و مستقیماً عبارت This is a new text! به معنی "این یک متن جدید است!" را وارد می کنیم. حال به محض اینکه فایل خود را Save کنیم همانطور که در تصویر فوق ملاحظه می شود یک علامت اخطار زرد رنگ نمایان خواهد شد. چنانچه نشانگر موس خود را روی آن قرار دهیم، عبارت Hardcoded “This is a new text!”, should use @string resource به معنی " عبارت “This is a new text!” به صورت Hardcoding وارد شده است، شما بایستی از فایل strings استفاده کنید" نشان داده خواهد شد(در ادامه با اصطلاح Hardcoding بیشتر آشنا خواهید شد). در حقیقت می توان گفت که این نشانگر زرد رنگ یک Warning یا "هشدار" است و به هیچ وجه یک Error یا "خطا" نمی باشد. این هشدار به ما اطلاع می دهد که می بایست متن خود را داخل فایل strings بنویسیم تا چنانچه خواستیم اپلیکیشن خود را برای زبان های مختلف طراحی کنیم با مشکل مواجه نشویم. به سادگی می توان هشدارهایی از این دست را نادیده بگیریم.

آشنایی با اصطلاح Hardcoding

به طور خلاصه در برنامه نویسی زمانیکه اطلاعات در خود Source Code یا همان کد برنامه وارد شوند و این اطلاعات از منابع خارجی مثل strings.xml وارد کد نشوند ما Hardcoding انجام داده ایم. به عبارت دیگر با Hardcoding امکان ویرایش اطلاعات به طور مستقیم از بین خواهد رفت و این مسئله Flexibility یا "انعطاف پذیری" برنامه را کاهش خواهد داد.

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

فقط یه نکته رو خدمتتون عرض کنم که برای طراحی برنامه اندروید احتیاج نیست که حتما جاوا بلد باشیم

با سی شارپ تو محیط Mono For Android هم میشه برنامه تهیه کرد.

از طرفی با استفاده از برنامه Google Android Studio هم میشه استفاده کرد و برنامه برای اندورید ساخت البته نرم افزاره ای دیگه ای هم هستن کهم ن باهاشون آشنایی ندارم

با سلام و احترام خدمت شما

بله اطلاع دارم که با نرم افزارهای ذکر شده و زبان هایی که گفتید امکان برنامه نویسی برای اندروید وجود دارد . اما از آنجا که خودم با Eclipse کار میکنم و با جاوا کار کردم و عموماً کدهایی که می نویسم با جاواست ، آشنایی با جاوا رو برای برنامه نویسی اندروید لازم دیدم و دو تاپیک آموزشی یکی برای برنامه نویسی جاوا و اندروید ایجاد کردم .

آموزش ها با نرم افزار Eclipse و زبان جاوا ارائه خواهد شد . اما کاربران در انتخاب زبان و محیط برنامه نویسی آزادند که با هر برنامه دلخواه ، نرم افزار اندروید بنویسند .

موفق باشید

نحوه نامگذاری string ها

رعایت این نکان موجب می گردد تا Error های یک اپلیکیشن را به حداقل برسانیم. در نامگذاری string ها به هیچ وجه نباید از Space یا جای خالی استفاده کنیم:

1. Hello World, MainActivity!

همانطور که در کد فوق ملاحظه می شود مقابل name پس از علامت مساوی hello world به این صورت نوشته شده است که مابین hello و world یک فاصله قرار گرفته است و همین فاصله موجب می گردد تا اپلیکیشن ما Compile نشود و تا این مشکل رفع نگردد نخواهیم توانست به ادامه کار بپردازیم. نکته دیگر که در مورد نامگذاری string ها می بایست مد نظر قرار دهیم این است که می توانیم در نامگذاری خود از اعداد هم استفاده کنیم:

1. Hello World, MainActivity!

همانطور که در کد فوق ملاحظه می شود نام hello1 برای این string در نظر گرفته شده است. در نامگذاری string ها از _ یا به عبارتی همان Underscore هم می توان استفاده کرد(برای تایپ این علامت می توان با پایین نگه داشتن دکمه Shift دکمه Dash را فشار داد):

1. Hello World, MainActivity!

همانطور که در کد فوق ملاحظه می شود دو کلمه hello و world با یک _ از یکدیگر در نام hello_world جدا شده اند. در نامگذاری string ها از ساختار cameCase هم به صورت زیر می توان استفاده کرد:

1. Hello World, MainActivity!

همانطور که در کد فوق ملاحظه می شود کلمه hello نوشته شده سپس کلمه بعد که world است به آن چسبیده است با این شرط که حرف اول آن با حرف بزرگ نوشته شده است. در حقیقت اینکار برای خوانایی بیشتر صورت می گیرد(برای آشنایی بیشتر با ساختار camelCase به سری آموزش های زبان برنامه نوسی جاوا در سایت نردبان قسمت دهم مراجعه نمایید). به خاطر داشته باشیم که در نامگذاری string ها از Dash به هیچ وجه نمی توانیم استفاده کنیم:

1. Hello World, MainActivity!

همانطور که در کد فوق ملاحظه می شود دو کلمه hello و world با یک – یا همان Dash از یکدیگر جدا شده اند که اینکار خلاف استاندارد نامگذاری string ها است. علاوه بر Dash از دیگر علائم همچون @ و # و $ و % و & و غیره به هیچ وجه نمی توان استفاده کرد:

1. Hello World, MainActivity!
2. Hello World, MainActivity!
3. Hello World, MainActivity!
4. Hello World, MainActivity!
5. Hello World, MainActivity!

همانطور که در کد فوق ملاحظه می شود کلیه نام های در نظر گرفته شده به خاطر برخورداری از یکی از علائم فوق الذکر غیر قابل قبول می باشند. در آموزش گذشته با نحوه ایجاد یک string جدید آشنا شدیم. در ادامه قصد داریم تا با نحوه حذف، اضافه و ویرایش یک string بیشتر آشنا شویم:

همانطور که در تصویر فوق مشاهده می شود فایل strings.xml را باز نموده و Tab مرتبط با Resources آن را کلیک می کنیم. همانطور که قبلا توضیح داده شد در سمت چپ این پنجره لیستی از string هایی که ایجاد کرده ایم را مشاهده می کنیم. در این تصویر دکمه Remove به معنی "حذف کردن" با یک بیضی قرمز رنگ مشخص شده است. در واقع پس از آنکه یک string را با یک بار کلیک کردن روی آن انتخاب کرده و به رنگ آبی درآمد، می توان روی دکمه Remove کلیک کنیم و آن string را حذف کنیم. نکته ای که در اینجا حائز اهمیت است این است که اگر string یی که قصد داریم آنرا حذف کنیم در جایی در اپلیکیشن ما مورد استفاده قرار گرفته باشد و ما آن را حذف کنیم، بلافاصله پس از Save کردن فایل خود برنامه با مشکل مواجه خواهد شد. از اینرو می بایست مراقب بوده تا string هایی که مورد استفاده نیستند را از این لیست حذف کنیم. پس از دکمه Remove دو دکمه Up و Down دیده می شوند که به ترتیب "بالا" و "پایین" ترجمه می شوند. کاری که این دو دکمه انجام می دهند این است که جایگاه string انتخاب شده در این لیست را به بالا و پایین انتقال می دهند. علاوه بر این روش حذف و همچنین روش اضافه کردن یک string که در آموزش قبل توضیح داده شد، می توان با استفاده از روش دیگری هم به حذف، اضافه و حتی ویرایش یک string پرداخت. برای این منظور در پنجره بالا روی Tab مربوط به strings.xml کلیک کرده و پنجره ای به شکل زیر خواهیم دید:

همان لیستی که در پنجره قبل داشتیم اکنون به صورت کد قابل مشاهده است. فرض کنیم که در این کد قصد داریم متن مربوط به string مرتبط با hello را از Hello World, MainActivity! به فقط دو کلمه Hello World تغییر دهیم. برای این منظور به سادگی می توانیم بخشی از متن که نمی خواهیم را Delete کرده و فایل خود را Save کنیم:

همانطور که در تصویر فوق ملاحظه می شود متن خود را به Hello World تغییر داده ایم. حال مجدد به Tab مرتبط با Resources باز می گردیم:

همانطور که در تصویر فوق ملاحظه می شود پس از انتخاب کردن string مرتبط با hello ، به Value مرتبط با این string نگاه کرده و همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است خواهیم دید که مقدار آن در این پنجره هم آپ دیت شده است. مجدد به Tab مرتبط با strings.xml باز گشته این بار قصد داریم تا با کد نویسی یک string جدید ایجاد کنیم:

همانطور که در تصویر فوق ملاحظه می شود، یک string جدید تحت عنوان newText به معنی "متن جدید" به صورت دستی کدنویسی کرده ایم و مقدار آن را معادل با متن This is a new text به معنی "این یک متن جدید است" قرار داده ایم. اکنون مجدد روی Tab مرتبط با Resources کلیک کرده و نتیجه را مشاهده می کنیم:

ملاحظه می کنیم که string جدید با یک فلش قرمز رنگ نشان داده شده است و مقدار آن هم در کارد قرمز رنگ حاکی از آن است که دقیقاً همان چیزی است که در مرحله قبل وارد کردیم. توجه داشته باشیم که به همین راحتی که در Tab مرتبط با strings.xml می توانیم یک string جدید ایجاد کنیم، به همین آسانی هم می توانیم یک string را پاک کرده و آن را از لیست string ها حذف کنیم.

در این آموزش قصد داریم تا به طور خلاصه مبحث رنگ در توسعه اپلیکیشن را مورد بررسی قرار دهیم. شاید تاکنون مشاهده کرده باشید که در CSS مثلاً به منظور نشان دادن رنگ سفید از کد #ffffff استفاده می شود. در این آموزش خواهیم فهمید که به چه نحوی می توانیم به تحلیل کد فوق پرداخته و از این پس کد رنگ مد نظرمان را بنویسیم (به خاطر داشته باشیم که علامت # در زبان انگلیسی Hash Mark یا Pound Sign نامیده می شود).

به طور کلی سیستم Hexadecimal یک سیستم نامگذاری است که بر پایه عدد 16 می باشد که در آن اعداد 0 تا 9 نشانگر اعداد صفر تا نه بوده به علاوه حروف a، b، c، d، e، f که به ترتیب حرف a نشانگر عدد 10 است، حرف b نشانگر عدد 11 است، حرف c نشانگر عدد 12 است، حرف d نشانگر عدد 13 است، حرف e نشانگر عدد 14 است و در نهایت حرف f نشانگر عدد 15 است. فایده استفاده از اعداد Hexadecimal این است برنامه نویس یا طراح بهتر می تواند آنها را بخواند چرا که در آن هر هشت بیت با کنار هم قرار گرفتن دو Digit که می توانند هم یکی از اعداد بالا باشند و هم یکی از حروف بالا و یا ترکیبی از هر دو آنها نمایش داده می شود.

کد #ffffff تحت عنوان RGB بیست و چهار بیتی شناخته می شود. به عبارت دیگر دو f اول مربوط به R است که مخفف واژه Red به معنی"قرمز"می باشد، دو f دوم مربوط به G است که مخفف واژه Green به معنی "سبز" بوده و در نهایت دو f سوم مربوط به B است که مخفف Blue به معنی "آبی" می باشد.

حال همین کد را می توانیم به ARGB سی و دو بیتی تبدیل کنیم که اینکار با اضافه کردن دو f دیگر به ابتدای کد فوق صورت می گیرد. به عبارت دیگر کد ما به صورت #ffffffff در خواهد آمد. در واقع این دو f جدید نماینده آلفا هستند که این وظیفه را دارا است که رنگ ما را به مقداری که تمایل داریم محو سازد.

اکنون با مد نظر قرار دادن توضیحات فوق می توان این نتیجه را گرفت که هر یک از رنگ های قرمز، سبز، آبی و آلفا هشت بیت را به خود اختصاص می دهند:

حال ببینیم که هشت بیت به چه معنا است. در حقیقت هر عدد هشت بیتی از 0 تا 255 را می تواند شامل شود که با هشت عدد که ترکیبی از 0 و 1 هستند می توان آن را نمایش داد. در حقیقت این 0 و 1 همان دو عدد معروفی هستند که تحت عنوان Binary Numbering System شناخته شده و در کامپیوترها مورد استفاده قرار می گیرند.

نحوه استفاده از ماشین حساب ویندوز برای تبدیل واحدها

اگر بخواهیم یک عدد هشت بیتی را به صورت Hexadecimal نمایش دهیم می بایست محاسبه کنیم که معادل Hexadecimal آن عدد هشت بیتی چند است. برای این منظور همانطور که در تصویر فوق ملاحظه می شود می توان از ماشین حساب خود ویندوز استفاده کرد:

همانطور که در تصویر فوق مشاهده می شود، پس از اجرای کردن نرم افزار Calculator خود سیستم عامل ویندوز به منوی اصلی روی گزینه View کلیک کرده سپس گزینه Programmer را انتخاب می کنیم:

حال می بینیم که گزینه های بیشتری به این ماشین حساب اضافه شده است. همانطور که در تصویر فوق ملاحظه می شود، گزینه Dec که مخفف واژه Decimal است انتخاب شده است. زمانیکه این گزینه انتخاب شده باشد می توانیم عدد هشت بیتی خود که از 0 تا 255 است را وارد کنیم. به طور مثال عدد 255 را وارد می کنیم:

حال همانطور که در تصویر فوق مشخص شده است روی گزینه Hex کلیک می کنیم که با اینکار به معادل Hexadecimal عدد هشت بیتی 255 دست خواهیم یافت:

همانطور که در تصویر فوق ملاحظه می شود معادل FF برای عدد هشت بیتی 255 در نظر گرفته می شود. برای درک بهتر مطالب فوق اقدام به ساخت یک رنگ جدید می کنیم به این صورت که می خواهیم رنگ ما از 255 واحد رنگدانه قرمزی که دارد 150 واحد آن را استفاد کنیم، از 255 واحد سبزی که داریم کل آن 255 واحد رنگدانه را اضافه کنیم و در نهایت 50 واحد از 255 واحد مرتبط با رنگدانه آبی را نیز مورد استفاده قرار دهیم(در این مثال از آلفا استفاده نمی کنیم). به طور خلاصه:

حال برای تبدیل واحدهای فوق مجدداً به ماشین حساب ویندوز رجوع می کنیم به این صورت که اول می خواهیم معادل Hexadecimal رنگ قرمز را محاسبه کنیم. برای این منظور عدد 150 را با انتخاب حالت Dec وارد کرده سپس روی گزینه Hex کلیک می کنیم:

همانطور که در تصویر فوق ملاحظه می شود، معادل Hexadecimal عدد 150 معادل با 96 است. سپس ماشین حساب را صفر کرده، آن را در حالت Dec قرار می دهیم و برای محاسبه رنگ سبز عدد 255 را وارد می کنیم و مجدد روی گزینه Hex کلیک می کنیم:

می بینیم که معادل Hexadecimal عدد 255 معادل با FF است. در نهایت برای مشخص کردن رنگ آبی مجدد ماشین حساب را صفر کرده، آن را در حالت Dec قرار داده و عدد 50 را وارد می کنیم:

همانطور که در تصویر فوق ملاحظه می شود پس از کلیک کردن روی گزینه Hex عدد 32 نمایش داده خواهد شد. حال به طور خلاصه رنگ ساخته شده ما به صورت زیر خواهد بود:

یعنی رنگی با کد #96FF32 رنگی است که 150 رنگ دانه قرمز دارد، رنگ سبز کاملاً در آن استفاده شده است و مقدار آبی آن معادل با 50 است.

اکنون اگر بخواهیم ببینم که کد فوق در صفحات مانیتور به چه رنگ است می توانیم عکس زیر را مد نظر قرار دهیم:

به خاطر داشته باشیم که برای حروف در مقادیر Hexadecimal می توان هم از حروف بزرگ به صورت FF و هم از حروف کوچک به صورت ff استفاده کرد (به نظر می رسد اگر یک رویکدر ثابت را همواره در کدنویسی اتخاذ کنیم در زمان ویرایش کد خود کمتر دچار سر در گمی شویم).

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

اگر خاطرمان باشد در آموزش سی و دوم رنگی به مقادیر زیر ایجاد کردیم:

اکنون برای آنکه بتوانیم ببینیم که این رنگ در دنیای واقعی چه رنگی است، نیاز است تا از یک نرم افزار ویرایش عکس مثل فتوشاپ استفاده کنیم. برای این منظور نرم افزار فتوشاپ را اجرا کرده و به صورت زیر عمل می کنیم:

از منوی اصلی نرم افزار روی گزینه Window کلیک کرده سپس همانطور که در تصویر فوق مشخص شده است روی گزینه Color کلیک می کنیم(در عوض می توان بدون مراجعه به منوی فوق کلید F6 را فشار داد):

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

پس از انتخاب گزینه Web Color Sliders، گزینه های پنجره Color به گزینه هایی که در کادر قرمز رنگ در تصویر فوق نشان داده شده اند تغییر پیدا خواهند کرد. در مقابل می بینیم که برای هر عدد یک Slider متناظر با R و G و B در نظر گرفته شده است که به ترتیب همان رنگهای قرمز، سبز و آبی هستند. در این پنجره فقط رنگ ها مد نظر قرار داده شده اند و خبری از گزینه آلفا نیست. حال اعداد به دست آمده را به وارد می کنیم:

پس از وارد کردن اعداد به دست آمده در پنجره Color، رنگ نهایی با یک فلش قرمز رنگ نشان داده شده است. به عبارت دیگر اگر در اپلیکیشن خود رنگ متنی را معادل با #96ff32 قرار دهیم، متن ما به رنگی نزدیک به سبز روی صفحه دستگاه به نمایش در خواهد آمد.

استفاده از فتوشاپ برای یافتن Hexadecimal مد نظر

در پایان می توان به یکی از مزیت های نرم افزار فتوشاپ نیز اشاره کرد. در واقع ما با استفاده از این نرم افزار بدون نیاز به ماشین حساب خواهیم توانست به معادل Hexadecimal یک رنگ دست پیدا کنیم. برای این منظور روی مربع سبز رنگی که در تصویر فوق با فلش مشخص شده است دو بار کلیک می کنیم و پنجره ای به شکل زیر مشاهده خواهیم کرد:

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

همانطور که در تصویر فوق مشاهده می شود، جایگاه دایره که در تصویر قبل با یک دایره قرمز رنگ نشان داده شده بود را با موس خود به پایین انتقال داده ایم. حال می بینیم که مقادیر RGB که در کادر قرمز رنگ قرار دارند تغییر پیدا کرده و بالتبع مقدار Hexadecimal که با یک فلش قرمز رنگ مشخص شده نیز به عدد #578928 تغییر پیدا کرده است. در این تصویر مربعی که پایین آن کلمه Current به معنی "کنونی" نوشته شده است را با عدد 1 و مربعی که بالای آن کلمه New به معنی "جدید" نوشته شده است را با عدد 2 مشخص کرده ایم. به عبارت دیگر مربع شماره یک رنگ قبلی ما بوده است و مربع شماره دو رنگ جدیدی است که ساخته ایم. علاوه بر این، یک Slider که به صورت عمودی در این پنجره قرار گرفته است نیز با یک بیضی قرمز رنگ مشخص شده است که با بالا و پایین بردن آن به طیف های رنگی گوناگونی دست پیدا خواهیم کرد.

نحوه ایجاد یک رنگ بدون نیاز با فتوشاپ و ماشین حساب

به طور کلی می توان گفت که 00 معادل با "حداقل رنگ" است و FF معادل با "حداکثر رنگ" می باشد بطوریکه یک عدد Hexadecimal از صفر شروع شده و تا عدد نه ادامه می یابد و پس از عدد نه به جای آنکه عدد ده در نظر گرفته شود حرف A مدنظر قرار داده می شود و به همین ترتیب تا حرف F که معادل با عدد 16 است ادامه می یابد:

برای روشن شدن این مطلب به جدول زیر توجه نمایید:

همانطور که در جدول فوق ملاحظه می شود، چنانچه مقادیر رنگ های قرمز، سبز و آبی معادل با صفر باشد رنگ حاصله سیاه خواهد بود، چنانچه مقادیر رنگ های قرمز، سبز و آبی به طور کامل استفاده شده باشد رنگ ما سفید خواهد بود، چناچه از سه رنگ قرمز، سبز و آبی فقط رنگ قرمز به طور کامل استفاده شده باشد و دو رنگ دیگر سبز و آبی اصلا استفاده نشده باشند رنگ حاصله قرمز خواهد بود، چنانچه از سه رنگ قرمز، سبز و آبی فقط رنگ سبز به طور کامل استفاده شده باشد و دو رنگ دیگر قرمز و آبی اصلا استفاده نشده باشند رنگ حاصله سبز خواهد بود و در نهایت چنانچه از سه رنگ قرمز، سبز و آبی فقط رنگ آبی به طور کامل استفاده شده باشد و دو رنگ دیگر قرمز و سبز اصلا استفاده نشده باشند رنگ حاصله آبی خواهد بود. در حقیقت با این قیاس حتی اگر به ماشین حساب و نرم افزار فتوشاپ هم دسترسی ندشته باشیم، خواهیم توانست رنگی نزدیک به رنگی که مد نظرمان است را ایجاد کنیم. مثلاً اگر رنگشناسی ما خوب باشد می دانیم که رنگ بنفش از ترکیب رنگهای قرمز و آبی به دست می آید. حال با دانستن این نکته یک کد Hexadecimal می نویسیم که مقدار قرمز آن کامل باشد، اصلا رنگ سبز نداشته باشد و مجدد مقدار آبی آن هم کامل باشد، بنابراین کد #FF00FF را به دست خواهیم آورد که به رنگ بنفش روشن به صورت زیر خواهد بود:

(لازم به ذکر است این رنگ بسته به نوع صفحه نمایش و میزان کیفیت آن می تواند طیفی از صورتی پررنگ تا بنفش روشن باشد).

نحوه خلاصه نویسی یک کد Hexadecimal

به خاطر داشته باشیم که اگر مقادیر یک کد Hexadecimal برابر یک دیگر بودند می توانیم یکی از آنها را بنویسیم. مثلاً کد رنگ قرمز که در بالا دارای مقدار #FF0000 بود را از آنجا که هر دو رقم مربوط به رنگ قرمز مشابه هستند(هر دو F هستند)، هر دو رقم مربوط به رنگ سبز مشابه هستند(هر دو 0 هستند) و هر دو رقم مربوط به رنگ آبی مشابه هستند(هر دو 0 هستند) می توانیم یک از آنها را نوشته و کد فوق را به صورت خلاصه به شکل #F00 بنویسیم(تفاوتی مابین حروف بزرک و کوچک نیست. در واقع اگر در فتوشاپ با حرف بزرگ چیزی را وارد کنیم به صورت خودکار به حرف کوچک تبدیل خواهد شد).

پس از مطالعه این آموزش انتظار می رود بتوانیم به سؤالات زیر پاسخ بدهیم:
1. FF در واحد Hexadecimal به چه معنا است؟
2. 00 در واحد Hexadecimal به چه معنا است؟
3. معادل عددی حرف D در بازه شانزده تایی مقادیر Hexadecimal چند است؟
4. به چه نحوی می توان یک کد Hexadecimal کامل را به صورت خلاصه نوشت؟
5. با توجه به چرخه رنگ زیر رنگ های درخواست شده را به صورت ذهنی بسازید؟

در این آموزش قصد داریم تا پروژه ای که در آموزش هشتم تحت عنوان My First Android Project ساختیم را به صورت یک فایل Zip ذخیره سازیم.

نحوه ذخیره سازی پروژه ها در اکلیپس

برای این منظور به محلی که در حین آماده سازی محیط برنامه نویسی اکلیپس برای Workspace در نظر گرفتیم مراجعه می کنیم. چنانچه به خاطر نیاوریم که محل انتخابی برای Workspace کجا است، می توانیم به صورت زیر عمل کنیم:

از منوی اصلی اکلیپس روی گزینه File کلیک کرده سپس روی گزینه Switch Workspace کلیک می کنیم و همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است روی گزینه Other کلیک می کنیم:

سپس پنجره ای به صورت فوق باز خواهد شد که نشانگر محلی است که Workspace ما در آن ذخیره شده است. برای مثال Workspace خود را روی درایو C داخل فولدر dev ذخیره کرده ام. اکنون که مشخص شد Workspace در چه محلی ذخیره شده است، به راحتی می توانیم وارد آن فولدر شویم(لازم به ذکر است این مکان ممکن است روی سیستم هر کاربری متفاوت باشد):

همانطور که در تصویر فوق ملاحظه می شود، وارد فولدری شده ایم که Workspace در آن ذخیره شده است. حال می توانیم فولدر مربوط به پروژه خود تحت عنوان My First Android Project را مشاهده کنیم:

اکنون روی فولدر مربوط به پروژه خود راست کلیک کرده و همانطور که در تصویر فوق ملاحظه می شود از میان گزینه های موجود، روی گزینه Add to archive به معنی "اضافه کردن به آرشیو" کلیک می کنیم(چنانچه به تصویر کنار این گزینه دقت کنیم، متوجه خواهیم شد که مربوط به لوگوی نرم افزار WinRAR است.

چنانچه کاربری این نرم افزار را روی سیستم خود نصب نداشته باشد به سادگی می توان این نرم افزار را از اینترنت به صورت رایگان دانلود نمود):

پس از کلیک کردن روی گزینه Add to archive پنجره ای به صورت فوق باز خواهد شد. از میان کلیه تنظیمات این پنجره صرفاً نیاز است که فرمت فایلی که می خواهیم ایجاد کنیم را همانطور که در تصویر فوق با یک فلش قرمز رنگ نشان داده شده است روی گزینه ZIP قرار دهیم و مابقی تظیمات را به صورت پیش فرض بگذاریم. حال می توانیم روی گزینه OK کلیک نماییم:

به محض کلیک کردن روی گزینه OK یک فایل zip با همان نامی که برای پروژه خود در نظر گرفته بودیم ایجاد خواهد شد. حال می توانیم این فایل جدید zip را Cut کردن و جایی روی سیستم خود ذخیره سازیم. برای این مثال بنده آن را روی Desktop قرار خواهم داد.

اکنون نرم افزار اکلیپس را اجرا می کنیم:

پس از مراجعه به پنجره Package Explorer همانطور که در تصویر فوق مشاهده می شود تنها پروژه خود را ملاحظه خواهیم کرد. از آنجا که ما توانسته ایم با موفقیت پروژه خود را به صورت یک فایل zip ذخیره سازیم، خواهیم توانست با خیال راحت این پروژه را Delete کنیم:

برای Delete کردن پروژه خود روی نام پروژه راست کلیک کرده و از میان گزینه های موجود همانطور که با یک فلش قرمز رنگ مشخص شده روی گزینه Delete کلیک می کنیم:

پس از کلیک کردن روی گزینه Delete با پنجره جدیدی به صورت بالا مواجه خواهیم شد. در این تصویر گزینه ای تحت عنوان Delete project content on disk با یک فلش قرمز رنگ مشخص شده است. این عبارت به معنی "محتویات این پروژه را از روی هارد دیسک پاک کن" می باشد. به عبارت دیگر اگر این گزینه را تیک دار نماییم، کل این پروژه را از روی سیستم خود پاک خواهیم کرد و دیگر به هیچ وجه نخواهیم توانست به آن دست پیدا کنیم(لازم به ذکر است که پس از پاک کردن پروژه ها در اکلیپس، پروژه های Delete شده به Recycle Bin منتقل نخواهند شد و از همین رو است که نمی توانیم به آنها دسترسی پیدا کنیم).

حال چنانچه این گزینه را تیک دار نکنیم، این پروژه فقط از داخل Package Explorer پاک خواهد شد و این در حالی است که هنوز در داخل Workspace باقی خواهد ماند. از آنجا که در این مثال از قبل یک Backup یا فایل پشتیبان از پروژه خود گرفته ایم با خیال راحت می توانیم تیک گزینه فوق را بزنیم و سپس روی گزینه OK کلیک کنیم:

حال با نگاهی به فولدر Workspace خواهیم دید که این پروژه کاملاً از روی سیستم ما پاک شده است. اکنون اگر به پنجره Package Explorer در محیط اکلیپس نگاهی بیندازیم، خواهیم دید که هیچ پروژه ای داخل آن نیست:

نحوه Import کردن یک پروژه به اکلیپس

اکنون فرض کنیم که قصد داریم تا اولین پروژه ای را که در قسمت هشتم از آموزش ها ایجاد کردیم و در این آموزش از روی آن یک Backup گرفتیم را مجدد وارد اکلیپس کنیم تا تغییراتی روی آن اعمال کنیم:

همانطور که پس از تبدیل پروژه خود به یک فایل zip گفتیم، این فایل را روی Desktop قرار می دهیم. حال به محیط اکلیپس باز گشته و همانند تصویر زیر از منوی اصلی نرم افزار روی گزینه فایل کلیک کرده و روی گزینه Import کلیک می نماییم:

پس از کلیک روی گزینه Import با پنجره دیگری به صورت زیر مواجه خواهیم شد:

همانطور که در تصویر فوق مشاهده می کنیم، چندین گزینه وجود دارند که از میان آنها روی فولدر General کلیک کرده و سپس همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است گزینه Existing Projects into Workspace به معنی "وارد کردن پروژه های موجود به داخل Workspace اکلیپس" را انتخاب کرده و سپس روی گزینه Next کلیک می کنیم:

پس از کلیک روی گزینه Next با پنجره فوق مواجه خواهیم شد که دارای دو گزینه است. از آنجا که فرمت فایلی که می خواهیم به اکلیپس Import کنیم zip است، از اینرو گزینه Select archive file که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است را انتخاب نموده سپس روی گزینه Browse کلیک می کنیم و با پنجره ای به صورت زیر مواجه خواهیم شد:

حال در این مرحله می بایست به مکانی که فایل zip خود را در آن قرار داده ایم برویم و از آنجا که در این آموزش فایل خود را روی Desktop قرار داده ایم، به Desktop رفته، فایل zip را انتخاب کرده و روی گزینه Open کلیک می کنیم:

پس از کلیک کردن روی دکمه Open به پنجره قبل بازگشته و این در حالی است که در بخش مربوط به Projects در این پنجره، همانطور که در تصویر فوق مشاهده می شود پروژه ما که My First Android Project نام داشت وارد شده و کنار آن هم تیک خورده است. حال می توانیم روی گزینه Finish کلیک کنیم که پس از اینکار خواهیم دید که این پروژه جدید وارد اکلیپس خواهد شد:

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

همانطور که در آموزش اول اشاره شد، یکی از محیط های برنامه نویسی که از آن طریق می توان اقدام به ساخت اپلیکیشن اندروید کرد محیط برنامه نویسی ADT Bundle است که ساختاری شبیه اکلیپس دارد. در واقع نکاتی که پیرامون ذخیره سازی و همچنین Import کردن یک پروژه به داخل اکلیپس که در این آموزش مورد بحث قرار گرفت را نیز می توان در مورد ADT Bundle نیز مورد استفاده قرار داد.

برنامه نویسی مهم تر است یا طراحی رابط گرافیکی؟

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

فرض کنیم که ما به زبان برنامه نویسی جاوا بسیار مسلط هستیم و در پشت پرده یک کدنویسی بسیار حرفه ای انجام داده ایم اما این در حالی است که اپلیکیشن طراحی شده ما از لحاظ بصری ضعیف است و حتی کاربر را سردرگم هم می کند. عکس این قضیه هم صادق است. به عبارت دیگر فرض کنیم که ما یک طراح گرافیکی حرفه ای هستیم و با اصول طراح و رنگ شناسی به خوبی آشنا هستیم و به راحتی می توانیم UI هایی برای اپلیکیشن های خود طراحی کنیم که نظر هر کاربر را به خود جلب می کند اما در عین حال کدنویسی اپلیکیشن ما تا حدودی دارای Bug است و حتی این احتمال وجود دارد که کاربر در حین کار با اپلیکیشن ما با مشکل مواجه شود.

برای روشن شدن این مسئله می توانیم بازی Angry Birds که در سطح دنیا با استقبال خوبی مواجه شده است را مد نظر قرار دهیم. فرض کنیم که این بازی کدنویسی بسیار حرفه ای داشت به همین صورت که می بینیم اما از لحاظ بصری همانند بازی های آتاری که بیست سال پیش وجود داشتند بود. در چنین حالتی این بازی به هیچ وجه توان رقابت با بازی هایی که امروزه در بازار وجود دارند را نداشت. حال عکس این قضیه را فرض کنیم. بازی پرندگان خشمگین با همین UI که مشاهده می کنیم بود ولی برنامه نویسی آن بسیار ضعیف بود. به عبارت دیگر در حین بازی کردن اپلیکیشن متوقف می شد و یا سطح دشواری آن حساب شده نبود. مثلا با یک شلیک بسیار آهسته کل ساختمان هدف می آمد پایین!

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

انواع Layout ها

به طور کلی می توان گفت که هر فایل XML در برگیرندۀ یکی از انواع مختلف Layout ها می باشد. برای مثال پروژه ای جدید تحت عنوان Layouts به معنی "انواع Layout ها" در محیط اکلیپس ایجاد می کنیم(برای آشنایی بیشتر با نحوه ساخت یک پروژه جدید در محیط برنامه نویسی اکلیپس به آموزش هشتم مراجعه نمایید). پس از باز کردن فایل main.xml که در زیر شاخه فولدر layout قرار دارد، با کد زیر مواجه خواهیم شد:

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="fill_parent"
9. android:text="@string/hello"
10. android:textColor="#fff">
11. <LinearLayout>

همانطور که در کد فوق مشاهده می کنیم، نوع Layout به کار گرفته شده در این پروژه به صورت پیش فرض یک LinearLayout می باشد(لازم به ذکر است واژه Linear از واژه Line به معنی "خط" گرفته شده است که به معنی "خطی" می باشد). در یک LinearLayout همانطور که از نام این Layout بر می آید، عناصر روی صفحه در امتداد یک خط یکی پس از دیگری قرار می گیرند. حال اینکه این عناصر به صورت عمودی در کنار یکدیگر قرار گیرند یا به صورت افقی بسته تنظیماتی است که داخل این Layout انجام می دهیم. همانطور که در کد فوق ملاحظه می شود Value متد orientation این Layout معادل با vertical به معنی "عمودی" در نظر گرفته شده است. به عبارت دیگر اگر مثلاً یک TextView دیگر به این Layout اضافه کنیم، این TextView جدید زیر TextView قبلی قرار می گیرد و هر دو به صورت عمودی در کنار یکدیگر قرار می گیرند.

نحوه به کار گیری Graphical Layout

همانطور که در آموزش بیست و هشتم توضیح داده شد، می توانیم با کدنویسیی مشابه آنچه در آن آموزش دیدیم، اقدام به ایجاد یک TextView ، دکمه و یا هر چیزی دیگری روی UI اپلیکیشن خود نماییم اما این در حالی است که اینکار نه تنها زمان بر می باشد بلکه احتمال خطای ما را نیز افزایش خواهد داد. به عبارت دیگر با استفاده از Graphical Layout به سادگی با استفاده از Drag & Drop خواهیم توانست بدون نیاز به نوشتن کد اقدام به ساخت عناصر مختلفی همچون TextView نماییم. برای روشن شدن این مطلب، این کار را به صورت عملی انجام خواهیم داد:

همانطور که در تصویر فوق مشاهده می کنیم، با کلیک کردن روی گزینه Graphical Layout که با یک بیضی قرمز رنگ مشخص شده است به محیط گرافیکی فایل XML مرتبط با Layout دست پیدا خواهیم کرد. همانطور که در قسمت فوق توضیح داده شد، قصد داریم تا یک TextView دیگر به UI خود اضافه کنیم. برای این منظور از Tab های مختلفی که در Graphical Layout وجود دارد روی گزینه Form Widgets کلیک کرده و از میان گزینه های موجود یکی از گزینه های مربوط به TextView را انتخاب می کنیم(به طور کلی برای ساخت یک TextView سه گزینه TextView ، Medium Text و Large Text وجود دارد). برای مثال، همانطور که در تصویر فوق مشاهده می شود، با موس خود گزینه Large Text را گرفته و به سمت UI می کشیم و به محض اینکه نشانگر موس ما روی UI قرار گیرد یک علامت به علاوه کوچک کنار نشانگر موس نمایان خواهد شد که به معنی این است که پس از رها کردن دکمه موس TextView به UI اضافه خواهد شد:

در تصویر فوق نقطه چینی به رنگ شبرنگ با یک فلش قرمز رنگ مشخص شده است. در حقیقت این نقطه چین حاکی از آن است که این TextView جدید که قرار است روی UI قرار بگیرد، داخل مستطیلی قرار خواهد گرفت که با نقطه چین زیر TextView قبلی مشخص شده است(در واقع از آنجا که Value متد orientation این Layout معادل با vertical است، TextView جدید زیر TextView قبلی قرار خواهد گرفت):

پس از رها کردن دکمه موس، TextView جدید روی UI قرار می گیرد(لازم به ذکر است از آنجا که از میان سه نوع TextView گزینه Large Text را انتخاب کردیم، از اینرو اندازه فونت این TextView جدید بزرگ تر از حالت قبلی خواهد بود). اکنون اگر روی Tab مربوط به main.xml کلیک کنیم خواهیم دید که یک TextView دیگر پس از TextView قبلی ایجاد شده است:

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. <TextView
11. android:id="@+id/textView1"
12. android:layout_width="wrap_content"
13. android:layout_height="wrap_content"
14. android:text="Large Text"
15. android:textAppearance="?android:attr/textAppearanceLarge" >
16. <LinearLayout>

حال فرض کنیم که به جای آنکه این دو TextView زیر یکدیگر به صورت عمودی قرار گیرند، می خواهیم آن دو را در کنار یکدیگر به صورت افقی قرار دهیم. برای این منظور دو راه کار وجود دارد که یک از طریق ویرایش فایل XML است و دیگری از طریق پنجره Properties است که در ابتدا این کار را از طریق ویرایش فایل XML انجام خواهیم داد. همانطور که در کد فوق ملاحظه می شود، در کد مربوطه به LinearLayout مقدار نسبت داده شده به متد orientation برابر با vertical است. حال اگر این مقدار را به horizontal تغییر دهیم عناصر داخل این Layout به صورت افقی کنار یکدیگر قرار خواهند گرفت. اکنون برای مشاهده نتیجه مجدد روی Tab مربوط به Graphical Layout کلیک می کنیم:

همانطور که در تصویر فوق ملاحظه می شود، پس از تغییر مقدار متد orientation از حالت vertical به horizontal فقط همان TextView اول را خواهیم دید و TextView جدیدی که ساختیم از دید پنهان است. در حقیقت علت این مسئله این است که همانطور که در تصویر فوق مشاهده می شود width یا عرض TextView قبلی برابر با fill_parent است:

به عبارت دیگر عرض این TextView کل صفحه UI را در برخواهد گرفت از این روی TextView جدیدی که به صورت افقی در کنار آن قرار گرفته است به بیرون UI رانده شده است. برای رفع این مشکل می بایست مقدار متد width را از حالت fill_parent به wrap_content تغییر دهیم(برای آشنایی بیشتر با این مقادیر به آموزش بیست و هشتم مراجعه نمایید):

اکنون مشاهده می کنیم که هر دو TextView در کنار یکدیگر قرار گرفته اند. راهکار دوم برای تغییر مقدار width از fill_parent به wrap_content استفاده از پنجره Properties است. برای این منظور مقدار متد width را دوباره با حالت اول باز می گردانیم تا این بار این تغییرات را در پنجره Properties اعمال کنیم:

ابتدا روی چیزی که می خواهیم تنظیمات آن را در پنجره Properties تغییر دهیم کلیک می کنیم تا انتخاب شود (مرحله 1). سپس در پنجره Properties روی Tab مربوط به Misc کلیک می کنیم تا زیرشاخه های آن باز شوند (مرحله 2) و در نهایت همانطور که در مرحله 3 نشان داده شده است روی مقدار مقابل Layout width کلیک کرده و روی گزینه wrap_content کلیک می کنیم تا انتخاب شود:

همانطور که در تصویر فوق ملاحظه می شود، باز هم هر دو TextView به صورت افقی در کنار یکدیگر قرار می گیرند (برای آشنایی بیشتر با پنجره Properties به آموزش بیستم مراجعه نمایید). پیش از این گفتیم که برای تغییر مقدار متد orientation از vertical به horizontal راه کار دیگری هم وجود داشته و آن استفاده از پنجره Properties است. پس از آنکه تنظیمات UI را به حال اول برگرداندیم، ابتدا روی جایی در صفحه مشکی UI کلیک می کنیم. با این کار به اکلیپس می فهمانیم که منظور ما از این کار انتخاب کل UI است. سپس به پنجره Properties رفته و تنظیمات آن را به صورت زیر تغییر می دهیم:

می بینیم که مجدد هر دو TextView در کنار یکدیگر قرار گرفته اند:

پس از آشنایی با 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 می توان بر این نسبت ها کنترل داشت.

پس از آشنایی با دو نوع از رایج ترین انواع Layout ها در اندروید، در این آموزش قصد داریم تا به معرفی دکمه ها و نحوه ایجاد آنها در یک اپلیکیشن بپردازیم. برای این منظور همانطور که در آموزش هشتم توضیح داده شد یک پروژه جدید در محیط برنامه نویسی اکلیپس تحت عنوان Introduction to Buttons به معنی "معرفی دکمه ها" ایجاد می کنیم.

همانطور که در تصویر فوق ملاحظه می شود اکلیپس یک Layout به صورت خودکار تحت عنوان main.xml ساخته و یک TextView حاوی جمله Hello World روی آن ایجاد می کند. از آنجا که در این آموزش قصد داریم تا بیشتر پیرامون نحوه ساخت دکمه ها در یک اپلیکیشن صحبت کنیم از اینرو این TextView را با یک بار کلیک کردن روی آن انتخاب کرده سپس دکمه Delete کیبورد را می زنیم:

همانطور که در تصویر فوق نشان داده شده است از Tab مربوط به Form Widgets با نشانگر موس خود Button را گرفته و به سمت Layout می کشیم. به محض اینکه نشانگر موس روی UI قرار گیرد یک علامت به علاوه کنار نشانگر موس ظاهر خواهد شد که به این معنی است که می توان با رها کردن نشانگر موس خود این دکمه را به UI اضافه کرد. اگر به تصویر بالا خوب توجه کنیم خواهیم دید که در قسمت گوشه بالا سمت چپ یک نقطه چین شبرنگ ایجاد شده است که این نقطه چین بدان معنا است که این دکمه در آن قسمت قرار خواهد گرفت. حال پس از رها کردن دکمه موس خواهیم دید که یک دکمه روی UI قرار خواهد گرفت:

اکنون با کلیک کردن روی Tab مربوط به main.xml کد مربوط به Layout این اپلیکیشن را خواهیم دید:

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. <Button
7. android:id="@+id/button1"
8. android:layout_width="wrap_content"
9. android:layout_height="wrap_content"
10. android:text="Button" >
11. <LinearLayout>

همانطور که از کد فوق مشخص است Layout ما از جنس LinearLayout است که فقط یک دکمه روی آن قرار دارد. پس از تگ مربوط به Button اولین خط از کد مربوط به id است که مخفف واژه Identification به معنی "تعیین هویت" یا "شناسایی" می باشد. id اختصاص داده شده به این دکمه button1 است و این در حالی است که برخورداری یک دکمه از یک id دارای اهمیت بسیاری است چرا که در Activity مربوط به این اپلیکیشن فقط از طریق همین id است که می توانیم عملکردی برای این دکمه تعریف کنیم. آنچه در id یک دکمه از اهیمت بسزایی برخوردار است شیوه نامگذاری آن دکمه است. به عبارت دیگر زمانیکه ما در اپلیکیشن خود فقط یک الی دو دکمه داشته باشیم نامگذاری دکمه به هر شیوه ای خیلی مشکل زا نخواهد بود اما زمانیکه تعداد دکمه ها در یک اپلیکیشن زیاد باشند می بایست سعی کنیم که یک شیوه نامگذاری را در برنامه نویسی خود مد نظر قرار داده و آن را در کل اپلیکیشن دنبال کنیم. به طور مثال برای نامگذاری دکمه ها می توان از پیشوند btn که می توان آن را مخفف واژه Button به معنی "دکمه" در نظر گرفت به علاوه یک _ سپس نامی گویا برای دکمه استفاده کرد. به طور مثال می توان نام دکمه ای که ایجاد کردیم را به btn_myButton تغییر دهیم. به خاطر داشته باشیم که در نامگذاری دکمه ها به هیچ وجه نمی توانیم از علائمی همچون & و % و $ و غیره استفاده کنیم. در خط دوم کد مربوط به این دکمه عرض این دکمه قرار دارد که مقدار آن برابر با wrap_content است به این معنی که عرض این دکمه به اندازه ای خواهد بود که نوشته داخل آن را در خود جای دهد. خط بعدی به اندازه ارتفاع دکمه اختصاص داده شده است که مقداری مشابه با مقدار عرض دکمه برای آن در نظر گرفته شده است. در نهایت کد مربوطه به نوشته داخل دکمه است که حاوی مقداری معادل با Button به معنی "دکمه" است. به منظور شخصی سازی عنوان این دکمه نام آن را به Go to Next Page به معنی "برو به صفحه بعد" تغییر می دهیم. اکنون پس از بازگشتن به Tab مربوط به Graphical Layout با تصویر زیر مواجه خواهیم شد:

می بینیم که نام این دکمه به نام دلخواه ما تغییر کرده است. چنانچه بخواهیم id مربوط به این دکمه را بدون مراجعه به کد XML تغییر دهیم می توان راه کار دیگری که در تصویر زیر آمده است را دنبال کنیم:

در حقیقت با انتخاب دکمه ای که می خواهیم id آن را تغییر دهیم و راست کلیک کردن روی آن پنجره فوق نمایان خواهد شد و همانطور که در تصویر فوق با یک بیضی قرمز رنگ مشخص شده است می بایست روی گزینه Edit ID کلیک کرده و در پنجره دیگری که باز خواهد شد id این دکمه را تغییر دهیم:

اگر خاطران باشد برای این دکمه id یی تحت عنوان btn_myButton را در بخش XML در نظر گرفتیم. حال همان نام در این پنجره به نمایش در آمده است که چنانچه تمایل داشته باشیم می توانیم این نام را تغییر داده و روی دکمه OK کلیک کنیم. در آموزش بیست و سوم با پنجره های کاربردی محیط برنامه نویس اکلیپس در ساخت یک اپلیکیشن اندرویدی آشنا شدیم. اگر خاطرمان باشد یکی از آن پنجره ها Properties نام داشت. در واقع از این مرحله از آموزش ها به بعد بیشتر به اهمیت چنین پنجره ای بیشتر پی خواهیم برد. به منظور به کارگیری این پنجره مطابق تصویر زیر عمل می کنیم:

همانطور که در تصویر فوق مشخص است ابتدا پنجره Properties را باز می کنیم (چنانچه این پنجره بسته باشد همانطور که در تصویر زیر نشان داده شده است از منوی اصلی Window روی Show View سپس روی گزینه Properties کیک می کنیم):

حال با کلیک کردن روی دکمه یا Widget یی که روی UI قرار دارد خواهیم توانست به تنظیمات آن در بخش Properties دست پیدا کنیم. همانطور که در تصویر پیش مشخص است، پس از کلیک کردن روی تنها دکمه قرار گرفته روی UI سه منوی Button و Misc و Deprecated در پنجره Properties نمایان می شود. حال روی منوی Button کلیک کرده تا به زیرشاخه های آن دست پیدا کنیم:

می بینیم زیرشاخه منوی Button لیست بلندی از تنظیماتی است که می توان برای این دکمه در نظر گرفت.

همانگونه که در آموزش سی و هفتم دیدیم یکی از راه کارهای سریع برای اعمال تغییرات روی یک دکمه یا هر Widget یی استفاده از پنجره Properties است.

در ادامه آموزش قبل، در این آموزش قصد داریم تا ببینیم به چه نحوی می توان خصوصیات یک دکمه را در بخش Properties تغییر دارد. برای این منظور پروژه که در آموزش سی و هفتم ایجاد کردیم را مورد استفاده قرار خواهیم داد.

همانطور که در تصویر فوق مشخص است با کلیک کردن روی دکمه مد نظر و باز کردن پنجره Properties در زیرشاخه Tab مربوط به Button در این پنجره، به لیستی از تنظماتی بر خواهیم خورد که با تغییر آنها می توانیم شاهد اعمال تغییرات روی دکمه مد نظر باشیم (لازم به ذکر است که این زیرشاخه ها بر اساس حروف الفبای انگلیسی هستند. پس برای یافتن یکی از آنها صرفاً کافی است حرف اول آن را مد نظر قرار داده سپس بر اساس ترتیب الفبای انگلیسی آن را در لیست پیدا کرد). همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است با پایین آوردن اسلایدر کنار این پنجره می توان به گزینه هایی دست پیدا کرد که قابل مشاهده نیستند:

برای مثال همانطور که در تصویر فوق مشاهده می کنیم یکی از گزینه ها Id نام دارد و در بخش مقابل آن Value یا مقدار Id در نظر گرفته شده است. این Id در حقیقت همان id یی است که در آموزش گذشته برای دکمه خود تحت عنوان btn_myButton در نظر گرفتیم. به منظور تغییر id در نظر گرفته شده برای این دکمه روی Vaule مرتبط با این Id که در تصویر فوق با یک مستطیل قرمز رنگ مشخص شده است یک بار کلیک می کنیم:

با یک بار کلیک کردن روی این ناحیه، Value مرتبط با Id به رنگ آبی در آمده و این حاکی از آن است که می توان id یی که از قبل در نظر گرفته بودیم را ویرایش کنیم. یکی دیگر از ویژگی های استفاده از پنجره Properties تغییر متن داخل دکمه ها است:

همانطور که در تصویر فوق با یک فلش قرمز رنگ مشخص شده است گزینه ای تحت عنوان Text به معنی "متن" وجود دارد که این وظیفه را دارا است تا متن داخل دکمه را به نمایش در آورد. همانطور که Value مرتبط با Text در تصویر فوق با یک مستطیل قرمز رنگ مشخص شده است، این Value حاوی جمله Go to Next Page است که در آموزش قبل در بخش XML وارد کردیم. همانند نحوه تغییر id در پنجره Properties با کلیک کردن روی این Value قادر خواهیم شد تا مقدار آن را تغییر دهیم. در تصویر زیر با برخی از دیگر تنظمات کاربردی یک دکمه آشنا خواهیم شد:

در گزینه شماره 1 می توان رنگ متن داخل دکمه را تغییر داد (به منظور آشنایی بیشتر با رنگ ها در سیستم عامل اندروید به آموزش های سی و دوم و سی و سوم مراجعه نمایید).

گزینه شماره 2 این امکان برای توسعه دهنده فراهم آورده است تا بتواند اندازه متن داخل دکمه را تغییر دهد (لازم به ذکر است که برای اندازه متن می بایست یکی از واحدهای dp یا sp را مد نظر قرار دهیم). در گزینه شماره 3 می توان یکی از سه استایل bold، normal و یا italic را برای دکمه خود در نظر گرفت:

همانطور که در تصویر فوق ملاحظه می شود پس از کلیک کردن روی قسمتی که برای Value مرتبط با Text style در نظر گرفته شده است دکمه ای در بخش Value ظاهر می شود که با کلیک کردن روی آن پنجره زیر را مشاهده خواهیم کرد:

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

مجدد به تصویر قبل باز گشته و مورد 4 که Typeface است را مد نظر قرار می دهیم. در اندروید منظور از Typeface ساختار فونت از جهت نوع طراحی آن است که در حال حاضر چهار نوع Typeface بیشتر در نظر گرفته نشده است که عبارتند از noraml، sans، serif و monospace که در ادامه به توضیح پیرامون هر یک از آنها خواهیم پرداخت.

مورد normal همانگونه که از نامش پیدا است یک فونت عادی است. به عبارت دیگر هیچ فرقی نمی کند که از گزینه Typeface گزینه normal را انتخاب کنیم یا نکنیم چرا که به صورت پیش فرض نوع فونتی که برای دکمه ایجاد شده در نظر گرفته خواهد شد normal خواهد بود اگرچه که پس از ساخت یک دکمه جدید گزینه normal در منوی Typeface انتخاب نشده باشد.

مورد serif به نوعی از فونت ها اطلاق می گردد که دارای دنباله های بسیار کوچکی هستند که به یک حرف یا علامت می چسبند:

همانطور که در تصویر فوق نشان داده شده است به قسمت پایینی حرف A یک دنباله کوچک چسبیده است که اصطلاحاً در تایپوگرافی Serif نام دارد.

در زبان فرانسه معادل فارسی "بدون" Sans است. به عبارت دیگر Typeface یی که از جنس Sans Serif باشد به Typeface یی گفته می شود که همانند تصویر زیر آن دنباله های کوچک را نداشته باشد:

از جمله فونت های معروف Serif می توان به Times New Roman و از جمله فونت های معروف Sans Serif می توان به فونت Helvetica اشاره کرد.

مورد آخر از Typeface ها monospace نام دارد (نام دیگری که برای این نوع فونت در تایپوگرافی در نظر گرفته می شود fixed-width است به معنی "عرض ثابت"). کاربرد این نوع فونت بیشتر در محیط های برنامه نویسی است. به طور خلاصه می توان گفت که هرگاه کلیه کاراکترهای یک نوع فونت دارای عرض یکسانی باشند آن فونت یک monospace است:

همانگونه در که در تصویر فوق مشخص است نوشته بالایی با فونتی از جنس serif نوشته شده است و نوشته پایینی با فونتی از جنس monospace نوشته شده است. اگر به نوشته بالا خوب دقت کنیم می بینیم که هر کاراکتری بسته نوع آن کاراکتر عرض متفاوتی را نسبت به دیگر کاراکترها به خود اختصاص داده است. مثلا حرف r عرض به مراتب کمتری نسبت به حرف n را به خود نسبت داده است اما این در حالی است که در نوشته پایین که با یک فونت monospace نوشته شده است می توان گفت کلیه کاراکترها داری عرض "تقریباً" یکسانی هستند. از جمله فونت هایی از این دست می توان به فونت Courier اشاره کرد.

پس از توضیح مفصل پیرامون Typeface حال قصد داریم تا رنگ فونت دکمه ای که ایجاد کرده ایم را به قرمز تغییر داده، سپس اندازه فونت را به 24dip افزایش دهیم، استایل bold را برای فونت خود در نظر بگیریم و در نهایت از یک Typeface از جنس serif برای دکمه خود استفاده کنیم:

پس از آشنایی با نحوه ایجاد یک دکمه و همچنین تغییر برخی خصویات آن مثل اندازه فونت، نوع فونت و غیره، در این آموزش قصد داریم ببینیم که به چه نحوه می توان ظاهر یک دکمه را از یک ظاهر پیش فرض به یک ظاهر شخصی مبدل ساخت. برای این منظور نیاز به ایجاد پروژه جدیدی نبوده و کار خود را در ادامه پروژه جلسات قبل دنبال می کنیم.

اگر خاطرمان باشد در آموزش قبل موفق شدیم برخی ویژگی های دکمه را تغییر دهیم اما این در حالی است که علیرغم اعمال این تغییرات، این دکمه باز هم ظاهری شبیه به دکمه های پیش فرض دارد و ممکن است چنین ظاهر پیش فرضی با دیگر عناصر روی UI اپلیکیشن ما هم خوانی نداشته باشد. از این رو نیاز است تا فرا گیریم که به چه نحوی می توان ظاهری دلخواه برای یک دکمه تعریف کرد:

برای شروع کار نیاز است تا از زیرشاخه فولدر res روی فولدر drawable راست کلیک کرده سپس از منوی New همانطور که در تصویر فوق مشخص است روی گزینه Android XML File کلیک کنیم (لازم به ذکر است چنانچه فولدر drawable در زیرشاخه فولدر res وجود نداشت ابتدا آن را ایجاد کنیم. به منظور فراگیری نحوه ایجاد یک فولدر جدید به آموزش دوازدهم مراجعه نمایید):

اکنون همانطور که در تصویر فوق مشخص است با پنجره ساخت یک فایل XML جدید رو به رو خواهیم شد. از بخش Resource Type می بایست گزینه Drawable را انتخاب کرده و از بخش Project می بایست نام پروژه ای که می خواهیم این فایل XML در آن ایجاد شود را انتخاب نماییم که در این آموزش پروژه Introduction to Buttons را انتخاب می کنیم. در بخش مربوط به File می بایست نامی برای این فایل XML جدید انتخاب نماییم که در این مثال نام button_background را انتخاب کرده ایم. در انتخاب نام فایل دقت داشته باشیم که از – و حروف بزرگ مثل A و علائمی همچون & نمی توانیم استفاده کنیم.

چنانچه نامی که برای این فایل در نظر گرفته ایم چند بخشی است می توان از _ مابین اسامی استفاده کرد. سپس از بخش Root Element می بایست گزینه shape را انتخاب نموده سپس روی گزینه Finish کلیک نماییم (در این مرحله از آموزش نیازی به کلیک کردن روی گزینه Next و اعمال تنظیمات بیشتر برای این فایل XML نیست).

پس از کلیک کردن روی دکمه Finish خواهیم دید که فایلی به همان نام انتخابی ما در زیرشاخه فولدر drawable ایجاد خواهد شد. پس از دو بار کلیک کردن روی نام فایل، این فایل در محیط برنامه نویسی اکلیپس باز خواهد شد:

همانطور که در تصویر فوق مشخص است پس از تگ آغازین می توانیم شروع به نوشتن کد نماییم. در حقیقت پس از تایپ کردن علامت < اکلیپس به صورت خودکار می بایست پنجره جدیدی مطابق با تصویر فوق باز نماید (در صورتیکه اکلیپس اینکار را به صورت خودکار انجام نداد می توان پس از نوشتن علامت < هم زمان دکمه های Ctrl و Space را فشار داد).

همانطور که در این پنجره مشخص است عناصری که با استفاده از آنها می توانیم دکمه خود را Customize کنیم در اختیار ما قرار می گیرند. به طور خلاصه اگر بخواهیم در دکمه شخصی شده خود از گوشه های غیر قائم استفاده کنیم می بایست از دستور corners استفاده کنیم، اگر بخواهیم که در دکمه خود از گرادیانت استفاده کنیم می بایست از دستور gradient استفاده نماییم. منظور از گرادیانت حالتی است که در تصویر زیر نشان داده شده است:

به طور خلاصه گرادیانت عبارت است از اینکه غلظت رنگ از 100 درصد شروع شده و به تدریج به شفافیت سیر می کند.

چنانچه بخواهیم دکمه ما دارای padding باشد می بایست از دستور مرتبط با آن استفاده کنیم.

همانطور که در تصویر فوق نشان داده شده است، منظور از padding فاصله ای است که مابین متن داخل دکمه تا لبه دکمه قرار می گیرد.

دستور size همانطور که از نامش مشخص است این وظیفه را دارا است تا اندازه دکمه را مشخص سازد.

چنانچه بخواهیم رنگ خاصی را برای پس زمینه دکمه خود در نظر بگیریم می بایست از دستور solid استفاده نموده و در نهایت دستور stroke این وظیفه را دارا است تا یک حاشیه برای دکمه ایجاد سازد.

اکنون که با عملکرد هر یک از موارد فوق آشنا شدیم، قصد داریم تا به طور عملی آنها را مورد استفاده قرار دهیم:

همانطور که در تصویر فوق مشخص است ابتدا روی گزینه solid کلیک کرده تا بتوانیم رنگی را برای دکمه خود در نظر بگیریم:

سپس حرف a کوچک را نوشته و دکمه های Ctrl و Space را به صورت هم زمان فشار می دهیم و پنجره ای به صورت فوق نمایان خواهد شد. حال همانطور که در تصویر فوق نشان داده شده است روی اولین گزینه کلیک می کنیم:

اکنون مابین دو علامت گیومه می بایست یک علامت # قرار داده و رنگ مد نظر خود را وارد نماییم (برای آشنایی بیشتر با نحوه ایجاد رنگ در سیستم عامل اندروید به آموزش های سی و دوم و سی و سوم مراجعه نمایید).

از آنجا که قصد داریم دکمه ما زرد رنگ باشد کد #ffde57 را مابین دو علامت گیومه قرار می دهیم. حال همانطور که در تصویر زیر مشخص است پس از قرار دادن نشانگر موس خود بعد از گیومه دوم مجدد کلید های Ctrl و Space را زده و از پنجره ای که باز خواهد شد گزینه دوم را انتخاب می کنیم:

در نهایت کد ما به شکل در خواهد آمد:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
3. <solid android:color="#ffde57" />
4.  

به همین روش سعی می کنیم تا ویژگی های بیشتری به دکمه خود بیفزایم:

1. <?xml version="1.0" encoding="utf-8"?>
2. <shape xmlns:android="http://schemas.android.com/apk/res/android" >
3. <solid android:color="#ffde57" />
4. <corners android:radius="20dip" />
5. <stroke
6. android:width="4dip"
7. android:color="#ffffff" />
8. </shape>

در خط بعد که تگ مربوط به corners قرار دارد مقدار متد radius به معنی "شعاع" را برابر با 20dip قرار داده ایم. تگ مربوط به stroke دارای دو متد است که متد اول به مقدار 4dip عرض stroke را مشخص می کند و متد دوم به مقدار #ffffff رنگ سفید را برای این stroke در نظر می گیرد. حال برای ادامه کار مطابق تصویر زیر عمل می کنیم:

همانطور که در تصویر فوق مشخص است ابتدا روی دکمه مد نظر کلیک کرده تا انتخاب شود سپس از پنجره Properties گزینه Background را پیدا نموده و روی خانه ای که برای Value آن در نظر گرفته شده است کلیک می کنیم و خواهیم دید که دکمه ای ظاهر خواهد شد که با کلیک روی آن خواهیم توانست به پنجره زیر دست پیدا کنیم:

از آنجا که دکمه Customized شده خود را در فولدر drawable ایجاد کردیم در این پنجره نیز می بایست روی این گزینه کلیک کرده و نام مد نظر خود را بیابیم. پس از انتخاب آن می توانیم روی دکمه OK کلیک نماییم:

به محض کلیک کردن روی گزینه OK خواهیم دید که خصوصیاتی که در فایل XML تعریف کرده بودیم روی دکمه ما اعمال خواهد شد.

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

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

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

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

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

برای شروع کار همانطور که در آموزش هشتم توضیح داده شد یک پروژه جدید در محیط برنامه نویسی اکلیپس تحت عنوان 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>

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

پس از ساخت یک TextView در آموزش پیش در این آموزش قصد داریم به بررسی این نکته بپردازیم که به چه نحوی می توان متون فارسی را وارد اپلیکیشن خود نماییم. برای این منظور پروژه ای که در آموزش چهلم تحت عنوان My Prayer Counter ایجاد کردیم را در محیط اکلیپس باز نموده و دو بار روی فایل main.xml را از فولدر layout کلیک کرده تا باز شود.

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>

همانطور که در کد فوق مشاهده می کنیم، متدی تحت عنوان text وجود دارد که Value یا مقدار مرتبط با آن Large Text است. ما به سادگی قادر خواهیم بود تا این متن را به هر متن فارسی که تمایل داشته باشیم تبدیل کنیم که در این آموزش عبارت "تعداد ذکرهای من" را جایگزین می کنیم:

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="تعداد ذکرهای من"
12. android:textAppearance="?android:attr/textAppearanceLarge"
13. android:textColor="#763f05"
14. android:textSize="40dip" />
15. </LinearLayout>

حال روی Tab مربوط به Graphical Layout کلیک کرده تا ببینیم خروجی این متن فارسی روی UI به چه شکلی است:

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

همانگونه که در تصویر فوق مشخص است دستگاه مجازی قادر به نمایش صحیح اپلیکیشن ما نمی باشد. چنانچه بخواهیم علت این مسئله را مورد بررسی قرار دهیم بایستی بگوییم از آنجا که در حین ساخت دستگاه مجازی از بخش Target نسخه Android 2.1 را انتخاب کرده ایم و این نسخه از سیستم عامل اندروید قادر به نمایش متون فارسی نیست، از اینرو اپلیکیشن ما به درستی روی دستگاه مجازی اجرا نخواهد شد. برای این منظور دو راه کار وجود دارد. راه کار اول اینکه یک دستگاه مجازی دیگر ایجاد کرده و حتماً به خاطر داشته باشیم که در تنظیمات آن در بخش Target حتماً نسخه Android 3.0 به بالا را مد نظر قرار دهیم و یا اینکه همین دستگاه مجازی را ویرایش کرده و نسخه Target آن را ارتقاء دهیم. چنانچه بخواهیم یک دستگاه مجازی را ویرایش کنیم می بایست مطابق تصویر زیر پیش رویم:

همانطور که مشخص است ابتدا با کلیک بر روی گزینه مد نظر آن را انتخاب نموده سپس با کلیک روی گزینه Edit به پنجره زیر دست پیدا خواهیم کرد:

حال در بخش Target از منویی که پیش رو داریم می توانیم نسخه Android 3.0 به بالا را انتخاب نموده و در نهایت روی دکمه Edit AVD کلیک نماییم. اکنون مجدد به پنجره قبل بازگشته و با کلیک بر روی دکمه Start می توانیم دستگاه مجازی ویرایش شده خود را اجرا نماییم. پس از اجرای دستگاه مجازی که ممکن است کمی هم تا کاملاً اجرا شود به طول انجامد مجدد روی دکمه Run کلیک می کنیم:

همانگونه که در تصویر فوق مشخص است، این دستگاه مجازی جدید قادر به نمایش متون فارسی هم می باشد(لازم به ذکر است که اگر این دستگاه مجازی به صورت پیش فرض به صورت افقی بود با فشردن هم زمان دکمه های Ctrl و F12 می توان آنرا به صورت عمودی در آورد و بالعکس). نکته ای که در مورد UI وجود دارد این است که این TextView در مرکز رابط گرافیکی قرار ندارد. به منظور مرکز قرار دادن کلیه عناصر روی رابط گرافیکی نیاز است تا ابتدا Layout خود را با نشانگر موس انتخاب کنیم. برای این منظور در هر جایی روی UI به جزء TextView کلیک می کنیم تا کل Layout انتخاب شود. حال به پنجره Properties رفته و مطابق تصویر زیر تغییراتی را اعمال می کنیم:

با کلیک کردن در بخش Value مرتبط با متد Gravity همانطور که در تصویر فوق نشان داده شده است دکمه ای ظاهر می شود که با کلیک روی آن به پنجره زیر دست پیدا خواهیم کرد:

در پنجره فوق کلیه مقادیری که می توان برای متد gravity در نظر گرفت نشان داده شده است و همانگونه که از نام آنها بر می آید با اعمال هر یک از آنها جایگاه کلیه عناصر قرار گرفته روی UI تغییر خواهد کرد. به طور مثال چنانچه بخواهیم کلیه عناصر در مرکز Layout قرار گیرند می بایست Value مرتبط با center را تیک بزنیم اما از آنجا که در این آموزش قصد داریم تا TextView ما در مرکز قرار گرفته اما در عین حال در بالای Layout هم قرار گیرد می بایست گزینه center-horizontal را تیک بزنیم(به عنوان فعالیت تمرینی می توان تک تک آنها را تیک زده سپس به Graphical Layout رجوع کنیم تا ببینیم که هر یک از آنها چه عملکردی دارا است). حال روی گزینه OK کلیک می کنیم و مجدد اپلیکیشن خود را اجرا می کنیم:

می بینیم که متن ما در وسط UI قرار گرفته است. حال نیاز داریم تا یک TextView دیگر زیر TextView قبلی ایجاد کنیم که نقش کنتور یا شمارنده را داشته باشد (به منظور جلوگیری از طولانی شدن آموزش از ذکر توضیحات پیرامون نحوه ایجاد TextView جدید خودداری می نماییم). تنها نکته ای که پیرامون این TextView جدید وجود دارد این است که اندازه متن آن را می بایست برابر با 60dip قرار دهیم که تعداد ذکرهایی که می گوییم بزرگتر به نظر آید و همچنین id اختصاص داده شده به آن را می بایست به خاطر داشت باشیم چرا که در فایل جاوای خود قرار است که به این TextView لینک دهیم. راه کاری جایگزینی که برای اختصاص یک id به عناصر روی UI وجود دارد این است که روی TextView مد نظر کلیک راست کرده سپس همانطور که در تصویر زیر مشخص است روی گزینه Edit ID کلیک نماییم:

پس از کلیک کردن روی گزینه Edit ID با پنجره زیر مواجه خواهیم شد:

حال همانند id یی که برای TextView اول اختصاص دادیم، ابتدا عبارت txt را نوشته که یک عبارت قراردادی است و اصلا الزامی نیست که آن را نوشت بلکه هر توسعه دهنده برای خود یک روش نامگذاری را انتخاب می کند. سپس یک علامت _ قرار داده و عبارت textTwo به معنی "متن دوم" را می نویسیم (لازم به ذکر است که TextView اولی که ایجاد کردیم را به هیچ وجه در کد جاوای خود لینک نخواهیم داد اما از آنجا که عادت خوبی است که برای کلیه عناصر روی رابط گرافیکی یک id در نظر بگیریم اینکار را انجام دادیم). حال روی دکمه OK کلیک کرده و این id به TextView دوم ما اختصاص خواهد یافت. در ادامه تکمیل اپلیکیشن خود نیاز به یک دکمه داریم تا با هر بار گفتن یک ذکر یک بار با انگشت خود روی آن بزنیم تا یک عدد به تعداد ذکر های گفته شده اضافه کند. برای این منظور یک دکمه روی UI خود ایجاد می کنیم (برای آشنایی بیشتر با مبحث دکمه ها به آموزش های 37 و 38 و 39 مراجعه نمایید).

به منظور اینکه ببینیم چه کد 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:gravity="center_horizontal"
7. android:orientation="vertical" >
8. <TextView
9. android:id="@+id/txt_textOne"
10. android:layout_width="wrap_content"
11. android:layout_height="wrap_content"
12. android:text="تعداد ذکرهای من"
13. android:textAppearance="?android:attr/textAppearanceLarge"
14. android:textColor="#763f05"
15. android:textSize="40dip" />
16. <TextView
17. android:id="@+id/txt_textTwo"
18. android:layout_width="wrap_content"
19. android:layout_height="wrap_content"
20. android:text="0"
21. android:textAppearance="?android:attr/textAppearanceLarge"
22. android:textColor="#763f05"
23. android:textSize="60dip" />
24. <Button
25. android:id="@+id/button1"
26. android:layout_width="140dip"
27. android:layout_height="wrap_content"
28. android:background="#763f05"
29. android:text="+"
30. android:textColor="#fbfbdd"
31. android:textSize="100dip" />
32. </LinearLayout>

چنانچه به تگ ابتدایی مربوط به Button توجه کنیم می توانیم ببینیم که چه خصوصیاتی برای آن در نظر گرفته شده است. تنها بخشی از کد مربوط به این دکمه که نیاز به تغییر دارد id اختصاص یافته به آن است که ترجیح می دهیم برای آنکه گویا تر باشد آنرا را به btn_buttonOne تغییر دهیم. نکته ای که در مورد id ها همواره بایستی به خاطر داشته باشیم این است که هر نامی را می توان برای id ها در نظر گرفت اما به هیچ وجه در انتخاب نام آنها نمی توانیم از علائمی همچون & و* و غیره استفاده کنیم.

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

برای همین منظور پروژه My Prayer Counter را باز کرده و این بار فایل جاوای اپلیکیشن یا به عبارت دیگر همان Activity اپلیکیشن خود که MainActivity.java نام دارد را باز می کنیم (لازم به ذکر است که این فایل همانطور که در تصویر زیر مشخص است در فولدر src در زیرشاخه پکیجی که برای اپلیکیشن خود در نظر گرفتیم قرار دارد):

پس از باز کردن این فایل در محیط اکلیپس با کد زیر مواجه خواهیم شد:

1. package com.behzadmoradi.myprayercounter;
2.  
3. import android.app.Activity;
4. import android.os.Bundle;
5.  
6. public class MainActivity extends Activity {
7. /** Called when the activity is first created. */
8. @Override
9. public void onCreate(Bundle savedInstanceState) {
10. super.onCreate(savedInstanceState);
11. setContentView(R.layout.main);
12. }
13. }

به طور کلی می توان گفت که کد فوق به منزله حداقل کدی است که یک اپلیکیشن اندرویدی می تواند داشته باشد (به منظور آشنایی بیشتر با بخش های مختلف کد فوق می توانید به آموزش بیست و هفتم مراجعه نمایید). از آنجا که قرار است در این اپلیکیشن تعداد ذکرهای گفته شده شمرده شود پس معلوم است که ما با اعدادی از جنس عدد صحیح سر و کار داریم. همانطور که می دانیم یکی از متغیرهایی که مسئول ذخیره سازی اعدادی از جنس عدد صحیح است متغیر int می باشد (جهت آشنایی بیشتر با انواع متغیرها در زبان برنامه نویسی جاوا به آموزش پنجم از سری آموزش های جاوا در سایت نردبان مراجعه نمایید). حال نیاز است تا متغیری از جنس int در اپلیکیشن خود ایجاد کنیم که این وظیفه را دارا است تا تعداد ذکرها را در خود ذخیره سازد. نامی که برای این متغیر در نظر خواهیم گرفت counter به معنی "شمارنده" است. در پاسخ به این سوال که کجا بایستی این متغیر را تعریف کنیم بایستی گفت که این متغیر را در کلاس MainActivity تعریف کرده سپس داخل متد onCreate مقداری را برای آن در نظر خواهیم گرفت:

1. package com.behzadmoradi.myprayercounter;
2. import android.app.Activity;
3. import android.os.Bundle;
4. public class MainActivity extends Activity {
5. /** Called when the activity is first created. */
6. int counter;
7. @Override
8. public void onCreate(Bundle savedInstanceState) {
9. super.onCreate(savedInstanceState);
10. setContentView(R.layout.main);
11. counter = 0;
12.  
13. }
14. }

همانطور که در کد فوق مشخص است داخل متد onCreate مقدار صفر را برای متغیر counter در نظر گرفته ایم. از آنجا که در این اپلیکیشن از دکمه ها و TextView ها استفاده می کنیم پس نیاز است تا کلاس های Button و TextView را در اپلیکیشن خود فرا بخوانیم. ابتدا کلاس TextView را در وارد برنامه کرده و TextView یی که مسئول نمایش تعداد ذکرها بود و دارای id یی معادل با txt_textTwo بود را به آن لینک می دهیم:

اگر به تصویر فوق خوب دقت کنیم می بینیم که کد مربوط به TextView به پنج قسمت مجزا تقسیم شده است. بخش شماره یک مربوط به کلاسی تحت عنوان TextView در SDK اندروید است که توسط طراحان این سیستم عامل نوشته شده است. اگر به این TextView توجه کنیم می بینیم که دور آن نقطه چین قرار گرفته است و این بدان معنی است که این کلاس به اپلیکیشن ما Import نشده است. برای این رفع این مشکل نیاز است تا نشانگر موس خود را روی نقطه چین قرار داده و همانطور که در تصویر زیر مشخص است گزینه Import ‘TextView’ android.widget را انتخاب نماییم:

اکنون پس از کلیک روی این گزینه خواهیم دید که این کلاس وارد اپلیکیشن خواهد شد:

همانطور که در تصویر فوق مشخص است پس از Import کردن این کلاس نقطه چین هشدار دهنده از بین رفته و همچنین کلاس TextView به بخش import ها که در بالای کد قرار دارد اضافه می شود و از این پس به کلیه متدهای مرتبط با کلاس TextView دسترسی خواهیم داشت. همانطور که می دانیم کلاس هایی که در زبان جاوا مورد استفاده قرار می دهیم می بایست دارای نامی باشند. مثلا اگر در یک برنامه جاوا از کلاس String استفاده کنیم حتماً می بایست برای آن نامی در نظر بگیریم. در اینجا نامی که در نظر گرفته ایم و دلخواه هم هست tView است که مثلا حرف t را مخفف واژه Text در نظر گرفته ایم. به خاطر داشته باشیم که این نام با نامی که برای TextView خود در XML در نظر گرفتیم متفاوت است. در واقع در ادامه آموزش خواهیم دید که به چه شکل می توان TextView ایجاد شده در XML را به کلاس TextView در جاوا لینک داد. اکنون یک علامت مساوی قرار داده و کلاس TextView را داخل پرانتز مقابل علامت مساوی می نویسیم یا به عبارت دیگر آن را Cast می کنیم. مورد شماره سه مربوط به Cast است (برای آشنایی بیشتر با مفهوم Cast به سری آموزش های برنامه نویسی جاوا در سایت نردبان قسمت 34 و 35 مراجعه نمایید). اینکه چرا بایستی یک TextView را در اندروید Cast به خود آن TextView کرد مسئله ای است که کمی نیاز به توضیح دارد. به طور کلی هرچیزی از دکمه گرفته تا TextView یا هرچیزی دیگری در سیستم عامل اندروید نمونه ای از کلاس View محسوب می شوند. از اینرو همواره با Cast کردن مثلاً یک TextView به خود آن TextView به اندروید می فهمانیم که این این View یک Button یا Image نیست بلکه یک TextView است که در غیر اینصورت یعنی چنانچه عمل Cast کردن صورت نگیرد اندروید در تشخیص دادن مابین View های مختلف با مشکل مواجه خواهد شد. مورد چهارم مربوط به findViewById است. به خاطر داشته باشیم که در این مرحله از کدنویسی نیازی به نوشتن کل عبارت فوق نیست بلکه با نوشتن کلمه find و فشردن هم زمان دکمه های Ctrl و Space اکلیپس به صورت خوکار این عبارت را برای ما تکمیل خواهد کرد. همانطور که در قست بالا توضیح دادیم هر چیزی در اندروید یک View محسوب می شود. حال کاری که این خط از کد انجام می دهد این است که View یی که مد نظر ما است را از طریق id اختصاص داده شده به آن در XML پیدا می کند. گزینه شماره پنج نشانگر id اختصاص داده شده به TextView یی است که مسئول نمایش تعداد ذکرها می باشد (به منظور آشنایی بیشتر با R که داخل پرانتز نوشته شده است به آموزش نهم مراجعه نمایید). در پایان یک علامت ; قرار داده و در این قسمت لینک دادن id مرتبط با TextView قرار گرفته در فایل XML به کلاس TextView در فایل جاوا به پایان می رسد. علت آنکه در دو آموزش گذشته اصرار داشتیم تا id هایی را که اکلیپس به صورت خودکار برای TextView ها و Button ها در نظر می گرفت را تغییر دهیم اینجا مشخص خواهد شد. در واقع به منظور تکمیل کد داخل پرانتز می توان اول حرف R را نوشته سپس یک نقطه قرار داد سپس id را نوشته سپس یک نقطه قرار داد و اگر در این مرحله دکمه های Ctrl و Space را فشار دهیم با عکس زیر مواجه خواهیم شد:

همانگونه که مشخص است کلیه id هایی که با txt شروع می شوند دنبال یکدیگر قرار گرفته اند که در این صورت به راحتی خواهیم توانست به id مد نظر دست پیدا کنیم. به عبارت دیگر id ها بر اساس پیشوندی که دارند Sort یا مرتب شده اند. طبق روش فوق الذکر کلاس Button اندروید را نیز وارد اپلیکیشن کرده و نامی همچون btn برای آن در نظر گرفته، آن را Cast می کنیم به Button و در نهایت آن را به دکمه ای که در فایل XML ایجاد کرده بودیم که دارای id یی معادل با btn_buttonOne بود لینک می دهیم. در این مرحله کد ما می بایست به صورت زیر باشد:

1. package com.behzadmoradi.myprayercounter;
2. import android.app.Activity;
3. import android.os.Bundle;
4. import android.widget.Button;
5. import android.widget.TextView;
6. public class MainActivity extends Activity {
7. /** Called when the activity is first created. */
8. int counter;
9. @Override
10. public void onCreate(Bundle savedInstanceState) {
11. super.onCreate(savedInstanceState);
12. setContentView(R.layout.main);
13. counter = 0;
14. TextView tView = (TextView) findViewById(R.id.txt_textTwo);
15. Button btn = (Button)findViewById(R.id.btn_buttonOne);
16. }
17. }