آموزش Xamarin-Hello, Android: شروع سریع

آموزش Xamarin-Hello, Android: شروع سریع

معرفی Android با Xamarin

در این راهنمای دو بخش، شما اولین برنامه Xamarin.Android خود را با استفاده از ویژوال استودیو خواهید ساخت و درک مفاهیم توسعه برنامه Android را با Xamarin خواهید آموخت. در طول راه، ابزارها، مفاهیم و مراحل مورد نیاز برای ساخت و راه اندازی یک برنامه Xamarin.Android معرفی خواهد شد.

Hello, Android شروع سریع

در این مرحله، شما یک برنامه کاربردی ایجاد می کنید که یک شماره تلفن عددی-الفبایی(alphanumeric) را وارد می کنید (وارد شده توسط کاربر)و به یک شماره تلفن عددی تبدیل می شود و شماره تلفن عددی(numeric) را به کاربر نمایش می دهید. برنامه نهایی به شرح زیر است:

الزامات

برای پیگیری این مقاله به موارد زیر نیاز دارید:

• ویندوز 7 یا بالاتر.
• Visual Studio 2015 Professional یا بالاتر

در این مقاله فرض می شود که آخرین نسخه Xamarin.Android نصب شده و در حال اجرا بر روی پلت فرم شما است و آن را نتخاب کنید.
می توانید برای راهنمای نصب به مقالات دیگه ما که آموزش نصب Xamarin.Android را شامل می شود مراجعه کنید. قبل از اینکه شروع کنید، لطفا Xamarin App Icons & Launch Screens را دانلود و unzip کنید.

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

اگر از Google's Android SDK استفاده می کنید، توصیه می کنیم شبیه ساز را برای استفاده از hardware acceleration پیکربندی کنید.
اگر شما از Visual Studio Android Emulator استفاده می کنید، Hyper-V باید در کامپیوتر شما فعال باشد.

گام به گام

1. Visual Studio برای ایجاد یک پروژه جدید باز کرده و از مسیر File > New > Project یک پروژه ایجاد کنید.
2. در پنجره New Project قالب Blank App (Android) انتخاب کنید و نام پروژه را Phoneword بنویسید. روی OK کلیک کنید تا پروژه جدید ایجاد شود:
   
   
3. بعد از اینکه پروژه جدید ایجاد شد، پوشه Resources و سپس پوشه layout در Solution Explorer را گسترش دهید. برای باز کردن Android Designer بر روی Main.axml دوبار کلیک کنید. این فایل layout برای صفحه برنامه است:
   
   
4. از Toolbox (در سمت چپ صفحه) متن Text (Large) را وارد کنید و ویجت Text (Large) را بر روی صفحه طراحی بکشید(drag کنید).
   
   
5. با کنترل Text (Large) انتخاب شده در سطح طراحی، از پنجره Properties برای تغییر ویژگی متن ویجت Text (Large) ، متن (Enter a Phoneword) وارد کنید: همانطور که در اینجا نشان داده شده است:
   
   
6. یک ویجت Plain Text از Toolbox به صفحه طراحی Drag کنید و زیر ویجت Text (Large) قرار دهید:
   
   
7. با استفاده از ویجت Plain Text بر روی سطح طراحی، از پنجره Properties برای تغییر ویژگی id ویجت Plain Text به @ + id / PhoneNumberText استفاده کنید و خصوصیت text را به 1-855-XAMARIN تغییر دهید:
   
   
8. یک Button را از Toolbox به سطح طراحی بکشید و آن را زیر ویجت Plain Text قرار دهید:
   
   
9. با استفاده از ویجت Button بر روی سطح طراحی، از پنجره Properties برای تغییر ویژگی id ویجت Button به @+id/TranslateButton استفاده کنید و خصوصیت text را به Translate تغییر دهید:
   
   
10. TextView را از Toolbox به سطح طراحی بکشید و آن را زیر ویجت Button قرار دهید.با استفاده از ویجت TextViewبر روی سطح طراحی، از پنجره Properties برای تغییر ویژگی id ویجت TextViewبه @+id/TranslatedPhoneWord استفاده کنید و خصوصیت text را خالی کنید (empty string):
    
    
11. کار خود را با فشار دادن CTRL + S ذخیره کنید.
12. گام بعدی اضافه کردن تعدادی کد برای ترجمه شماره تلفن از الفبایی به عددی است. اضافه کردن یک فایل جدید به پروژه با راست کلیک کردن بر روی پروژه Phoneword در Solution Explorer و انتخاب Add> New Item ... همانطور که در زیر نشان داده شده است:
    
    
13. در پنجره Add New Item از سمت چپ Visual C# > Code را انتخاب کرده و قالب code file را انتخاب کنید و به عنوان نام PhoneTranslator.cs بنویسید.
    
    
14. یک کلاس خالی 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;
            }
        }
    }
    

    
    فایل PhoneTranslator.cs را با کلیک کردن بر روی File> Save (یا با فشار دادن CTRL + S) ذخیره کنید، سپس فایل را ببندید.
15. گام بعدی اضافه کردن کد برای اتصال رابط کاربر با قرار دادن کد پشتیبان در کلاس MainActivity است. با اتصال دکمه Translateشروع کنید. در کلاس MainActivity، متد OnCreate را پیدا کنید. گام بعدی اضافه کردن کد دکمه در OnCreate است.در زیر base.OnCreate(bundle) و SetContentView (Resource.Layout.Main) فراخوانی کنید. ابتدا کد الگو را اصلاح کنید تا متد OnCreate شبیه به موارد زیر باشد:

    using System;
    using Android.App;
    using Android.Content;
    using Android.Widget;
    using Android.OS;
    namespace Phoneword
    {
        [Activity (Label = "Phone Word", 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);
                // New code will go here
            }
        }
    }
    

16. مرجع کنترل هایی که در فایل layout از طریق Android Designer ایجاد شده است را دریافت کنید.پس از فراخوانی SetContentView، کد زیر را داخل روش OnCreate اضافه کنید:

    // Get our UI controls from the loaded layout
    EditText phoneNumberText = FindViewById< EditText >(Resource.Id.PhoneNumberText);
    TextView translatedPhoneWord = FindViewById< TextView >(Resource.Id.TranslatedPhoneWord);
    Button translateButton = FindViewById< Button >(Resource.Id.TranslateButton);
    

17. اضافه کردن کد برای واکنش نشان دادن (responds)به فشار دادن دکمه Translate توسط کاربر. کد زیر را به متد OnCreate اضافه کنید (بعد از خطوط اضافه شده در مرحله قبل):

    // Add code to translate number
    translateButton.Click += (sender, e) =>
    {
        // Translate user’s alphanumeric phone number to numeric
        string translatedNumber = Core.PhonewordTranslator.ToNumber(phoneNumberText.Text);
        if (string.IsNullOrWhiteSpace(translatedNumber))
        {
            translatedPhoneWord.Text = string.Empty;
        }
        else
        {
            translatedPhoneWord.Text = translatedNumber;
        }
    };
    

18. کار خود را با انتخاب File> Save All (یا با فشار دادن CTRL-SHIFT-S) ذخیره کنید و پروژه را با انتخاب Build > Rebuild Solution یا دکمه های (CTRL-SHIFT-B) Build کنید.
    اگر خطایی وجود دارد، از طریق مراحل قبلی بروید و هر گونه اشتباه را تصحیح کنید تا برنامه موفقیت آمیز باشد.اگر خطای Build مانند(Resource does not exist in the current context) بود اطمینان حاصل کنید که نام namespace در MainActivity.cs با نام پروژه (Phoneword) سازگار است و سپس solution کامل را rebuild کنید. اگر هنوز هم خطاهای Build دارید، مطمئن شوید که آخرین نسخه های Xamarin.Android را نصب کرده اید.
19. اکنون شما باید یک برنامه کاری داشته باشید - وقت آن است که لمس های(touches) انتهایی را اضافه کنید! در MainActivity.cs، Label برای MainActivity را ویرایش کنید. Label آنچه آندروید در بالای صفحه نمایش می دهد نشان میدهد تا کاربران بتوانند بدانند در کجای برنامه قرار دارند. در بالای کلاس MainActivity ، Label را به Phone Word تغییر دهید همان طور که در زیر نشان داده شده است:

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

20. حالا وقت آن است که icon برنامه را تنظیم کنید. به طور پیش فرض ویژوال استودیو آیکون پیش فرض برای پروژه را فراهم می کند. بیایید این فایل ها را از solution حذف کنیم و آنها را با یک آیکون متفاوت جایگزین کنیم. پوشه Resources را در Solution Pad گسترش دهید. توجه داشته باشید که پنج پوشه وجود دارد که با mipmap-prefix قرار دارند و هر یک از این پوشه ها دارای یک فایل Icon.png است:
    
    لازم است هر یک از این فایل های آیکون را از پروژه حذف کنید. بر روی هر کدام از فایلهای Icon.png کلیک راست کرده و Delete را از منوی زمینه حذف کنید:
    
    در پنجره روی دکمه حذف کلیک کنید.
21. حالا فایل Xamarin App Icons set دانلود و unzip کنید. این فایل زیپ آیکون های برنامه را نگه می دارد. هر آیکون از لحاظ بصری یکسان است، اما در قطعنامه های مختلف آن را به طور صحیح در دستگاه های مختلف با تراکم صفحه نمایش مختلف ارائه شده است. مجموعه فایل ها باید در پروژه Xamarin.Android کپی شوند. در ویژوال استودیو، در Solution Explorer، بر روی پوشه mipmap-hdpi راست کلیک کرده و Add > Existing Items انتخاب کنید:
    
    
22. از کادر گفتگوی انتخاب شده، به پوشه آیکن Xamarin AdApp Unzipped بروید و پوشه mipmap-hdpi را باز کنید. Icon.png را انتخاب کنید و روی Add کلیک کنید.
23. این مراحل برای هر یک از پوشه های mipmap را تکرار کنید تا محتویات پوشه های آیکون برنامه Mipmap- Xamarin به پوشه های mipmap-counterpart در پروژه Phoneword کپی شوند.
24. پس از اینکه تمام آیکون ها به پروژه Xamarin.Android کپی می شوند، با کلیک راست بر روی پروژه در Solution Pad، گزینه ی Project Options را باز کنید. Build > Android Application را انتخاب کنید و گزینه @mipmap/icon از جعبه Application icon انتخاب کنید.
    
    
25. در نهایت، با اجرای آن بر روی یک دستگاه Android یا شبیه ساز و ترجمه یک Phoneword، برنامه را آزمایش کنید:
    
    

برای مطالعه سرفصل دوره جامع برنامه نویسی موبایل Android کلیک نمایید .