В этом руководстве вы создадите свое первое приложение Xamarin.Android с помощью Visual Studio for Mac или Visual Studio и получите представление об основах разработки приложений для Android с помощью Xamarin. Попутно будут представлены инструменты, концепции и шаги, необходимые для создания и развертывания приложения Xamarin.Android.
В этой части описывается разработка приложения, которое преобразует буквенно-цифровой номер телефона (введенный пользователем) в цифровой номер телефона и отображает результат ввода пользователю. Окончательный вариант приложения должен выглядеть следующим образом:
Требования к ОС Windows
Для того, чтобы корректно выполнять все шаги в данном руководстве, вам потребуется следующее:
Windows 10.
Visual Studio 2019 или Visual Studio 2017 (версия 15.8 или более поздняя): Community, Professional или Enterprise.
В этом руководстве предполагается, что вы работаете с последней версией Xamarin.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 виджета TextView на пустую строку и установите его свойство 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), затем закройте файл.
Подключение пользовательского интерфейса
Следующим шагом будет добавление кода для подключения пользовательского интерфейса путем вставки кода подложки в класс 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.
Задайте имя приложения
После выполнения всех шагов у вас должно быть рабочее приложение, и теперь пришло время задать ему имя. Разверните папку values (внутри папки Resources) и откройте файл strings.xml. Измените строку имени приложения на Phone Word, как показано здесь:
