سلام , اندروید – شروع سریع

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

intro-app-examples-sml

 

خب شروع می کنیم!

نیازها

زامارین اندروید با هرکدام از برنامه های زیر کار می کند:

  •  آخرین ورژن زامارین استدیو روی او اس ده یوسمیت و بالاتر
  • آخرین ورژن زامارین استدیو روی ویندوز 7 و بالاتر
  • ویندوز 7 و بالاتر با ویژوال استدیو Professional 2012 یا بالاتر.

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

پیکربندی شبیه سازها

اگر از شبیه ساز اندروید SDK گوگل استفاده می کنید ,  توصیه می کنم که برای پیکربندی شبیه ساز از شتاب دهنده سخت افزاری استفاده کنید. دستورات راه اندازی شتاب دهنده ی سخت افزاری در صفحه آموزش افزایش سرعت شبیه ساز اندروید با HAXM توضیح داده شده است.

اگر از شبیه ساز اندروید ویژوال استدیو (Visual Studio Android Emulator) استفاده می کنید , باید Hyper-V روی کامپیوتر شما فعال شده باشد.

آموزش گام به گام

  1. ویژوال استدیو را باز کنید:
  2. 01-launchبرای ایجاد پروژه جدید بر روی Start > New Project کلیک کنید:

02-new-project3.در پنجره New Project , روی Visual C# > Android کلیک کرده و الگوی Blank App (Android) را انتخاب کنید. نام پروژه را Phoneword می گذاریم. روی OK کلیک کرده و پروژه را ایجاد می کنیم:

03-new-project-name

4.بعد از اینکه پروژه را ایجاد کردیم , پوشه Resources و سپس پوشه layout را در Solution Explorer باز کنید.بر روی Main.axml دابل کلیک کنید تا در محیط طراحی اندروید باز شود. این ظاهر خروجی صفحه ما است.

04-open-layout

5.دکمه Hello World, Click Me! که به طور پیش فرض در برنامه وجود دارد را انتخاب و کلید Delete را بزنید تا حذف شود. از قسمت سمت چپ و پنجره Toolbox , در قسمت جستجو متن text را وارد کنید و یک کنترل Text (Large) را به صفحه طراحی وارد کنید

 

05-large-text

6.با کنترل Text (Large) که روی صفحه اضافه کردیم , از پنجره Properties  و خصوصیت text این کنترل استفاده کنید و متن آن را به Enter a Phoneword: تغییر دهید:

06-enter-a-phoneword

7.خب در مرحله بعد , یک کنترل Plain Text را از منوی ابزارها به صفحه دیزاین اضافه کرده و آن را زیر کنترل Text (Large) قرار دهید.توجه داشته باشید که می توانیم از قسمت جستجو در بالای منوی ابزارها برای پیدا کردن کنترل ها استفاده کنیم:

07-plain-text8.با استفاده از کنترل Plain Text انتخاب شده در صفحه دیزاین , می توانیم از پنل Properties برای تغییر خصوصیت id کنترل Plain Text استفاده کنیم و آنرا به id/PhoneNumberText+@ تغییر دهیم . همچنین خصوصیت text آن را به XAMARIN-855-1 : تغییر دهید.

08-add-properties9.یک دکمه (Button) را از منو ابزار به صفحه دیزاین اضافه کنید و زیر کنترل Plain Text قرار دهید:

09-drag-button10.دکمه ای که اضافه کردید را انتخاب و خصوصیت id آن را به id/TranslateButton+@ و همچنین خصوصیت text آن را به Translate تغییر دهید:

10-translate-button

11.حالا دکمه دوم را ازپنجره ابزارها به صفحه دیزاین اضافه می کنیم و آن را زیر دکمه ی Translate قرار می دهیم:

11-drag-call-button

12.خصوصیت های زیر را در دکمه ی جدید به نحو زیر تغییر دهید:

Id=@+id/CallButton

Text=Call

12-call-properties

تا اینجای کار را با فشردن دکمه های CTRL+S ذخیره کنید.

13.حالا کدهای لازم برای ترجمه شماره تلفن های حروف عددی به عددی را اضافه می کنیم. برای اضافه کردن یک فایل جدید به پروژه روی نام پروژه از قسمت Solution Explorer راست کلیک کرده و Add > New Item… را انتخاب می کنیم:

13-add-new-item

14.در پنجره ی Add New Item , گزینه Visual C# > Code را انتخاب و اسم فایل کد را PhoneTranslator.cs بگذارید.

14-add-class

15.این کار یک کلاس #C خالی جدید را برایمان ایجاد می کند . تمام کدهای نمونه داخل این فایل را پاک کرده و قطعه کد زیر را جایگزین نمایید:

 

با فشردن کلیدهای CTRL+S تغییرات ایجاد شده در فایل PhoneTranslator.cs را ذخیره کنید. با rebuild کردن پروژه مطمئن شوید که هیچ خطای زمان کامپایل وجود ندارد.

16.در مرحله ی بعد قصد داریم رابط کاربری را به قسمت کد متصل کنیم . کدهای برای انجام این کار را در کلاس MainActivity اضافه می کنیم. روی MainActivity.cs دابل کلیک کنید تا باز شود:

16-mainactivity

17.با اتصال دکمه ی Translate شروع می کنیم. در کلاس MainActivity متد OnCreate را پیدا کنید. ما کد دکمه را درون متد OnCreate زیر فراخوانی های OnCreate(bundle) و SetContentView (Resource.Layout.Main)اضافه می کنیم. کدهای مربوط به دکمه ی الگو را پاک کنید و متد OnCreate شبیه زیر خواهد بود:

18.بعد , ما باید یک رفرنس برای کنترل هایی که در فایل layout ایجاد کردیم داشته باشیم . کد زیر را درون متد OnCreate بعد از فراخوانی SetContentView اضافه کنید.

19.حالا کدهایی که به فشردن دکمه Translate توسط کاربر را پاسخ میدهند را اضافه می کنیم. بعد از خط هایی که در مرحله قبل اضافه کردیم , کد زیر را به متد OnCreate اضافه می کنیم:

 

20.در مرحله بعد کدهایی که به فشردن دکمه ی Call پاسخ می دهند را اضافه می کنیم. کد زیر را زیر کدهای دکمه یTranslate قرار می دهیم:

21.در نهایت به اپلیکیشنی که ایجاد کردیم اجازه برقراری تماس تلفنی را می دهیم. مجوزهای اپلیکیشن را در Android Manifest می توانیم ویرایش کنیم. برای باز کردن Android Manifest بر روی Properties زیر Phoneword در Solution Explorer دابل کلیک کرده  , سپس صفحه Android Manifest را انتخاب کنید:

21a-android-manifest

زیر Required Permissions , مجوز CALL_PHONE را فعال نمایید:

21b-call-phone

22.کل کارهایی که انجام دادیم را با انتخاب File > Save All ذخیره می کنیم و اپلیکیشن را با انتخاب Build > Rebuild Solution ایجاد می کنیم.اگر اپلیکیشن ما کامپایل شود , پیغام موفقیت را در گوشه پایین سمت چپ ویژوال استدیو دریافت می کنیم:

22-rebuild-all-succeeded

اگر ارورهایی وجود دارد , به مراحل قبل مراجعه کرده و تمامی خطاها را برطرف نمایید تا اپلیکیشن موفقیت آمیز ایجاد شود.اگر هنگام عملیات build  خطایی مانند : Resource does not exist in the current context را دریافت کردید , نام namespace در MainActivity.cs را بررسی کنید که با نام پروژه (Phoneword) یکی باشد , سپس به طور کامل پروژه را rebuild  کنید. اگر هنوز خطاهایی وجود دارد , بررسی کنید که حتما آخرین ورژن های  آپدیت های زامارین اندروید را نصب کرده اید.

23.حالا ما یک اپلیکیشن درحال کار داریم – حالا زمان آن است که جزئیات نهایی را برای کامل شدن پروژه انجام دهیم!

با ویرایش Label برای MainActivity شروع می کنیم.  Label چیزی است که اندروید در بالای صفحه به کاربران نشان می دهد تا بدانند در کدام قسمت اپلیکیشن هستند. در بالای کلاس label , MainActivity را به Phone Word تغییر دهید : مانند زیر:

24.در مرحله بعد , آیکن اپلیکیشن را ست می کنیم. ابتدا , مجموعه آیکن های زامارین را دانلود کنید. سپس , پوشه drawable را از زیر Resources باز کنید و png که وجود دارد را با راست کلیک کردن و انتخاب Delete حذف کنید:

24a-delete-icon

وقتی کادر پایین نمایش داده شد OK را کلیک کنید:

24b-icon-deleted-permanently

25.سپس , روی پوشه drawable راست کلیک کرده و Add > Existing Item…  را انتخاب کنید

25-add-existing-item

 

26.از کادر انتخاب نمایش داده شده , به مسیر آیکن های دانلود شده رفته و پوشه drawable را بازکنید. Icon.pngرا انتخاب کنید و Add را کلیک کنید:

26-select-icon

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

27a-source-icons

پوشه ها را انتخاب و به پوشه Resources در پنل Solution Explorer ویژوال استدیو بکشید:

27b-drag-icon-folders

28.آیکن را در Android Manifest با انتخاب drawable/Icon@ از منو Application Icon معین کنید:

28-specify-icon

 

29.در نهایت شما می توانید اپلیکیشنی را که نوشته اید را با اجرای آن در یک شبیه ساز تست کنید. در این مثال , یک دستگاه مجازی با نام Nexus 5 (KitKat) استفاده شده است , این دستگاه مجازی با استفاده از Android AVD Manager تنظیم شده است.با این حال , شما می توانید از یکی از دستگاه های از پیش تعریف شده در منو باز شو بالا استفاده کنید.

قبل از اینکه اپلیکیشن را به شبیه ساز بفرستید , حداقل ورژن اندروید را معین کنید تا روی دستگاه مجازی انتخاب شده تان اجرا شود. در ویژوال استدیو , صفحه Application  را از Properties باز کنید. زیر گزینه ی Minimum Android to target: سطح API را مطابق با سطح دستگاه مجازی که در حال استفاده هستید تنظیم کنید. در  این مثال , سطح API 19 انتخاب شده انتخاب شده است پس اپلیکیشن روی دستگاه مجازی Nexus 5 (KitKat) اجرا می شود.

29c-set-api-level

30.سپس , اپلیکیشن را از منو بازشو نوار ابزار به صورتی که نمایش داده شده است اجرا کنید:

29d-select-virtual-device

 

ویژوال استدیو فایل ها را قبل از نصب و اجرای برنامه در شبیه ساز کپی می کند.

31.اسکرین شات های پایین اپلیکیشن Phoneword را در حال اجرا بر روی شبیه ساز نمایش می دهد. کلیک روی دکمه Translate متن دکمه Call را عوض می کند , و کلیک روی دکمه Call باعث نمایش کادر نشان داده شده در سمت راست می شود:

30-phoneword-result

دانلود پروژه

دانلود آموزش به صورت PDF


بخش قبلی:

سلام , اندروید

بخش بعدی:

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

درباره نویسنده

مطالب مرتبط

نظر بدهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

یازده + نوزده =