Часть 1. Быстрый старт на Xamarin.Forms

👁 133 просмотров
1 Звезда2 Звезды3 Звезды4 Звезды5 Звезд (Пока оценок нет)
Загрузка...

Первая часть будет демонстрировать, как создать приложение, которое будет преобразовать буквенно-цифровой номер, введенный пользователем в числовой номер телефона и затем вызывать этот номер.

Пример итогового приложения
Пример итогового приложения

 

И так, условимся, что мы начинаем новый проект в  Visual Studio с Xamarin.Forms под названием Phoneword:

1). Сначала запускаем Visual Studio. На картинке начальное окно программы:

Начальное окно программы Visual Studio
Начальное окно программы Visual Studio

 

2). В Visual Studio нажимаем на кнопку Create new project… :

Нажимаем на кнопку создания нового проекта
Нажимаем на кнопку создания нового проекта

 

3). В диалоге New Project, жмем Cross-Platform, выбираем шаблон Mobile App (Xamarin.Forms), задаем имя Phoneword, выбираем расположение проекта и жмем кнопку OK:

Диалог создания проекта
Диалог создания проекта

 

4). В диалоге New Cross Platform App, нажимаем Blank App, выбираем .NET Standard как Code Sharing Strategy, и жмем кнопку OK:

Диалог выбора платформ и стратегии развития проекта
Диалог выбора платформ и стратегии развития проекта

 

5). В разделе Solution Explorer, проекта Phoneword, делаем двойной щелчок на MainPage.xaml для открытия этого файла в редакторе:

Открытый файл MainPage.xaml в редакторе
Открытый файл MainPage.xaml в редакторе

 

6). В MainPage.xaml, удаляем весь код шаблона и заменяем кодом, который ниже. Этот код декларативно определяет интерфейс пользователя для страницы:

<?xml version="1.0" encoding="UTF-8"?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
                   xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                   x:Class="Phoneword.MainPage">
    <ContentPage.Padding>
        <OnPlatform x:TypeArguments="Thickness">
            <On Platform="iOS" Value="20, 40, 20, 20" />
            <On Platform="Android, UWP" Value="20" />
        </OnPlatform>
    </ContentPage.Padding>
    <StackLayout>
      <Label Text="Enter a Phoneword:" />
      <Entry x:Name="phoneNumberText" Text="1-855-XAMARIN" />
      <Button Text="Translate" Clicked="OnTranslate" />
      <Button x:Name="callButton" Text="Call" IsEnabled="false" Clicked="OnCall" />
    </StackLayout>
</ContentPage>

Сохраняем изменения в MainPage.xaml , нажав комбинацию CTRL+S, и закрываем файл.

7). В разделе Solution Explorer, распускаем MainPage.xaml и двойным щелчком открываем файл кода страницы MainPage.xaml.cs:

Файл кода страницы MainPage.xaml.cs
Файл кода страницы MainPage.xaml.cs

 

8). В коде MainPage.xaml.cs, удаляем весь код шаблона и заменяем его на следующий код. Методы OnTranslate и OnCall должны быть выполнены в ответ на нажатие кнопок Translate и Call со стороны пользовательского интерфейса соответственно:

using System;
using Xamarin.Forms;

namespace Phoneword
{
    public partial class MainPage : ContentPage
    {
        string translatedNumber;

        public MainPage ()
        {
            InitializeComponent ();
        }

        void OnTranslate (object sender, EventArgs e)
        {
            translatedNumber = PhonewordTranslator.ToNumber (phoneNumberText.Text);
            if (!string.IsNullOrWhiteSpace (translatedNumber)) {
                callButton.IsEnabled = true;
                callButton.Text = "Call " + translatedNumber;
            } else {
                callButton.IsEnabled = false;
                callButton.Text = "Call";
            }
        }

        async void OnCall (object sender, EventArgs e)
        {
            if (await this.DisplayAlert (
                    "Dial a Number",
                    "Would you like to call " + translatedNumber + "?",
                    "Yes",
                    "No")) {
                var dialer = DependencyService.Get<IDialer> ();
                if (dialer != null)
                    dialer.Dial (translatedNumber);
            }
        }
    }
}

 

Замечание. Теперь можно попробовать построить приложение и мы увидим сообщения об ошибках, которые мы исправим далее.

Сохраняем изменения в файле MainPage.xaml.cs нажатием комбинации CTRL+S, закрываем файл.

9). В Solution Explorer, кликаем правую кнопку мыши на проект Phoneword и выбираем Add > New Item…:

Добавляем новый элемент в проект
Добавляем новый элемент в проект

10). В диалоге Add New Item выбираем Visual C# > Code > Class, вводим название PhoneTranslator, и жмем кнопку Add:

Диалог добавления нового класса
Диалог добавления нового класса

 

