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

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

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

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

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

همانطور که در تصویر فوق مشاهده می شود، به جای اینکار می توان با فشردن هم زمان کلید های Ctrl و حرف N اقدام به ایجاد یک پروژه جدید کرد. پس از اینکار پنجره ای به شکل زیر مشاهده خواهد شد:

همانطور که در پنجره فوق نشان داده شده است در بخش Name به معنی "نام" عبارت ic_launcher را وارد می کنیم(لازم به ذکر است که این نام کاملاً اختیاری است). در بخش Width و Height که به ترتیب "عرض" و "طول" معنی می دهند عدد 96 را وارد کرده و این در حالی است که واحد انتخابی هر دو آنها بایستی Pixel باشد. در بخش Background Contents به معنی "محتویات پس زمینه" از میان گزینه های موجود مورد Transparent به معنی "شفاف، واضح و یا خالی" را انتخاب می کنیم(علت انتخاب این گزینه این است که زمانیکه می خواهیم Padding برای آیکان خود در نظر بگیریم، نواحی حاوی Padding بدون رنگ و شفاف باشند).

همانطور که قبلا توضیح داده شد صفحه های نمایش به طور کلی دارای چهار Density یا "تراکم" مختلف هستند. حال سوالی که ممکن است در اینجا به ذهن خطور کند این است که چرا ما در ابتدا اقدام به ساخت آیکان برای صفحه نمایشی با تراکم بسیار بالا یا به عبارتی صفحه نمایش xhdpi کردیم. در پاسخ به این سوال بایستی گفت که با اینکار مراحل ساخت آیکان را برای خود کاهش خواهیم داد. فرض کنیم که در ابتدا آیکانی به ابعاد 36 در 36 برای صفحه نمایشی با تراکم پایین یا به عبارتی ldpi ایجاد می کنیم. حال اگر بخواهیم پس از تکمیل طراحی، ابعداد تصویر را به طور مثال به 48 در 48 برای mdpi افزایش دهیم، کیفیت آیکان ما تا حدودی کاهش پیدا خواهد کرد و این مسئله در مورد افزایش سایز آیکان به 96 در 96 به مراتب مشهود تر می باشد. اما عکس این قضیه صادق نیست. یعنی اگر در ابتدا آیکانی به ابعاد 96 در 96 پیکسل ایجاد کنیم سپس طرح اولیه را به ترتیب به ابعاد 72 در 72 سپس 48 در 48 و در نهایت به 36 در 36 پیکسل کاهش دهیم، می توانیم انتظار نتایج به مراتب مطلوب تری داشته باشیم.

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

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

همانطور که در آموزش پیش توضیح دادیم، برای آنکه آیکان اپلیکیشن ما در کنار دیگر آیکان ها خوب جلوه دهد نیاز داریم تا مقداری Padding برای آن در نظر بگیریم. برای این منظور از نوار ابزارها که در سمت چپ فتوشاپ قرار دارد Rectangle Tool یا "ابزار ترسیم مستطیل" را انتخاب می کنیم. پس از انتخاب این ابزار نشانگر موس خود را روی صفحه خالی ایجاد شده قرار داده و دو بار پشت سر هم کلیک می کنیم و سپس پنجره ای به صورت زیر را مشاهده خواهیم کرد:

در این پنجره می توانیم طول و عرض شکلی که می خواهیم ایجاد کنیم را تعریف کنیم. به طور مثال در این آموزش عدد 4 پیکسل را برای هم طول و هم عرض شکل خود در نظر می گیریم. پس زدن گزینه OK تصویر زیر را مشاهده خواهیم کرد:

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

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

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

از آنجا که دیگر به مربع قرمز رنگ در طراحی خود نیازی نداریم، به صورت زیر آن را از تصویر خود حذف می کنیم:

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

می بینیم که شکل حذف شده و فقط Guide های شبرنگ روی صفحه باقی مانده اند. به طور خلاصه می توان گفت که در خروجی گرفتن از فتوشاپ با هر فرمتی این Guide ها چاپ نخواهند شد و صرفاً جهت مشخص سازی نقاطی از تصویر می باشند.

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