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

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

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

نیازها

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Id=@+id/CallButton

Text=Call

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

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

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

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

using System.Text;

using System;

namespace Core

{

public static class PhonewordTranslator

{

public static string ToNumber(string raw)

{

if (string.IsNullOrWhiteSpace(raw))

return "";

else

raw = raw.ToUpperInvariant();

var newNumber = new StringBuilder();

foreach (var c in raw)

{

if (" -0123456789".Contains(c))

newNumber.Append(c);

else {

var result = TranslateToNumber(c);

if (result != null)

newNumber.Append(result);

}

// otherwise we've skipped a non-numeric char

}

return newNumber.ToString();

}

static bool Contains (this string keyString, char c)

{

return keyString.IndexOf(c) >= 0;

}

static int? TranslateToNumber(char c)

{

if ("ABC".Contains(c))

return 2;

else if ("DEF".Contains(c))

return 3;

else if ("GHI".Contains(c))

return 4;

else if ("JKL".Contains(c))

return 5;

else if ("MNO".Contains(c))

return 6;

else if ("PQRS".Contains(c))

return 7;

else if ("TUV".Contains(c))

return 8;

else if ("WXYZ".Contains(c))

return 9;

return null;

}

}

}

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

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

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

using System;
using Android.App;
using Android.Content;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Android.OS;

namespace Phoneword
{
[Activity (Label = "Phoneword", MainLauncher = true)]
public class MainActivity : Activity
{
protected override void OnCreate (Bundle bundle)
{
base.OnCreate (bundle);

// Set our view from the "main" layout resource
SetContentView (Resource.Layout.Main);

// Our code will go here
}
}
}

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

// Get our UI controls from the loaded layout:

EditText phoneNumberText = FindViewById<EditText>(Resource.Id.PhoneNumberText);

Button translateButton = FindViewById<Button>(Resource.Id.TranslateButton);

Button callButton = FindViewById<Button>(Resource.Id.CallButton);

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

// Disable the "Call" button

callButton.Enabled = false;


// Add code to translate number

string translatedNumber = string.Empty;


translateButton.Click += (object sender, EventArgs e) =>

{

    // Translate user's alphanumeric phone number to numeric

    translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);

    if (String.IsNullOrWhiteSpace(translatedNumber))

    {

        callButton.Text = "Call";

        callButton.Enabled = false;

    }

    else

    {

        callButton.Text = "Call " + translatedNumber;

        callButton.Enabled = true;

    }

};

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

callButton.Click += (object sender, EventArgs e) =>
{
    // On "Call" button click, try to dial phone number.
    var callDialog = new AlertDialog.Builder(this);
    callDialog.SetMessage("Call " + translatedNumber + "?");
    callDialog.SetNeutralButton("Call", delegate {
           // Create intent to dial phone
           var callIntent = new Intent(Intent.ActionCall);
           callIntent.SetData(Android.Net.Uri.Parse("tel:" + translatedNumber));
           StartActivity(callIntent);
       });
    callDialog.SetNegativeButton("Cancel", delegate { });

    // Show the alert dialog to the user and wait for response.
    callDialog.Show();
};

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

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

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

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

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

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

namespace Phoneword
{
    [Activity (Label = "Phone Word", MainLauncher = true)]
    public class MainActivity : Activity
    {
        ...
    }
}

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

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

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

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

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

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

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

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

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

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

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

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

دانلود پروژه

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

بخش قبلی:

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

بخش بعدی:

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