11). В файле PhoneTranslator.cs, удаляем весь шаблон кода и заменяем на ниже указанный. Этот код транслирует буквы в телефонный номер:

using System.Text;

namespace Phoneword
{
    public static class PhonewordTranslator
    {
        public static string ToNumber(string raw)
        {
            if (string.IsNullOrWhiteSpace(raw))
                return null;

            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);
                    // Bad character?
                    else
                        return null;
                }
            }
            return newNumber.ToString();
        }

        static bool Contains(this string keyString, char c)
        {
            return keyString.IndexOf(c) >= 0;
        }

        static readonly string[] digits = {
            "ABC", "DEF", "GHI", "JKL", "MNO", "PQRS", "TUV", "WXYZ"
        };

        static int? TranslateToNumber(char c)
        {
            for (int i = 0; i < digits.Length; i++)
            {
                if (digits[i].Contains(c))
                    return 2 + i;
            }
            return null;
        }
    }
}

Сохраняем файл PhoneTranslator.cs , нажатием CTRL+S, и закрываем файл.

12). В Solution Explorer, жмем правой кнопкой мыши на проект Phoneword и выбираем Add > New Item…:

Добавляем новый элемент в проект
Добавляем новый элемент в проект

 

13). В меню Add New Item открываем диалог добавления, выбираем Visual C# > Code > Interface, вводим имя интерфейса IDialer, жмем кнопку Add:

Добавление нового интерфейса
Добавление нового интерфейса

 

14). В файле IDialer.cs, удаляем шаблон кода по умолчанию и заменяем его кодом, указанным ниже. В этом коде определен метод Dial , который должен быть реализована каждой платформе для набора переведенного номера телефона:

namespace Phoneword
{
    public interface IDialer
    {
        bool Dial(string number);
    }
}

Сохраняем изменения IDialer.cs нажатием CTRL+S, закрываем файл.

Замечание. Общий код для приложения сейчас закончен. На уровне определенной платформы код набора номера теперь будет реализован как DependencyService.

15). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.iOS и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.iOS
Добавляем элемент к проекту Phoneword.iOS

16). В разделе диалога Add New Item, выбираемApple > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту iOS
Добавляем новый класс к проекту iOS

 

17). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой iOS для набора транслированного телефонного номера:

using Foundation;
using Phoneword.iOS;
using UIKit;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.iOS
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            return UIApplication.SharedApplication.OpenUrl (
                new NSUrl ("tel:" + number));
        }
    }
}

Сохраняем файл PhoneDialer.cs , нажатием CTRL+S, и закрываем файл.

18). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.Android и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.Android
Добавляем элемент к проекту Phoneword.Android

19). В разделе диалога Add New Item, выбираем Android > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту Android
Добавляем новый класс к проекту Android

 

20). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой Android для набора транслированного телефонного номера:

using Android.Content;
using Android.Telephony;
using Phoneword.Droid;
using System.Linq;
using Xamarin.Forms;
using Uri = Android.Net.Uri;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.Droid
{
    public class PhoneDialer : IDialer
    {
        public bool Dial(string number)
        {
            var context = MainActivity.Instance;
            if (context == null)
                return false;

            var intent = new Intent (Intent.ActionDial);
            intent.SetData (Uri.Parse ("tel:" + number));

            if (IsIntentAvailable (context, intent)) {
                context.StartActivity (intent);
                return true;
            }

            return false;
        }

        public static bool IsIntentAvailable(Context context, Intent intent)
        {
            var packageManager = context.PackageManager;

            var list = packageManager.QueryIntentServices (intent, 0)
                .Union (packageManager.QueryIntentActivities (intent, 0));

            if (list.Any ())
                return true;

            var manager = TelephonyManager.FromContext (context);
            return manager.PhoneType != PhoneType.None;
        }
    }
}

Сохраняем файл PhoneDialer.cs , нажатием CTRL+S, и закрываем файл.

Замечание. Обратите внимание, что этот код предполагает, что вы используете новейший Android API.

21). Во вкладке Solution Explorer, в проекте Phoneword.Android, двумя щелчками открываем файл MainActivity.cs , удаляем весь шаблон кода и заменяем на следующий код:

using Android.App;
using Android.Content.PM;
using Android.OS;

namespace Phoneword.Droid
{
    [Activity(Label = "Phoneword", Icon = "@mipmap/icon", Theme = "@style/MainTheme", MainLauncher = true,
              ConfigurationChanges = ConfigChanges.ScreenSize | ConfigChanges.Orientation)]
    public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        internal static MainActivity Instance { get; private set; }

        protected override void OnCreate(Bundle bundle)
        {
            TabLayoutResource = Resource.Layout.Tabbar;
            ToolbarResource = Resource.Layout.Toolbar;

            base.OnCreate(bundle);
            Instance = this;
            global::Xamarin.Forms.Forms.Init(this, bundle);
            LoadApplication(new App());
        }
    }
}

Сохраняем файл MainActivity.cs , нажатием CTRL+S, и закрываем файл.

23). В секции Required permissions , разрешаем телефону выполнять звонок CALL_PHONE:

Разрешаем телефону звонить
Разрешаем телефону звонить

Сохраняем файл манифеста, нажатием CTRL+S, и закрываем файл.

24). На вкладке Solution Explorer, жмем правую кнопку на проекте Phoneword.UWP и выбираем Add > New Item…:

Добавляем элемент к проекту Phoneword.UWP
Добавляем элемент к проекту Phoneword.UWP

25). В разделе диалога Add New Item, выбираем Visual C# > Code > Class, вводим имя PhoneDialer, и жмем на кнопку Add:

Добавляем новый класс к проекту UWP
Добавляем новый класс к проекту UWP

 

26). В файле PhoneDialer.cs, удаляем весь шаблон кода и заменяем его на ниже приведенный. Этот код содержит метод Dial который должен быть использован платформой Universal Windows Platform для набора транслированного телефонного номера:

using Phoneword.UWP;
using System;
using System.Threading.Tasks;
using Windows.ApplicationModel.Calls;
using Windows.UI.Popups;
using Xamarin.Forms;

[assembly: Dependency(typeof(PhoneDialer))]
namespace Phoneword.UWP
{
    public class PhoneDialer : IDialer
    {
        bool dialled = false;

        public bool Dial(string number)
        {
            DialNumber(number);
            return dialled;
        }

        async Task DialNumber(string number)
        {
            var phoneLine = await GetDefaultPhoneLineAsync();
            if (phoneLine != null)
            {
                phoneLine.Dial(number, number);
                dialled = true;
            }
            else
            {
                var dialog = new MessageDialog("No line found to place the call");
                await dialog.ShowAsync();
                dialled = false;
            }
        }

        async Task<PhoneLine> GetDefaultPhoneLineAsync()
        {
            var phoneCallStore = await PhoneCallManager.RequestStoreAsync();
            var lineId = await phoneCallStore.GetDefaultLineAsync();
            return await PhoneLine.FromIdAsync(lineId);
        }
    }
}

Сохраняем файл PphoneDialer.cs , нажатием CTRL+S, и закрываем файл.

27). На вкладке Solution Explorer, на проекте Phoneword.UWP , жмем правую кнопку на References, aи выбираем Add Reference…:

Добавляем новую ссылку к проекту UWP
Добавляем новую ссылку к проекту UWP

28). В диалоге Reference Manager , выбираем Universal Windows > Extensions > Windows Mobile Extensions for UWP, и жмем на кнопку OK:

Диалог менеджера ссылок
Диалог менеджера ссылок

Замечание. В v10.0.16299.0 Windows Mobile Extensions для UWP должен быть выбран класс PhoneLine .

29). Во вкладке Solution Explorer, в проекте Phoneword.UWP, делаем двойной щелчок и открываем файл Package.appxmanifest:

Настройка файла Package.appxmanifest
Настройка файла Package.appxmanifest

30). На странице Capabilities , разрешаем возможность звонить Phone Call:

Страница разрешений для UWP
Страница разрешений для UWP

Сохраняем изменения в файле нажатием CTRL+S, и закрываем файл.

31. В Visual Studio, выбираем пункт в меню Build > Build Solution (или нажимаем CTRL+SHIFT+B). Приложение будет построено и во вкладке статус бара Visual Studio должно появиться сообщение об удачном построении:

Сообщение об удачном построении
Сообщение об удачном построении

 

Если имеются сообщения об ошибках, то нужно повторить начальные шаги и исправить ошибки до тех пор, пока не будет удачное построение.

32). Во вкладке  Solution Explorer, кликаем правую кнопку на проекте Phoneword.UWP и выбираем Set as StartUp Project:

Устанавливаем проект по умолчанию
Устанавливаем проект по умолчанию

33). В панели инструментов Visual Studio, жмем кнопку Start (треугольная кнопка, которая имитирует кнопку проигрывания) для запуска приложения:

Запущенное приложение UWP
Запущенное приложение UWP

 

34). Во вкладке Solution Explorer, жмем правой кнопкой на проект Phoneword.Android выбираем пункт Set as StartUp Project.

35). На панели инструментов Visual Studio, жмем на кнопку Start  (треугольная кнопка, которая имитирует кнопку проигрывания) для запуска приложения Android в эмуляторе:

36). Если у вас есть устройство iOS и соответствуют требованиям Mac для разработки Xamarin.Forms, используйте аналогичный метод для развертывания приложения на устройстве iOS. Кроме того, развертываем приложение для удаленного симулятора iOS.