программирование мобильных систем. Лабораторная работа 1. Разработка простого приложения Android
Скачать 346.13 Kb.
|
Методические материалы для выполнения лабораторных работ по дисциплине «Программирование мобильных систем» Лабораторная работа №1. Разработка простого приложения AndroidЦель работыУстановка среды разработки Android Studio. Разработка простого android - приложения. Общие сведенияВ этом разделе описывается, как создать простое приложение для Android. Во-первых, вы узнаете, как создать «Hello, World!» проект с Android Studio и запустите его. Затем вы создаете новый интерфейс для приложения, который принимает вводимые пользователем данные и переключается на новый экран в приложении для его отображения. Прежде чем вы начнете, вам необходимо понять две фундаментальные концепции приложений Android: как они обеспечивают несколько точек входа и как они адаптируются к различным устройствам. Приложения предоставляют несколько точек входаПриложения Android создаются как комбинация компонентов, которые можно вызывать по отдельности. Например, действие - это тип компонента приложения, который предоставляет пользовательский интерфейс (UI). «Основное» действие начинается, когда пользователь касается значка вашего приложения. Вы также можете направить пользователя к действию из другого места, например из уведомления или даже из другого приложения. Другие компоненты, такие как широковещательные приемники и службы, позволяют вашему приложению выполнять фоновые задачи без пользовательского интерфейса. После создания своего первого приложения вы можете узнать больше о других компонентах приложения на странице Основы приложения. Приложения адаптируются к разным устройствамAndroid позволяет предоставлять разные ресурсы для разных устройств. Например, вы можете создавать разные макеты для разных размеров экрана. Система определяет, какой макет использовать, исходя из размера экрана текущего устройства. Если для какой-либо из функций вашего приложения требуется определенное оборудование, например камера, вы можете запросить во время выполнения, имеет ли устройство это оборудование или нет, а затем отключить соответствующие функции, если его нет. Вы можете указать, что для вашего приложения требуется определенное оборудование, чтобы Google Play не разрешил установку приложения на устройства без него. После создания своего первого приложения узнайте больше о конфигурациях устройств в разделе Обзор совместимости устройств. Помня об этих двух основных концепциях, переходите к созданию своего первое приложение! Создание Android — проекта типа «Привет, Мир!»В этом разделе показано, как создать новый проект Android с помощью Android Studio, и описаны некоторые файлы в проекте. Чтобы создать новый проект Android, выполните следующие действия: Установите последнюю версию Android Studio. В окне «Добро пожаловать в Android Studio» нажмите «Начать новый проект Android Studio». Рисунок 1. Android Studio страница приветствия. Если у вас уже открыт проект, выберите File> New> New Project. В окне «Выбор шаблона проекта» выберите «Пустое действие» и нажмите «Далее». В окне «Настройка проекта» выполните следующие действия: Введите «My First App» в поле «Имя». Введите "com.example.myfirstapp" в поле "Имя пакета". Если вы хотите поместить проект в другую папку, измените его местоположение для сохранения. В раскрывающемся меню «Язык» выберите Java или Kotlin. Выберите самую низкую версию Android, которую будет поддерживать ваше приложение, в поле Minimum SDK. Если вашему приложению требуется поддержка устаревших библиотек, установите флажок Использовать устаревшие библиотеки android.support. Остальные варианты оставьте как есть. Щелкните Готово. По прошествии некоторого времени обработки появится главное окно Android Studio. Рисунок 2. Android Studio главное окно Теперь найдите время, чтобы просмотреть самые важные файлы. Сначала убедитесь, что окно «Project» открыто (выберите View > Tool Windows > Project) и выберите представление Android из раскрывающегося списка вверху этого окна. После этого вы увидите следующие файлы: app > java > com.example.myfirstapp > MainActivity Это основная Activity. Это точка входа для вашего приложения. Когда вы создаете и запускаете свое приложение, система запускает экземпляр этого Activity и загружает его макет. app > res > layout > activity_main.xml Этот XML-файл определяет макет пользовательского интерфейса (UI) действия. Он содержит элемент TextView с текстом «Hello, World!» app > manifests > AndroidManifest.xml Файл манифеста описывает основные характеристики приложения и определяет каждый из его компонентов. Gradle Scripts > build.gradle Есть два файла с таким именем: один для проекта «Project: My First App» и один для модуля приложения «Модуль: приложение». У каждого модуля есть собственный файл build.gradle, но в настоящее время в этом проекте только один модуль. Используйте файл build.file каждого модуля, чтобы контролировать, как плагин Gradle создает ваше приложение. Запуск приложенияНа предыдущем раздле вы создали приложение для Android, которое отображает «Hello, World!». Теперь вы можете запустить приложение на реальном устройстве или в эмуляторе. Запускайте на реальном устройствеНастройте свое устройство следующим образом: Подключите устройство к машине разработки с помощью кабеля USB. Если вы разрабатываете для Windows, вам может потребоваться установить соответствующий драйвер USB для вашего устройства. Выполните следующие шаги, чтобы включить отладку по USB в окне параметров разработчика: Откройте приложение "Настройки". Если ваше устройство использует Android версии 8.0 или выше, выберите Система. В противном случае переходите к следующему шагу. Прокрутите вниз и выберите О телефоне. Прокрутите вниз и семь раз коснитесь номера сборки. Вернитесь к предыдущему экрану, прокрутите вниз и коснитесь Параметры разработчика. В окне параметров разработчика прокрутите вниз, чтобы найти и включить отладку по USB. Запустите приложение на своем устройстве следующим образом: В Android Studio выберите свое приложение из раскрывающегося меню конфигураций запуска / отладки на панели инструментов. На панели инструментов выберите устройство, на котором вы хотите запустить приложение, из раскрывающегося меню целевого устройства. Рисунок 3. Раскрывающееся меню целевого устройства Щелкните "Run". Android Studio установит ваше приложение на подключенное устройство и запустит его. Теперь вы видите "Hello, World!" отображается в приложении на вашем устройстве. Запуск на эмулятореЗапустите приложение на эмуляторе следующим образом: В Android Studio создайте виртуальное устройство Android (AVD), которое эмулятор может использовать для установки и запуска вашего приложения. На панели инструментов выберите свое приложение в раскрывающемся меню конфигураций запуска / отладки. В раскрывающемся меню целевого устройства выберите AVD, на котором вы хотите запустить приложение. Рисунок 4. Раскрывающееся меню целевого устройства Щелкните "Run". Android Studio устанавливает приложение на AVD и запускает эмулятор. Теперь вы видите "Hello, World!" отображается в приложении. Создание простого пользовательского интерфейсаВ этом разделе вы узнаете, как использовать редактор макета Android Studio для создания макета, который включает текстовое поле и кнопку. Это будет полезно в дальнейшем, когда вы узнаете, как заставить приложение отправлять содержимое текстового поля другому действию при нажатии кнопки. Рисунок 5. Скриншот окончательного макета Пользовательский интерфейс (UI) для Android-приложения построен как иерархия макетов и виджетов. Макеты представляют собой объекты ViewGroup, контейнеры, управляющие расположением их дочерних представлений на экране. Виджеты - это объекты просмотра, компоненты пользовательского интерфейса, такие как кнопки и текстовые поля. Рисунок 6. Объекты ViewGroup образуют ветви в макете и содержат объекты View. Android предоставляет словарь XML для классов ViewGroup и View, поэтому большая часть вашего пользовательского интерфейса определяется в файлах XML. Однако вместо того, чтобы научить вас писать XML, этот материал покажет вам, как создать макет с помощью редактора макетов Android Studio. Редактор макета записывает XML за вас, когда вы перетаскиваете представления для создания макета. Здесь предполагается, что вы используете Android Studio v3.0 или более поздней версии и завершили задание по созданию проекта Android. Открытие редактора макетаДля начала настройте свое рабочее пространство следующим образом: В окне проекта откройте app > res > layout > activity_main.xml. Чтобы освободить место для редактора макета, скройте окно Project. Для этого выберите View > Tool Windows > Project или просто нажмите «Project» в левой части экрана Android Studio. Если ваш редактор показывает источник XML, щелкните вкладку «Design» в нижней части окна. Щелкните «Select Design Surface» и выберите «Blueprint». Нажмите «Show» на панели инструментов редактора макета и убедитесь, что установлен флажок «Show All Constraints». Убедитесь, что автоподключение выключено. Во всплывающей подсказке на панели инструментов отображается «Enable Autoconnection to Parent» , если автоподключение отключено. Щелкните Default Margins на панели инструментов и выберите 16. При необходимости вы можете настроить поля для каждого вида позже. Щелкните Device for Preview на панели инструментов и выберите 5,5, 1440 × 2560, 560 точек на дюйм (Pixel XL). Ваш редактор макетов теперь выглядит, как показано на рисунке 7. Рисунок 7. Редактор макета, показывающий activity_main.xml На панели «Component Tree» в левом нижнем углу отображается иерархия представлений макета. В этом случае корневым представлением является ConstraintLayout, который содержит только один объект TextView. ConstraintLayout - это макет, который определяет положение для каждого представления на основе ограничений для одноуровневых представлений и родительского макета. Таким образом, вы можете создавать как простые, так и сложные макеты с плоской иерархией видов. Этот тип макета позволяет избежать вложенных макетов. Вложенный макет, который представляет собой макет внутри макета, как показано на рисунке 6, может увеличить время, необходимое для рисования пользовательского интерфейса. Например, вы можете объявить следующий макет, показанный на рисунке 8: Вид A появляется на 16 dp от верха родительского макета. Вид A появляется на 16 dp слева от родительского макета. Вид B появляется на 16 dp справа от вида A. Вид B выровнен по верхнему краю вида A. Рисунок 8. Иллюстрация двух представлений, расположенных внутри ConstraintLayout В следующих разделах вы создадите макет, аналогичный макету на рисунке 8. Добавить текстовое полеРисунок. 9. Текстовое поле ограничено верхней и левой частью родительского макета. Выполните следующие действия, чтобы добавить текстовое поле: Во-первых, вам нужно удалить то, что уже есть в макете. Щелкните TextView на панели Component Tree, а затем нажмите клавишу Delete. На панели «Palette» щелкните «Text», чтобы отобразить доступные текстовые элементы управления. Перетащите Plain Text в редактор дизайна и поместите его в верхней части макета. Это виджет EditText, который принимает простой текстовый ввод. Щелкните вид в редакторе дизайна. Теперь вы можете видеть квадратные ручки для изменения размера вида в каждом углу и круглые якоря зависимости с каждой стороны. Для лучшего контроля вы можете увеличить масштаб редактора. Для этого используйте кнопки «Zoom» на панели инструментов редактора макета. Щелкните и удерживайте привязку на верхней стороне, перетащите ее вверх, пока она не зафиксируется в верхней части макета, а затем отпустите. Это ограничение: оно ограничивает представление в пределах установленного поля по умолчанию. В этом случае вы устанавливаете его на 16 dp от верха макета. Используйте тот же процесс, чтобы создать ограничение с левой стороны вида на левую сторону макета. Результат должен выглядеть, как показано на рисунке 9. Добавить кнопкуРисунок 10. Кнопка ограничена правой стороной текстового поля и его базовой линией. На панели «Palette» нажмите «Buttons». Перетащите виджет «Button» в редактор дизайна и поместите его рядом с правой стороной. Создайте ограничение от левой стороны кнопки к правой стороне текстового поля. Чтобы ограничить виды горизонтальным выравниванием, создайте ограничение между базовыми линиями текста. Для этого щелкните кнопку правой кнопкой мыши и выберите «Show Baseline» . Показать базовую линию в редакторе макета. Якорь базовой линии появится внутри кнопки. Щелкните и удерживайте эту привязку, а затем перетащите ее на привязку базовой линии, которая отображается в соседнем текстовом поле. Результат должен выглядеть, как показано на рисунке 10. Измените строки пользовательского интерфейсаДля предварительного просмотра пользовательского интерфейса нажмите «Select Design Surface» на панели инструментов и выберите «Design». Обратите внимание, что для ввода текста и метки кнопки заданы значения по умолчанию. Выполните следующие действия, чтобы изменить строки пользовательского интерфейса: Откройте окно Project, а затем откройте app > res > values > strings.xml. Это файл строковых ресурсов, в котором вы можете указать все свои строки пользовательского интерфейса. Он позволяет управлять всеми строками пользовательского интерфейса в одном месте, что упрощает их поиск, обновление и локализацию. Щелкните Open editor вверху окна. Откроется Translations Editor, который предоставляет простой интерфейс для добавления и редактирования строк по умолчанию. Это также поможет вам упорядочить все переведенные строки. Щелкните Add Key , чтобы создать новую строку в качестве «текста подсказки» для текстового поля. В этот момент открывается окно, показанное на рисунке 11. В диалоговом окне «Add Key» выполните следующие действия: Введите «edit_message» в поле «Ключ». Введите «Введите сообщение» в поле «Default Value». Щелкните ОК. Добавьте еще один ключ с именем «button_send» со значением «Отправить». Рисунок 11. Диалог для добавления новой строки Теперь вы можете установить эти строки для каждого вида. Чтобы вернуться к файлу макета, щелкните activity_main.xml на панели вкладок. Затем добавьте строки следующим образом: Щелкните текстовое поле в макете. Если окно «Attributes» еще не отображается справа, щелкните «Attributes» на правой боковой панели. Найдите свойство text, для которого в настоящее время установлено значение «Name», и удалите значение. Найдите свойство подсказки и нажмите Pick a Resource , который находится справа от текстового поля. В появившемся диалоговом окне дважды щелкните edit_message из списка. Щелкните кнопку в макете и найдите его свойство text, для которого в настоящее время установлено значение «Button». Затем нажмите Pick a Resource и выберите button_send. Адаптивное текстовое полеЧтобы создать макет, который реагирует на разные размеры экрана, вам нужно растянуть текстовое поле, чтобы заполнить все горизонтальное пространство, которое остается после того, как кнопка и поля учтены. Прежде чем продолжить, нажмите «Select Design Surface» на панели инструментов и выберите «Blueprint». Чтобы сделать текстовое поле гибким, выполните следующие действия: Выберите оба представления. Для этого щелкните один, удерживайте Shift, затем щелкните другой, а затем щелкните правой кнопкой мыши любой из них и выберите Chains > Create Horizontal Chain. После этого компоновка появится, как показано на рисунке 12. Цепочка - это двунаправленное ограничение между двумя или более представлениями, которое позволяет размещать связанные представления в унисон. Рисунок 12. Результат выбора Create Horizontal Chain Нажмите кнопку и откройте окно Attributes. Затем с помощью инспектора вида в верхней части окна «Attributes» установите для правого поля значение 16 dp. Щелкните текстовое поле, чтобы просмотреть его атрибуты. Затем дважды щелкните Match Constraints, чтобы он был установлен на соответствие ограничениям, как указано выноской 1 на рисунке 13. Рисунок 13. Щелкните, чтобы изменить ширину на соответствие ограничениям Ограничения соответствия означают, что ширина увеличивается в соответствии с определением горизонтальных ограничений и полей. Следовательно, текстовое поле растягивается, чтобы заполнить горизонтальное пространство, которое остается после кнопки, и все поля учитываются. Теперь макет готов, как показано на рисунке 14. Рисунок 14. Текстовое поле теперь растягивается, чтобы заполнить оставшееся пространство Если ваш макет получился не таким, как ожидалось, нажмите Просмотреть окончательный XML-код макета ниже. Сравните это с тем, что вы видите на вкладке «Text». Если ваши атрибуты расположены в другом порядке, ничего страшного. Запуск приложенияЕсли ваше приложение уже установлено на устройстве с предыдущего раздела, просто нажмите «Apply Changes» , на панели инструментов, чтобы обновить приложение с новым макетом. Или нажмите «Run» , чтобы установить и запустить приложение. Кнопка по-прежнему ничего не делает. Запуск другого ActivityСейчас у вас есть приложение, которое показывает действие, состоящее из одного экрана с текстовым полем и кнопкой «Отправить». В этом разделе вы добавляете код в MainActivity, который запускает новое Activity для отображения сообщения, когда пользователь нажимает кнопку «Отправить». Обработчик нажатия на кнопку «Отправить»Выполните следующие действия, чтобы добавить метод в класс MainActivity, который вызывается при нажатии кнопки «Отправить»: В файле app > java > com.example.myfirstapp > MainActivity добавьте следующую заглушку метода sendMessage() :public class MainActivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } /** Called when the user taps the Send button */ public void sendMessage(View view) { // Do something in response to button } } Вы можете увидеть ошибку, потому что Android Studio не может разрешить имя класс View, используемый в качестве аргумента метода. Чтобы устранить ошибку, щелкните декларацию View, наведите на нее курсор и нажмите Alt + Enter или Option + Enter на Mac, чтобы выполнить быстрое исправление. Если появится меню, выберите Import class. Вернитесь в файл activity_main.xml, чтобы указать метод для кнопки: Нажмите кнопку в редакторе макета. В окне «Attributes» найдите свойство onClick и выберите sendMessage [MainActivity] из его раскрывающегося списка. Теперь, когда кнопка нажата, система вызывает метод sendMessage(). Обратите внимание на детали этого метода. Они необходимы для того, чтобы система распознала метод как совместимый с атрибутом android:onClick. В частности, метод имеет следующие характеристики: Публичный доступ. void или, в Kotlin, неявное возвращаемое значение unit. View как единственный параметр. Это объект View, который вы щелкнули в конце шага 1. Затем заполните этот метод, чтобы прочитать содержимое текстового поля и передать этот текст другому действию. Создание объекта IntentIntent - это объект, который обеспечивает привязку времени выполнения между отдельными компонентами, например двумя Activity. Intent представляет намерение приложения что-то сделать. Вы можете использовать намерения для самых разных задач, но на этом этапе ваш объект Intent запускает другое Activity. В MainActivity добавьте константу EXTRA_MESSAGE и код sendMessage (), как показано: public class MainActivity extends AppCompatActivity { public static final String EXTRA_MESSAGE = "com.example.myfirstapp.MESSAGE"; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); } /** Called when the user taps the Send button */ public void sendMessage(View view) { Intent intent = new Intent(this, DisplayMessageActivity.class); EditText editText = (EditText) findViewById(R.id.editText); String message = editText.getText().toString(); intent.putExtra(EXTRA_MESSAGE, message); startActivity(intent); } } Ожидайте, что Android Studio снова столкнется с ошибками Cannot resolve symbol. Чтобы удалить ошибки, нажмите Alt + Enter или Option + Return на Mac. У вас должен получиться следующий импорт: import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.view.View; import android.widget.EditText; Ошибка DisplayMessageActivity все еще остается, но это нормально. Вы исправите это в следующем разделе. Вот что происходит в sendMessage(): Конструктор Intent принимает два параметра: Context и Class. Параметр Context используется первым, потому что класс Activity является подклассом Context. Параметр Class компонента приложения, которому система доставляет намерение, в данном случае является действием, которое нужно запустить. Метод putExtra() добавляет значение EditText к намерению. Intent может переносить типы данных в виде пар ключ-значение, называемых дополнениями. Ваш ключ - это общедоступная константа EXTRA_MESSAGE, потому что следующее действие использует ключ для получения текстового значения. Рекомендуется определять ключи для дополнений намерений с именем пакета вашего приложения в качестве префикса. Это гарантирует, что ключи уникальны, если ваше приложение взаимодействует с другими приложениями. Метод startActivity() запускает экземпляр DisplayMessageActivity, указанный в Intent. Затем вам нужно создать этот класс. Создание второй активностиЧтобы создать второе Activity, выполните следующие действия: В окне «Project» щелкните правой кнопкой мыши папку приложения и выберите New > Activity > Empty Activity. В окне «Configure Activity» введите «DisplayMessageActivity» в качестве имени Activity Name. Оставьте для всех остальных свойств значения по умолчанию и нажмите Finish. Android Studio автоматически делает три вещи: Создает файл DisplayMessageActivity. Создает файл макета activity_display_message.xml, который соответствует файлу DisplayMessageActivity. Добавляет требуемый элемент Если вы запустите приложение и нажмете кнопку на первом действии, запустится второе действие, но оно будет пустым. Это потому, что второе действие использует пустой макет, предоставленный шаблоном. Добавление текстового представленияНовое действие включает пустой файл макета. Выполните следующие действия, чтобы добавить текстовое представление туда, где появляется сообщение: Откройте файл app> res> layout> activity_display_message.xml. Щелкните Enable Autoconnection to Parent на панели инструментов. Это включает автоподключение. См. Рисунок 15. Рисунок 15. Текстовое представление с центром в верхней части макета На панели «Palette» щелкните «Text», перетащите TextView в макет и поместите его в центр верхней части макета, чтобы он привязался к появившейся вертикальной линии. Autoconnect добавляет левые и правые ограничения, чтобы разместить вид в центре по горизонтали. Создайте еще одно ограничение от верхней части текстового представления до верхней части макета, чтобы оно выглядело, как показано на рисунке 15. При желании вы можете внести некоторые изменения в стиль текста, если развернете textAppearance на панели Common Attributes окна Attributes и измените такие атрибуты, как textSize и textColor. Отображение сообщенияНа этом шаге вы изменяете второе Activity, чтобы отобразить сообщение, переданное первым Activity. В DisplayMessageActivity добавьте следующий код в метод onCreate (): @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_display_message); // Get the Intent that started this activity and extract the string Intent intent = getIntent(); String message = intent.getStringExtra(MainActivity.EXTRA_MESSAGE); // Capture the layout's TextView and set the string as its text TextView textView = findViewById(R.id.textView); textView.setText(message); } Нажмите Alt + Enter или Option + Return на Mac, чтобы импортировать эти другие необходимые классы: import androidx.appcompat.app.AppCompatActivity; import android.content.Intent; import android.os.Bundle; import android.widget.TextView; Добавление навигации вверх1Каждый экран в вашем приложении, который не является основной точкой входа, а это все экраны, не являющиеся домашним экраном, должен обеспечивать навигацию, которая направляет пользователя на логический родительский экран в иерархии приложения. Для этого добавьте кнопку «Вверх» на панель приложения. Чтобы добавить кнопку «Вверх», необходимо указать, какое действие является логическим родительским элементом в файле AndroidManifest.xml. Откройте файл в app > manifests > AndroidManifest.xml, найдите тег Система Android теперь автоматически добавляет кнопку «Вверх» на панель приложения. Запуск приложенияНажмите «Apply Changes» на панели инструментов, чтобы запустить приложение. Когда он откроется, введите сообщение в текстовое поле и нажмите «Отправить», чтобы увидеть, как сообщение появится во втором действии. Рисунок. 16. Приложение открыто, текст введен на левом экране и отображается справа Вот и все, вы создали свое первое приложение для Android! Лабораторная работа №2. ….Цель работы.... Общие сведения1Возврат к главному экрану (Activity). |