Подключение пользовательского интерфейса
Лабораторная работа № 1
Знакомство с Android
Вы создадите приложение, которое преобразовывает введенный пользователем буквенно-цифровой телефонный номер в числовой телефонный номер и отображает результат пользователю. Окончательный вариант приложения выглядит примерно так:
Требования к Windows
Для выполнения данного пошагового руководства необходимо следующее:
· Windows 10.
· Visual Studio 2019 или Visual Studio 2017 версии 15.8 или более поздней: Community, Professional или Enterprise.
В этом пошаговом руководстве предполагается, что на вашей платформе установлена и запущена последняя версия Xamarin.Android.
Создание проекта
Запустите Visual Studio. Щелкните Файл > Создать > Проект, чтобы создать проект.
В диалоговом окне Новый проект выберите шаблон Приложение Android. Задайте для нового проекта имя Phoneword и нажмите кнопку ОК:
В диалоговом окне Новое приложение Android щелкните Пустое приложение и нажмите кнопку ОК, чтобы создать новый проект.
Создание макета
Совет
Новые выпуски Visual Studio поддерживают открытие XML-файлов в Android Designer.
Android Designer поддерживает как файлы AXML, так и XML.
После создания проекта разверните папку Ресурсы и затем папку макета в обозревателе решений. Дважды щелкните файл activity_main.axml, чтобы открыть его в Android Designer. Это файл макета для экрана приложения:
Совет
Более новые выпуски Visual Studio содержат немного другой шаблон приложений.
|
|
|
1. Макет находится в content_main.axml, а не в activity_main.axml.
2. Макет по умолчанию — RelativeLayout. Чтобы выполнить остальные шаги на этой странице, нужно изменить тег <RelativeLayout> на <LinearLayout> и добавить другой атрибут android:orientation="vertical" в открывающий тег LinearLayout.
На панели элементов (область слева) введите text в поле поиска и перетащите мини-приложение Text (Large) (Крупный текст) в область конструктора (в центре):
Выбрав элемент управления Крупный текст в области конструктора, используйте область Свойства, чтобы изменить свойство Text мини-приложения Крупный текст на Enter a Phoneword::
Перетащите мини-приложение Обычный текст из панели элементов в область конструктора и поместите его под мини-приложением Крупный текст. Размещение мини-приложения не будет выполняться, пока вы не переместите указатель мыши на место в макете, которое может принять мини-приложение. На снимках экрана ниже мини-приложение нельзя разместить (как показано в левой части), пока указатель мыши не переместится под предыдущий TextView (как показано в правой части):
Когда Обычный текст (мини-приложение EditText) будет помещен правильно, он будет отображаться, как показано на следующем снимке экрана:
Выбрав мини-приложение Обычный текст в области конструктора, используйте область Свойства, чтобы изменить свойство Id мини-приложения Обычный текст на @+id/PhoneNumberText, а свойство Text на 1-855-XAMARIN:
|
|
|
Перетащите элемент Кнопка из панели элементов в область конструктора и поместите его под мини-приложением Обычный текст:
Выбрав элемент Кнопка в области конструктора, используйте область Свойства, чтобы изменить свойство Text на Translate, а свойство Id — на @+id/TranslateButton:
Перетащите элемент TextView из панели элементов в область конструктора и поместите его под мини-приложением Кнопка. Задайте для свойства Text элемента TextView пустую строку, а для свойства Id — значение @+id/TranslatedPhoneword:
Сохраните изменения, нажав клавиши CTRL+S.
Написание кода
Следующим шагом является добавление кода для преобразования телефонных номеров из буквенно-цифровых в цифровые. Добавьте новый файл в проект, щелкнув правой кнопкой мыши проект Phoneword в обозревателе решений и выбрав Добавить > Новый элемент... , как показано ниже:
В диалоговом окне Добавить новый элемент выберите Visual C# > Код > Файл кода и назовите новый файл кода PhoneTranslator.cs:
Создается пустой класс C#. Вставьте в этот файл следующий код:
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 принял следующий вид:
C#Копировать
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:
C#Копировать
// 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);
Добавьте код, который реагирует на нажатие пользователем кнопки Translate (Преобразовать). Добавьте следующий код в метод OnCreate (после строк, добавленных на предыдущем шаге):
C#Копировать
// 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;
}
};
Сохраните результаты работы, выбрав Файл > Сохранить все (или нажав клавиши CTRL + SHIFT + S), и выполните сборку приложения, выбрав Сборка > Перестроить решение (или нажав клавиши CTRL + SHIFT + B).
При наличии ошибок просмотрите предыдущие шаги и исправьте все ошибки, пока сборка приложения не будет проходить успешно. Если возникает ошибка сборки, например Resource does not exist in the current context (Ресурс не существует в текущем контексте), убедитесь, что имя пространства имен в MainActivity.cs совпадает с именем проекта (Phoneword), после чего полностью перестройте решение. Если по-прежнему возникают ошибки сборки, убедитесь, что установлены последние обновления Visual Studio.
Задайте имя приложения
Теперь, когда вы получили работающее приложение, пора дать ему имя. Разверните папку values (в папке Resources) и откройте файл strings.xml. Измените строку имени приложения на Phone Word, как показано здесь:
XMLКопировать
<resources>
<string name="app_name">Phone Word</string>
<string name="action_settings">Settings</string>
</resources>
Запуск приложения
Протестируйте приложение, запустив его на устройстве или эмуляторе Android. Коснитесь кнопки TRANSLATE, чтобы преобразовать 1-855-XAMARIN в телефонный номер:
Поздравляем! Вы создали свое первое приложение Xamarin.Android!
Дата добавления: 2022-12-03; просмотров: 18; Мы поможем в написании вашей работы! |
Мы поможем в написании ваших работ!