Лабораторные работы андроид студио

Практика разработки простейших приложений для Android

2.1. Цель лабораторной работы

• Познакомиться с инструментами разработки Android-приложений.
• На примере простейших программ разобрать структуру типичного Android-приложения.
• Научиться запускать приложение на эмуляторе.
• Научиться тестировать приложение с помощью Dalvik Debug Monitor Server (DDMS).

2.2. План лабораторной работы

• Создать эмулятор x86.
• Разобрать следующие приложения, запустить их на эмуляторе и выполнить для каждого примера дополнительное задание:
  1. Hello, World!
  2. Работа с кнопками
  3. Работа с анимацией
  4. Работа с GPS

2.3. Необходимое программное обеспечение

• Java Development Kit
• Eclipse с установленным плагином Android Development Tools
• Android SDK
• Android NDK
• Intel Hardware Accelerated Execution Manager

2.4. Инструкции по выполнению лабораторной работы

Работа над приложениями 2-4 начинается с импорта подготовленных проектов в рабочую среду (Workspace). Импорт осуществляется следующим образом:

• File -> New -> Project -> Android Project from Existing Code
• Далее указывается директория, в которой находится проект и пример копируется в рабочую среду (Copy project into workspase).

2.4.1. Создание и настройка эмулятора

• Запустите Android Virtual Devices Manager: Window -> AVD Manger.
• Создайте новое виртуальное устройство (New).
• Настройте эмулятор: задайте название новому устройству, выберите целевой платформой Intel Atom x86 (по желанию можно задать объем SD-карты) и нажмите Create AVD (Рис 2.1).

2.4.2. Hello, World!

• Создайте новый проект: File -> New -> Project -> Android Application Project
• Осуществите необходимые настройки проекта: задайте название, выберите SDK, по желанию можно нарисовать иконку своего приложения (Рис 2.2).

2.4.3. Работа с кнопками

На экране расположены три кнопки (Red, Green, Blue), при нажатии на которые меняется фоновый цвет и появляется соответствующее уведомление (Рис 2.3).

• Импортируйте в рабочую область проект Button Example.
• Запустите его на эмуляторе и протестируйте.
• Ознакомьтесь с примером создания кнопки ( res/layout/activity_main.xml ) и обработки ее нажатия ( src/MainActivity.java ).
• Дополните приложение еще одной кнопкой, при нажатии на которую в качестве фона устанавливалось бы какое-нибудь изображение (изображение скопируйте в директорию res/drawable ).

2.4.4. Работа с анимацией

На экране расположены три кнопки (Frame animation, Transform animation, Cancel animation). При нажатии на первую кнопку воспроизводится покадровая анимация, при нажатии на вторую – анимация преобразований, при нажатии на третью анимация прекращается.

• Импортируйте в рабочую область проект Animaton Example.
• Запустите его на эмуляторе и протестируйте.
• Ознакомьтесь с примерами создания покадровой анимации и анимации преобразований ( res/anim/frame_anim.xml и res/anim/transform_anim.xml ) и примерами их применения к объекту ( src/MainActivity.java ).
• Дополните приложение реализацией своих примеров с анимацией. Описание возможных элементов анимации преобразований представлено в таблице:

fromxScale – начальный масштаб по X

toxScale – конечный масштаб по X

fromYScale – начальный масштаб по Y

toYScale – конечный масштаб по Y

pivotX – Х -координата закрепленного центра

pivotY – Y -координата закрепленного центра

Источник

Интернет технологии / Лабораторная 8

ЛАБОРАТОРНАЯ РАБОТА №8

По курсу «Интернет-программирование»

Создание приложений для ОС Android

Ознакомиться с основами разработки под ОС Android.

1.​ Построение базовых интерфейсов в андроид

2.​ взаимодействие с sql базами данных

В данной лабораторной работе вы познакомитесь со способами создания приложений под ОС Android в среде Android Studio. Вам предстоит создать простое приложение по типу списка покупок(контактов, задач итп). Можно просматривать весь список, добавлять новый элемент списка, можно удалять и, если получится, редактировать. Приблизительный план работы будет в самом конце.

Поскольку в задачах подобного рода принципиально не терять данные между запусками приложения, мы будем использовать базу данных sqlite, инструменты для работы с которой уже есть в составе android sdk. Для начала познакомимся с технологиями, которые нам понадобятся

В следующем окне оставляем все без изменений и жмем Finish

Проект успешно создан. Попробуем его запустить. Run → Run app. Необходимо будет выбрать эмулятор, на котором мы будем запускать проект. Появится примерно такое окно:

Выбираем девайс, на котором мы будем запускать наше приложение. Далее Next

→ Next → Finish. Должен запуститься эмулятор Android с пустым проектом. Теперь, когда все готово к работе, можно приступать. Приложение будет состоять из одного экрана, в котором будет список объектов. Кнопки в левом нижнем углу (уже создана) и всплывающем окне, которое будет появляться при нажатии на кнопку.

Activity — это класс, который «отвечает за 1 экран». То есть за все элементы интерфейса, расположенные на нем и за их работу (обработка нажатий на кнопки итп). У нас будет только одно Activity, которое за нас любезно создал Android Studio. За логику работы Activity отвечает java-класс (в нашем случае MainActivity.java) и его лейаут (activity_main.xml).

Лейаут это XML файл, в котором описывается интерфейс экрана. С ним можэно работать как из «конструктора форм» так и напрямую редактируя xml файл.

После того, как был создан новый экземпляр Activity, у него вызывается метод onCreate, в котором, как правило, происходит первоначальная настройка экрана, такая как инициалазация свойств, подгрузка данных итп.

Выглядеть будет примерно как на картинке выше. Особоле внимание следует уделить строчке

где activity_main это название файла с лейаутом. В этом случае он уже создан, однако в дальнейшем нам предстоит это сделать самим.

Лейауты также можно создавать самостоятельно.

Чтобы создать свой лейаут нужно в папке res создать новый файл лейаута и задать ему имя

Создание лейаута

Мы можем перетащить нужные элементы интерфейса c Palette (также как мы делали с list view). Нам понадобятся элементы TextView. Их можно настроить во вкладке Properties (опять же вспоминаем list view), ему необходимо проставить инентификатор (также как с list view). Также со свойствам можно работать через редактор xml, как это делать — онакомьтесь самостоятельно, это может пригодиться.

Для отображения списка объектов можно воспользоваться элментов интерфейса ListView, который предсталяет собой последовательно (сверху вниз) отрисованные «ячейки» со своим содержимым. Чтобы добавить listVIew на наше активити, можно воспользоваться вкладкой Palette → Containers → ListView.

Palette

Его надо перетащить на заготовку экрана. После этого надо проставить этому ListView идентификатор. Идентификатором может выступать любая строка (об этом ниже). Он потребуется нам для того, чтобы получить доступ к нему из кода. Далее рассмотрим, как наполнить лист вью содержимым.

На рисунке выше можно видеть, что леайут activity_main содержит в себе ListView. Обратим внимание на выделенным красным овалом вкладки design и text. Это режимы работы с лейаутом, можно работать как с «редактором форм» так и с xml. Панель работы со свойствами объекта будет доступна только в режиме design.

ViewAllProperties открывает доступ ко всем свойствам объекта.

Adapter служит источником данных для ListView. Адаптер имеер базовый класс BaseAdapter от которого нужно унаследоваться, чтобы создать свой. Адаптер должен возврааить количество объектов, которые мы хотим отобразить в лист вью а также возвращать сконфигурированный вид для каждого объекта.

Пример реализации Adapter

Обратим внимание на метод getView. В нем используется объект layoutInflater, который позволяет получить нужный нам вид из лейаута.

Создание вида для каждого объекта ListView

Вид создается в это строчке кода. За

view = layoutInflater.inflate(R.layout.cell_layout, parent, false);

R.layout.cell_layout это идентификатор лейаута, который будет использоваться для каждого вида в listView. Он содержится в отдельном файле лейаута, название которого в данном случае cell.layout.xml (его надо сделать самостоятельно). Остальные параметры метода inflate комментировать не будем, просто сделайте также). Ниже приведен пример привязки данных к виду, полученному из лейаута.

Работа с базой данных

на следущей странице

На рисунке выше представлена работа с базой данных. Она вынесена в отдельный класс (рекомендую сделать также). Экземпляр этого клааса можно пождключать к активити, в котором он понадобится в качестве свойства. В методе onCreate происходит создание таблицы.

Метод insert — вставка новой записи в БД.

Метод getContacts – получение всех записей из БД. getContacts возвращает объект типа Cursor.

Курсор нужен для получения результатов из БД. На рисунке ниже представлено создание массива объектов модели из базы данных. Получение самих значений можно осуществить методом

getString(i), где i номер столбца. Или getInt или аналогичные.

Создание новой записи

Создание новой записи можно осуществить через AlertDialog. Пример на экране

Пример создания AlertDialog

Обратим внимание на строчку

Мы установили свой лейаут с двумя элементами EditText. Также как видами для list view. И в обработчике одной из кнопок на мы записываем их БД.

1. Создать проект.

2. Перенести ListView на main_activity.xml

3. Создать адаптер для ListView

4. Создать механизм создания записи в БД

5. Создать механизм получения данных из БД и закидывания из в адаптер

Тут вы можете оставить комментарий к выбранному абзацу или сообщить об ошибке.

Источник

Напишите свое первое приложение

Часть 1

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

Эта лабораторная работа является 1 частью двухкомпонентной лабораторной работы. Вы можете найти часть 2 на Google Developers Codelabs (а также копия этой лабораторной работы, часть 1).

То, что вы построите в первой части.

То, что вы создадите в первой части

Вы реализуете простое приложение, которое генерирует предлагаемые имена для стартап-компании. Пользователь может выбирать и отменять выбор имен, сохраняя лучшие из них. Код лениво генерирует 10 имен за раз. В то время как пользователь прокручивает список, генерируется больше имен. Нет предела тому, как далеко пользователь может прокручивать список.

Анимированный GIF показывает, как приложение работает по завершению части 1.

То, что вы узнаете в первой части:

• Как написать flutter-приложение, которое выглядит естественно на iOS, Android и WEB
• Базовая структура приложения Flutter
• Поиск и использование пакетов для расширения функциональности Использование горячей перезагрузки hot reload для более быстрого цикла разработки
• Как реализовать Stateful-виджет
• Как создать бесконечно подгружаемый список

Во второй части этой лабораторной работы вы добавите интерактивность, измените тему приложения и добавите возможность навигации к новому экрану (называемому «Маршрут в Flutter»).

Что вы будете использовать:

Для работы в этой лаборатории вам понадобятся две программы: Flutter SDK и редактор. Эта лабораторная работа предполагает использование Android Studio, но вы можете использовать предпочитаемый вами редактор.

Вы можете запустить эту лабораторную работу с помощью любого из следующих устройств:

• Физическое устройство (Android или iOS), подключенное к компьютеру и переходящее в режим разработчика.
• Симулятор iOS (требуется установка инструментов Xcode).
• Эмулятор Android (требуется настройка в Android Studio)
• Браузер (для отладки требуется Chrome).

Если вы хотите скомпилировать ваше приложение для работы в Интернете, вы должны включить эту функцию (которая в настоящее время находится в бета-версии). Чтобы включить веб-поддержку, воспользуйтесь следующими инструкциями:

Вам нужно запустить команду конфигурации только один раз. После того, как вы включите веб-поддержку, каждое созданное вами приложение Flutter также компилируется для веб. В IDE в разделе devices или в командной строке flutter devices вы должны увидеть Chrome и веб-сервер в списке. Устройство Chrome автоматически запускает Chrome. Веб-сервер запускает сервер, на котором расположено приложение, чтобы его можно было загрузить из любого браузера. Используйте устройство Chrome во время разработки, чтобы можно было использовать DevTools и веб-сервер, когда нужно протестировать приложение в других браузерах. Дополнительные сведения см. в разделах «Создание веб-приложений с использованием Flutter» и «Напишите свое первое Flutter-приложение в Интернете«.

Шаг 1: Создайте стартовое Flutter приложение.

Создайте простое, шаблонированное приложение Flutter, воспользовавшись инструкциями в разделе «Начало работы с первым приложением Flutter«. Назовите проект startup_namer (вместо flutter_app).

В основном вы будете редактировать lib/main.dart, где находится код Dart.

1. Замените содержимое lib/main.dart.
   Удалите весь код из lib/main.dart. Заменить следующим кодом, который отображает «Hello World» в центре экрана.

lib/main.dart:

2. Запустите приложение так, как описывает ваша IDE. Вы должны увидеть либо Android, либо iOS, либо веб-выход, в зависимости от вашего устройства.

Android IOS

• В этом примере создается приложение «Material «. Material — это визуальный язык дизайна, который является стандартным на мобильных устройствах и в Интернете. Flutter предлагает богатый набор виджетов Material. Хорошей идеей является использование uses-material-design: true запись в разделе Flutter в вашем файле pubspec.yaml. Это позволит вам использовать больше возможностей Material, таких как их набор предопределенных иконок.
• Метод main() использует обозначение стрелки (=>). Для однострочных функций или методов используйте обозначение со стрелкой.
• Расширение StatelessWidget, что делает само приложение виджетом. В Flutter почти все является виджетами, включая выравнивание, отступы и разметку.
• Виджет Scaffold из библиотеки «Material» предоставляет стандартную панель приложения, заголовок и свойство body, в котором хранится дерево виджетов для главного экрана. Поддерево виджетов может быть довольно сложным.
• Основной задачей виджета является предоставление метода build(), который описывает, как отображать виджет с точки зрения других виджетов нижнего уровня.
• Тело для данного примера состоит из виджета «Center«, содержащего дочерний виджет «Text«. Виджет «Center» выравнивает свое поддерево виджета по центру экрана.

