В этом руководстве вы узнаете, с чего начинается разработка мобильных приложений на Андроид с помощью Visual Studio for Mac или Visual Studio и получите представление об основах работы с Xamarin. Попутно будут представлены инструменты, концепции и этапы, необходимые для создания и развертывания приложения Xamarin.Android.
В этой части описывается разработка приложения, которое преобразует буквенно-цифровой номер телефона (введенный пользователем) в цифровой номер телефона и отображает результат ввода пользователю. Окончательный вариант должен выглядеть следующим образом:
Требования к ОС Windows
Для того, чтобы корректно выполнять все шаги в данном руководстве, вам потребуется следующее:
Windows 10.
Visual Studio 2019 или Visual Studio 2017 (версия 15.8 или более поздняя): Community, Professional или Enterprise.
В этой инструкции предполагается, что вы работаете с последней версией Xamarin.Android.
Настройка эмуляторов
Разработка Android приложений для мобильных устройств, скорее всего, потребует использование эмулятора Android. В этом случае мы рекомендуем настроить его на применение аппаратного ускорения. Инструкции по настройке аппаратного ускорения доступны в разделе Аппаратное ускорение для повышения производительности эмулятора.
Разработка мобильных приложений для Android: создание проекта
Запустите Visual Studio. Нажмите File > New > Project, чтобы создать новый проект.
В диалоговом окне New Project выберите шаблон Android App. Назовите его Phoneword и нажмите OK:
В диалоговом окне New Android App выберите Blank App и нажмите OK, чтобы создать новый проект:
Создание макета
Совет.Новые версии Visual Studio поддерживают открытие файлов .xml в Android Designer.В Android Designer поддерживаются как .axml, так и .xml.
После создания нового проекта разверните папку Resources, а затем папку layout в Solution Explorer. Дважды щелкните файл activity_main.axml, чтобы открыть его в Android Designer. Это файл макета экрана приложения:
Совет. 1. Новые выпуски Visual Studio содержат немного другой шаблон приложения. 2. Вместо activity_main.axml, макет находится в content_main.axml.
Макет по умолчанию будет RelativeLayout. Чтобы остальные шаги на этой странице сработали, необходимо изменить тег на и добавить другой атрибут android:orientation="vertical" к открывающему тегу LinearLayout.
На панели инструментов (область слева) введите текст в поле поиска и перетащите виджет Text (Large) на область конструктора (в центре):
Когда элемент управления Текст (крупный) выбран в области конструктора, используйте панель свойств, чтобы изменить свойство Текст (Крупный) на Enter a Phoneword::
Перетащите виджет «Обычный текст» из панели инструментов область конструктора и поместите его под виджетом «Текст (крупный)». Элемент не будет размещен, пока вы не переместите указатель мыши в то место макета, которое может принять его. На приведенных ниже скриншотах виджет не может быть размещен (как показано слева), пока указатель мыши не будет перемещен чуть ниже предыдущего TextView (как показано справа):
Когда Обычный текст (EditText) размещен правильно, он будет выглядеть так, как показано на следующем скриншоте:
Когда виджет Plain Text выбран в области конструктора, используйте панель Properties, чтобы изменить свойство Id Plain Text на @+id/PhoneNumberText, а Text на 1-855-XAMARIN:
Перетащите кнопку из панели инструментов в рабочую область конструктора и поместите ее под виджетом «Обычный текст»:
Выбрав кнопку в области конструктора, используйте панель свойств, чтобы изменить ее свойство Text на Translate, а свойство Id на @+id/TranslateButton:
Переместите элемент TextView из панели инструментов в область конструктора и поместите его под виджетом Button. Измените свойство Text на пустую строку и установите его свойство Id на @+id/TranslatedPhoneword:
Сохраните свою работу, нажав CTRL+S.
Создание кода
Следующим шагом при разработке мобильного приложения на андроид будет добавление кода для перевода телефонных номеров из буквенно-цифровых в цифровые. Добавьте новый файл в проект, щелкнув правой кнопкой мыши Phoneword в панели Solution Explorer и выбрав Add > New Item..., как показано ниже:
В диалоге Add New Item выберите Visual C# > Code > Code File и назовите новый файл кода PhoneTranslator.cs:
Это создаст новый пустой класс 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, нажав Файл > Сохранить (или нажав CTRL+S), затем закройте файл.
Разработка мобильного приложения под Android: подключение пользовательского интерфейса
Следующий шаг включает в себя вставку кода подложки в класс MainActivity. Начните с подключения кнопки Translate. В классе MainActivity найдите метод OnCreate. Новым этапом будет добавление кода кнопки внутри OnCreate, ниже вызовов base.OnCreate(savedInstanceState) и SetContentView(Resource.Layout.activity_main). Сначала измените код шаблона так, чтобы метод OnCreate выглядел следующим образом:
using Android.App;
using Android.OS;
using Android.Support.V7.App;
using Android.Runtime;
using Android.Widget;
namespace Phoneword
{
[Activity(Label = "@string/app_name", Theme = "@style/AppTheme", MainLauncher = true)]
public class MainActivity : AppCompatActivity
{
protected override void OnCreate(Bundle savedInstanceState)
{
base.OnCreate(savedInstanceState);
// Set our view from the "main" layout resource
SetContentView(Resource.Layout.activity_main);
// New code will go here
}
}
}
Получите ссылку на элементы управления, которые были созданы в файле макета с помощью Android Designer. Добавьте следующий код внутри метода OnCreate, после вызова SetContentView:
// Get our UI controls from the loaded layout
EditText phoneNumberText = FindViewById(Resource.Id.PhoneNumberText);
TextView translatedPhoneWord = FindViewById(Resource.Id.TranslatedPhoneword);
Button translateButton = FindViewById(Resource.Id.TranslateButton);
Добавьте код, реагирующий на нажатие пользователем кнопки «Перевести». Добавьте следующий код в метод 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;
}
};
Сохраните свою работу, выбрав File > Save All (или нажав CTRL-SHIFT-S), и соберите приложение, выбрав Build > Rebuild Solution (или нажав CTRL-SHIFT-B).
Если возникли ошибки, проверьте предыдущие шаги и исправьте все ошибки, пока приложение не соберется успешно. Если отображается ошибка сборки, например, Resource does not exist in the current context (Ресурс не существует в данном контексте), проверьте, что имя пространства имен в MainActivity.cs соответствует имени проекта (Phoneword), а затем полностью перестройте решение. Если вы по-прежнему получаете ошибки сборки, проверьте, что вы установили последние обновления Visual Studio.
Задайте имя приложения
После выполнения всех шагов у вас должно быть рабочее мобильное Android приложение, и теперь пришло время задать ему имя. Разверните папку values (внутри папки Resources) и откройте файл strings.xml. Измените строку имени на Phone Word, как показано здесь:
Финальным этапом разработки мобильных приложений для Andorid является его запуск. Тестирование можно провести на устройстве Android или эмуляторе. Нажмите кнопку TRANSLATE, чтобы перевести 1-855-XAMARIN в номер телефона:
