Главная страница

программирование мобильных систем. Лабораторная работа 1. Разработка простого приложения Android


Скачать 346.13 Kb.
НазваниеЛабораторная работа 1. Разработка простого приложения Android
Анкорпрограммирование мобильных систем
Дата16.09.2021
Размер346.13 Kb.
Формат файлаdocx
Имя файлал.р.docx
ТипЛабораторная работа
#233166


Методические материалы

для выполнения лабораторных работ

по дисциплине «Программирование мобильных систем»
  1. Лабораторная работа №1. Разработка простого приложения Android

    1. Цель работы


Установка среды разработки Android Studio. Разработка простого android - приложения.
    1. Общие сведения


В этом разделе описывается, как создать простое приложение для Android. Во-первых, вы узнаете, как создать «Hello, World!» проект с Android Studio и запустите его. Затем вы создаете новый интерфейс для приложения, который принимает вводимые пользователем данные и переключается на новый экран в приложении для его отображения.

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


Приложения Android создаются как комбинация компонентов, которые можно вызывать по отдельности. Например, действие - это тип компонента приложения, который предоставляет пользовательский интерфейс (UI).

«Основное» действие начинается, когда пользователь касается значка вашего приложения. Вы также можете направить пользователя к действию из другого места, например из уведомления или даже из другого приложения.

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

После создания своего первого приложения вы можете узнать больше о других компонентах приложения на странице Основы приложения.
      1. Приложения адаптируются к разным устройствам


Android позволяет предоставлять разные ресурсы для разных устройств. Например, вы можете создавать разные макеты для разных размеров экрана. Система определяет, какой макет использовать, исходя из размера экрана текущего устройства.

Если для какой-либо из функций вашего приложения требуется определенное оборудование, например камера, вы можете запросить во время выполнения, имеет ли устройство это оборудование или нет, а затем отключить соответствующие функции, если его нет. Вы можете указать, что для вашего приложения требуется определенное оборудование, чтобы Google Play не разрешил установку приложения на устройства без него.

После создания своего первого приложения узнайте больше о конфигурациях устройств в разделе Обзор совместимости устройств.

Помня об этих двух основных концепциях, переходите к созданию своего первое приложение!
    1. Создание Android — проекта типа «Привет, Мир!»


В этом разделе показано, как создать новый проект Android с помощью Android Studio, и описаны некоторые файлы в проекте.

Чтобы создать новый проект Android, выполните следующие действия:

  1. Установите последнюю версию Android Studio.

  2. В окне «Добро пожаловать в Android Studio» нажмите «Начать новый проект Android Studio».



Рисунок 1. Android Studio страница приветствия.

Если у вас уже открыт проект, выберите File> New> New Project.

  1. В окне «Выбор шаблона проекта» выберите «Пустое действие» и нажмите «Далее».

  2. В окне «Настройка проекта» выполните следующие действия:

  • Введите «My First App» в поле «Имя».

  • Введите "com.example.myfirstapp" в поле "Имя пакета".

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

  • В раскрывающемся меню «Язык» выберите Java или Kotlin.

  • Выберите самую низкую версию Android, которую будет поддерживать ваше приложение, в поле Minimum SDK.

  • Если вашему приложению требуется поддержка устаревших библиотек, установите флажок Использовать устаревшие библиотеки android.support.

  • Остальные варианты оставьте как есть.

  1. Щелкните Готово.

По прошествии некоторого времени обработки появится главное окно 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 создает ваше приложение.
      1. Запуск приложения


На предыдущем раздле вы создали приложение для Android, которое отображает «Hello, World!». Теперь вы можете запустить приложение на реальном устройстве или в эмуляторе.
        1. Запускайте на реальном устройстве


Настройте свое устройство следующим образом:

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

  2. Выполните следующие шаги, чтобы включить отладку по USB в окне параметров разработчика:

  • Откройте приложение "Настройки".

  • Если ваше устройство использует Android версии 8.0 или выше, выберите Система. В противном случае переходите к следующему шагу.

  • Прокрутите вниз и выберите О телефоне.

  • Прокрутите вниз и семь раз коснитесь номера сборки.

  • Вернитесь к предыдущему экрану, прокрутите вниз и коснитесь Параметры разработчика.

  • В окне параметров разработчика прокрутите вниз, чтобы найти и включить отладку по USB.

Запустите приложение на своем устройстве следующим образом:

  1. В Android Studio выберите свое приложение из раскрывающегося меню конфигураций запуска / отладки на панели инструментов.

  2. На панели инструментов выберите устройство, на котором вы хотите запустить приложение, из раскрывающегося меню целевого устройства.



Рисунок 3. Раскрывающееся меню целевого устройства

Щелкните "Run".

Android Studio установит ваше приложение на подключенное устройство и запустит его. Теперь вы видите "Hello, World!" отображается в приложении на вашем устройстве.
        1. Запуск на эмуляторе


Запустите приложение на эмуляторе следующим образом:

  1. В Android Studio создайте виртуальное устройство Android (AVD), которое эмулятор может использовать для установки и запуска вашего приложения.

  2. На панели инструментов выберите свое приложение в раскрывающемся меню конфигураций запуска / отладки.

  3. В раскрывающемся меню целевого устройства выберите AVD, на котором вы хотите запустить приложение.



Рисунок 4. Раскрывающееся меню целевого устройства

Щелкните "Run".

Android Studio устанавливает приложение на AVD и запускает эмулятор. Теперь вы видите "Hello, World!" отображается в приложении.
    1. Создание простого пользовательского интерфейса


В этом разделе вы узнаете, как использовать редактор макета Android Studio для создания макета, который включает текстовое поле и кнопку. Это будет полезно в дальнейшем, когда вы узнаете, как заставить приложение отправлять содержимое текстового поля другому действию при нажатии кнопки.



Рисунок 5. Скриншот окончательного макета

Пользовательский интерфейс (UI) для Android-приложения построен как иерархия макетов и виджетов. Макеты представляют собой объекты ViewGroup, контейнеры, управляющие расположением их дочерних представлений на экране. Виджеты - это объекты просмотра, компоненты пользовательского интерфейса, такие как кнопки и текстовые поля.



Рисунок 6. Объекты ViewGroup образуют ветви в макете и содержат объекты View.

Android предоставляет словарь XML для классов ViewGroup и View, поэтому большая часть вашего пользовательского интерфейса определяется в файлах XML. Однако вместо того, чтобы научить вас писать XML, этот материал покажет вам, как создать макет с помощью редактора макетов Android Studio. Редактор макета записывает XML за вас, когда вы перетаскиваете представления для создания макета.

Здесь предполагается, что вы используете Android Studio v3.0 или более поздней версии и завершили задание по созданию проекта Android.
      1. Открытие редактора макета


Для начала настройте свое рабочее пространство следующим образом:

  1. В окне проекта откройте app > res > layout > activity_main.xml.

  2. Чтобы освободить место для редактора макета, скройте окно Project. Для этого выберите View > Tool Windows > Project или просто нажмите «Project» в левой части экрана Android Studio.

  3. Если ваш редактор показывает источник XML, щелкните вкладку «Design» в нижней части окна.

  4. Щелкните «Select Design Surface» и выберите «Blueprint».

  5. Нажмите «Show» на панели инструментов редактора макета и убедитесь, что установлен флажок «Show All Constraints».

  6. Убедитесь, что автоподключение выключено. Во всплывающей подсказке на панели инструментов отображается «Enable Autoconnection to Parent» , если автоподключение отключено.

  7. Щелкните Default Margins на панели инструментов и выберите 16. При необходимости вы можете настроить поля для каждого вида позже.

  8. Щелкните 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.
      1. Добавить текстовое поле




Рисунок. 9. Текстовое поле ограничено верхней и левой частью родительского макета.

Выполните следующие действия, чтобы добавить текстовое поле:

  1. Во-первых, вам нужно удалить то, что уже есть в макете. Щелкните TextView на панели Component Tree, а затем нажмите клавишу Delete.

  2. На панели «Palette» щелкните «Text», чтобы отобразить доступные текстовые элементы управления.

  3. Перетащите Plain Text в редактор дизайна и поместите его в верхней части макета. Это виджет EditText, который принимает простой текстовый ввод.

  4. Щелкните вид в редакторе дизайна. Теперь вы можете видеть квадратные ручки для изменения размера вида в каждом углу и круглые якоря зависимости с каждой стороны. Для лучшего контроля вы можете увеличить масштаб редактора. Для этого используйте кнопки «Zoom» на панели инструментов редактора макета.

  5. Щелкните и удерживайте привязку на верхней стороне, перетащите ее вверх, пока она не зафиксируется в верхней части макета, а затем отпустите. Это ограничение: оно ограничивает представление в пределах установленного поля по умолчанию. В этом случае вы устанавливаете его на 16 dp от верха макета.

  6. Используйте тот же процесс, чтобы создать ограничение с левой стороны вида на левую сторону макета.

Результат должен выглядеть, как показано на рисунке 9.
      1. Добавить кнопку




Рисунок 10. Кнопка ограничена правой стороной текстового поля и его базовой линией.

  1. На панели «Palette» нажмите «Buttons».

  2. Перетащите виджет «Button» в редактор дизайна и поместите его рядом с правой стороной.

  3. Создайте ограничение от левой стороны кнопки к правой стороне текстового поля.

  4. Чтобы ограничить виды горизонтальным выравниванием, создайте ограничение между базовыми линиями текста. Для этого щелкните кнопку правой кнопкой мыши и выберите «Show Baseline» . Показать базовую линию в редакторе макета. Якорь базовой линии появится внутри кнопки. Щелкните и удерживайте эту привязку, а затем перетащите ее на привязку базовой линии, которая отображается в соседнем текстовом поле.

Результат должен выглядеть, как показано на рисунке 10.
      1. Измените строки пользовательского интерфейса


Для предварительного просмотра пользовательского интерфейса нажмите «Select Design Surface» на панели инструментов и выберите «Design». Обратите внимание, что для ввода текста и метки кнопки заданы значения по умолчанию.

Выполните следующие действия, чтобы изменить строки пользовательского интерфейса:

  1. Откройте окно Project, а затем откройте app > res > values > strings.xml. Это файл строковых ресурсов, в котором вы можете указать все свои строки пользовательского интерфейса. Он позволяет управлять всеми строками пользовательского интерфейса в одном месте, что упрощает их поиск, обновление и локализацию.

  2. Щелкните Open editor вверху окна. Откроется Translations Editor, который предоставляет простой интерфейс для добавления и редактирования строк по умолчанию. Это также поможет вам упорядочить все переведенные строки.

  3. Щелкните Add Key , чтобы создать новую строку в качестве «текста подсказки» для текстового поля. В этот момент открывается окно, показанное на рисунке 11.
    В диалоговом окне «Add Key» выполните следующие действия:

  • Введите «edit_message» в поле «Ключ».

  • Введите «Введите сообщение» в поле «Default Value».

  • Щелкните ОК.

  1. Добавьте еще один ключ с именем «button_send» со значением «Отправить».



Рисунок 11. Диалог для добавления новой строки

Теперь вы можете установить эти строки для каждого вида. Чтобы вернуться к файлу макета, щелкните activity_main.xml на панели вкладок. Затем добавьте строки следующим образом:

  • Щелкните текстовое поле в макете. Если окно «Attributes» еще не отображается справа, щелкните «Attributes» на правой боковой панели.

  • Найдите свойство text, для которого в настоящее время установлено значение «Name», и удалите значение.

  • Найдите свойство подсказки и нажмите Pick a Resource , который находится справа от текстового поля. В появившемся диалоговом окне дважды щелкните edit_message из списка.

  • Щелкните кнопку в макете и найдите его свойство text, для которого в настоящее время установлено значение «Button». Затем нажмите Pick a Resource и выберите button_send.
      1. Адаптивное текстовое поле


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

Прежде чем продолжить, нажмите «Select Design Surface» на панели инструментов и выберите «Blueprint».

Чтобы сделать текстовое поле гибким, выполните следующие действия:

  1. Выберите оба представления. Для этого щелкните один, удерживайте Shift, затем щелкните другой, а затем щелкните правой кнопкой мыши любой из них и выберите Chains > Create Horizontal Chain. После этого компоновка появится, как показано на рисунке 12.

Цепочка - это двунаправленное ограничение между двумя или более представлениями, которое позволяет размещать связанные представления в унисон.



Рисунок 12. Результат выбора Create Horizontal Chain

  1. Нажмите кнопку и откройте окно Attributes. Затем с помощью инспектора вида в верхней части окна «Attributes» установите для правого поля значение 16 dp.

  2. Щелкните текстовое поле, чтобы просмотреть его атрибуты. Затем дважды щелкните Match Constraints, чтобы он был установлен на соответствие ограничениям, как указано выноской 1 на рисунке 13.



Рисунок 13. Щелкните, чтобы изменить ширину на соответствие ограничениям

Ограничения соответствия означают, что ширина увеличивается в соответствии с определением горизонтальных ограничений и полей. Следовательно, текстовое поле растягивается, чтобы заполнить горизонтальное пространство, которое остается после кнопки, и все поля учитываются.

Теперь макет готов, как показано на рисунке 14.



Рисунок 14. Текстовое поле теперь растягивается, чтобы заполнить оставшееся пространство

Если ваш макет получился не таким, как ожидалось, нажмите Просмотреть окончательный XML-код макета ниже. Сравните это с тем, что вы видите на вкладке «Text». Если ваши атрибуты расположены в другом порядке, ничего страшного.
       


написать администратору сайта