Шаг 2: Используйте внешний пакет

На этом шаге вы начнете использовать пакет с открытым исходным кодом english_words, который содержит несколько тысяч наиболее употребляемых английских слов, а также некоторые утилитные функции.
Пакет english_words, а также многие другие пакеты с открытым исходным кодом, можно найти на сайте pub.dev.

1. Файл pubspec.yaml управляет активами и зависимостями для приложения Flutter. В pubspec.yaml добавьте english_words (3.1.5 или выше) в список зависимостей:

2. При просмотре файла pubspec.yaml в редакторе Android Studio нажмите кнопку Pub get. Это втянет пакет в ваш проект. В консоли должно появиться следующее:

Выполняя Pub get, автоматически генерируется файл pubspec.lock со списком всех пакетов, втянутых в проект, и их номерами версий.

3. В файле lib/main.dart импортируйте новый пакет:

lib/main.dart

По мере набора текста, Android Studio дает вам предложения по импорту библиотек. Затем она отображает строку импорта серым цветом, информируя вас о том, что импортируемая библиотека не используется (пока что).

4. Используйте пакет английских слов для генерации текста вместо использования строки «Hello World»:

Если приложение работает, hot reload обновляет запущенное приложение. Каждый раз, когда Вы нажимаете на hot reload или сохраняете проект, в работающем приложении Вы должны видеть другую пару слов, выбранную случайным образом. Это связано с тем, что объединение слов генерируется внутри метода сборки, который запускается каждый раз, когда требуется отрисовка MaterialApp, или при переключении Платформы в Flutter Inspector.

Android IOS

Если ваше приложение работает некорректно, ищите опечатки. Если вы хотите попробовать некоторые из инструментов отладки Flutter’s, ознакомьтесь с набором инструментов отладки и профилирования DevTools. При необходимости используйте код по следующим ссылкам, чтобы вернуться к работе.

Шаг 3: Добавление Stateful виджета (виджета с индикацией состояния)

Stateless виджеты являются неизменными, а это значит, что их свойства не могут меняться — все значения являются окончательными.

Statefull виджеты поддерживают состояние, которое может изменяться в течение жизни виджета. Реализация stateful виджета требует как минимум два класса: 1) класс StatefulWidget, который создает экземпляр 2) класс State. Класс StatefulWidget сам по себе является неизменяемым и может быть выброшен и регенерирован, но класс State сохраняется в течение всего срока службы виджета.

На этом шаге вы добавите stateful виджет, RandomWords, который создает свой класс State, _RandomWordsState. Затем вы будете использовать RandomWords в качестве дочернего элемента существующего stateless виджета MyApp.

1. Создайте код шаблона для stateful-виджета. В lib/main.dart, поместите курсор после всего кода, введите Return пару раз, чтобы начать со свежей строки.
   В IDE начните вводить stful. Редактор спросит, хотите ли вы создать Stateful виджет. Нажмите кнопку Return, чтобы принять. Появится код шаблона для двух классов, и курсор поместится для ввода имени вашего statefull виджета.
2. Введите RandomWords в качестве имени вашего виджета.
   Виджет RandomWords мало что делает кроме создания своего класса State.

После того, как вы ввели RandomWords в качестве statefull виджета, IDE автоматически обновляет сопровождающий его класс State, называя его _RandomWordsState. По умолчанию имя класса State имеет префикс с подбаром. Префиксация идентификатора с подчеркиванием обеспечивает конфиденциальность в языке Dart и рекомендуется для объектов State.

IDE также автоматически обновляет класс State для расширения State, указывая, что вы используете дженерик — общий класс State, специализирующийся на использовании RandomWords. Большая часть логики приложения находится здесь — оно поддерживает состояние для виджета RandomWords. Этот класс сохраняет список сгенерированных пар слов, который растет бесконечно по мере прокрутки пользователем, а во 2-й части этой лабораторной работы — избранные пары слов по мере добавления или удаления пользователем их из списка путем переключения значка сердца.

Оба класса теперь выглядят следующим образом:

3. Обновите метод build() в _RandomWordsState:

lib/main.dart (_RandomWordsState)

После добавления state класса, IDE жалуется, что в классе отсутствует build метод. Далее будет добавлен базовый build метод, который генерирует пары слов, перемещая код генерации слов из MyApp в _RandomWordsState.

4. Удалите код генерации слова из MyApp, сделав изменения, показанные в следующем различии:

5. Перезапустите приложение. Приложение должно вести себя как раньше, отображая пару слов каждый раз при hot reload или сохранении приложения.

Если ваше приложение работает некорректно, ищите опечатки. Если вы хотите попробовать некоторые из инструментов отладки Flutter’s, ознакомьтесь с набором инструментов отладки и профилирования DevTools. При необходимости используйте код, приведенный по следующей ссылке, чтобы вернуться к работе.

Шаг 4: Создание бесконечного прокручиваемого ListView

На этом шаге вы разворачиваете _RandomWordsState, чтобы сгенерировать и отобразить список пар слов. По мере прокрутки пользователя список (отображаемый в виджете ListView) растет бесконечно. Конструктор builder ListView позволяет построить просмотр списка лениво, по требованию.

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

lib/main.dart

Далее в класс _RandomWordsState будет добавлена функция _buildSuggestions(). Этот метод формирует ListView, который отображает предлагаемую пару слов.

Класс ListView предоставляет свойство конструктора, itemBuilder, это factory builder и функция обратного вызова, указанная как анонимная функция. Функции передаются два параметра — BuildContext и итератор строк, i. Итератор начинается с 0 и увеличивается каждый раз при вызове функции. Он инкрементируется дважды для каждой предложенной пары слов: один раз для ListTile, и один раз для Divider. Эта модель позволяет предлагаемому списку продолжать расти по мере прокрутки пользователя.

2. Добавьте функции _buildSuggestions() в класс _RandomWordsState:

lib/main.dart (_buildSuggestions)

/*1*/ Обратный вызов itemBuilder вызывается один раз на каждую предложенную пару слов и помещает каждое предложение в строку ListTile. Для четных строк функция добавляет строку ListTile для объединения слов. Для нечетных строк, функция добавляет виджет разделителя Divider для визуального разделения записей. Обратите внимание, что разделитель может быть трудно увидеть на небольших устройствах.

/*2*/ Добавление виджета разделителя Divider высотой в один пиксель перед каждой строкой в ListView.

/*3*/ Выражение i

/ 2 делит i на 2 и возвращает целочисленный результат. Например: 1, 2, 3, 4, 5 становится 0, 1, 1, 2, 2. При этом вычисляется фактическое количество пар слов в ListView за вычетом виджетов разделителей.

/*4*/ Если Вы достигли конца доступных пар слов, сгенерируйте еще 10 и добавьте их в список предложений.

Функция _buildSuggestions() вызывает _buildRow() один раз на пару слов. Эта функция отображает каждую новую пару в ListTile, что позволяет сделать строки более привлекательными на следующем этапе.

3. Добавьте функцию _buildRow() в _RandomWordsState:

lib/main.dart (_buildRow)

В классе _RandomWordsState обновите метод build() для использования _buildSuggestions(), а не для прямого вызова библиотеки генерации слов. (Scaffold реализует базовую визуальную компоновку Material Design.) Замените тело метода кодом:

lib/main.dart (build)

5. В классе MyApp обновите метод build(), изменив заголовок и превратив домашний виджет в виджет RandomWords:

6. Перезапустите приложение. Вы должны увидеть список пар слов, независимо от того, как далеко вы прокручиваете.

Android IOS

Если ваше приложение работает некорректно, ищите опечатки. Если вы хотите попробовать некоторые из инструментов отладки Flutter’s, ознакомьтесь с набором инструментов отладки и профилирования DevTools. При необходимости используйте код, приведенный по следующей ссылке, чтобы вернуться к работе.

Профилирование или выпуски релизов

До сих пор вы запускали свое приложение в режиме отладки. В отладочном режиме производительность меняется на полезные функции разработчика, такие как горячая перезагрузка и пошаговая отладка. Неудивительно, что в отладочном режиме вы увидите медленную производительность и дрожащую анимацию. Как только вы будете готовы проанализировать производительность или выпустить ваше приложение, вы захотите использовать режимы сборки Flutter’s «profile» или «release». Подробности см. в разделе Режимы сборки Flutter.

Следующие шаги

Вы написали интерактивное флаттер-приложение, которое работает как на iOS, так и на Android. В этой лабораторной работе вы:

• Создали приложение «Flutter» с нуля.
• Написали код на Dart-е.
• Использовал внешнюю, стороннюю библиотеку.
• Использовали горячую перезагрузку для более быстрого цикла разработки.
• Реализовали statefull виджет.
• Создали лениво загружаемый бесконечный список прокрутки.

Если вы хотите расширить это приложение, перейдите ко второй части на сайте Google Developers Codelabs, где вы добавите следующую функциональность:

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

Приложение из части 2

Источник