BLE под микроскопом. Андроид. Часть1
Введение
В первой части я помогу вам познакомиться со средой разработки Android Studio и создать простенький проект. Впоследствии мы используем его в качестве базового для работы с BLE устройствами. Эта часть вводная, для новичков. Она достаточно простая. Если вы уже знакомы с Android Studio, вы можете её пропустить. Самая жесть будет позже, во второй части. Итак приступим к изучению.
Подготовка среды к работе
Заходим на официальный сайт и скачиваем оттуда дистрибутив Android Studio. На данный момент это Android Studio Jellyfish for Windows, который занимает больше 1 ГБайта памяти. Далее устанавливаем его. Я не буду подробно останавливаться на этой процедуре, т.к. в сети есть огромное количество материала, посвященное этому. К тому же установка элементарна. Я приведу лишь картинки такой установки.
Установка Android Studio
Далее запускаем среду разработки, выбираем New Project и шаблон Empty Views Activity. Если выбрать другой шаблон, он будет содержать ненужные нам элементы и настройки.
Запуск нового проект
После нажатия кнопки Next откроется окно с настройками проекта. Здесь мы можем выбрать имя проекта, язык и минимальную версию Андроида и др. Я советую установить настройки такие как на экране и двигаться дальше.
Настройки проекта
Далее среда разработки начнет формировать новый проект. В первый раз это может продлиться довольно долго. У меня это занимает минут пять. Дело в том, что среда скачивает указанную выше SDK и много чего ещё. Что бы было нескучно откройте снизу приложения закладку Build и любуйтесь этим процессом :-) Особое внимание следует уделить строке Gradle: Configuring projects с узкой синей полоской индикатора загрузки. Это указатель сборщика проекта. По нему мы можем понять завершен текущий процесс или нет. Почаще поглядывайте на него :-)
Формирование проекта
Итак, процесс закончился, ушел желтый фон обработки и перед нами открылся проект, имеющий следующий вид. Для последующей работы нам нужно всего три выделенных файла: AndroidManifest.xml, MainActivity.java и activity_main.xml. Ниже показан файл активности, который будет содержать всю логику нашей программы.
Файл MainActivity.java
В файле манифеста даются различные разрешения. В дальнейшем мы будем писать туда разрешения для работы с bluetooth. В текущем учебном проекте вносить изменения в него мы не будем.
Файл AndroidManifest.xml
В папке layout-a содержится файл activity_main.xml. Это более сложный объект, чем предыдущие. Он описывает графическое представление нашей программы, т.е. ту картинку, которую мы видим на экране со всеми надписям, кнопочками и прочими элементами. Это представление может быть как графическим, так и текстовым. Можно и одновременно выводить оба представления. Переключатель закладок находится вверху справа, я их выделил красным. На графическом поле выводятся два образца — светлый и темный, для дневного и ночного представления нашего приложения. Мы будем работать исключительно со светлым.
Графическое представление activity_main.xml
Текстовое представление activity_main.xml
Работа с графикой
Давайте немного исследуем графический интерфейс. Если мы кликнем на надпись «Hello World!», то мы увидим четыре пружинки, идущие к краям экрана. Мы можем захватить эту надпись и потаскать её по экрану. Этими пружинками надпись позиционируется на экране. Мы можем привязывать новые элементы не только к краям экрана, но и к другим элементам. Однако в дальнейшем, все новые элементы, для простоты, будем привязывать только к краям экрана. Немного поигравшись, удалите элемент с поля, нажав на клавиатуре кнопку delete. Чуть ниже я объясню причину.
Смешанное представление activity_main.xml
Каждый графический элемент на поле пронумерован и имеет свой id. Ниже на рисунке я выделил красным овалом то поле, где мы его можем увидеть. По каким то причинам (я не знаю, я сам новичок:-) надпись «Hello World!» не имеет своего id. Это поле у него пустое, поэтому я и предложил его удалить. Мы же пройдемся по шагам и создадим свою надпись на экране. Все элементы, которые мы можем поместить на экран, сгруппированы по тематике в разделе Palette. Если мы зайдем в раздел «Common» или «Text», мы увидим элемент TextView, я выделил его красным прямоугольником. Этот элемент служит для выведения на экран различных надписей. Удерживая кнопку мыши на нем, переместим элемент на наше пустое поле. Результат показан на картинке внизу. В поле, выделенным красным овалом, появилось его id с надписью textView.
Теперь скажем несколько слов о правилах именований, принятых в языке Java. Тип элемента всегда начинается с большой буквы, он один для всех элементов одного типа. В данном случае все надписи будут иметь тип TextView. Внутри данного типа каждый элемент будет иметь свой уникальный id, который будет начинаться с маленькой буквы. В принципе это собственное имя может быть любым, однако для легкого понимания их называют так же как и общий тип, только с маленькой буквы, добавляя цифры в конце. И делается это средой автоматически. Элементы типа TextView обозначаются как правило textView, textView2, textView3 и т.д. Я сразу скажу, что это вполне удобно, т.к. далее мы всё равно будем присваивать им более понятные названия.
Вывод элемента TextView
Вернемся к позиционированию элементов на экране. Если вы посмотрите на рисунок вверху в поле «Component Tree», то увидите, что напротив нашего элемента стоит красный кружок с восклицательным знаком. Среда указывает на ошибку. Наш элемент не имеет никакой привязки, поэтому её необходимо сделать. У нашей надписи есть четыре синих кружка. Удерживая мышкой один из них, потащите его к ближайшему краю экрана. Вся надпись притянется к нему и кружок закрасится полностью. Так надо сделать со всеми четырьмя кружками. Тогда вы увидите элемент, привязанный пружинками к краям формы. Теперь нашу надпись можно поместить в любое место нашего экрана. Так же позиционируются и все другие элементы — кнопки, контейнеры и пр. Красный кружок в поле «Component Tree» заменился на желтый треугольник.
Привязка элемента TextView к краям экрана
Таким же способом поместим на рабочее поле кнопку из раздела Common → Button. В поле «Component Tree» так же как и ранее с надписью, будет красный кружок с восклицательным знаком. Значит надо кнопку привязать. Делаем.
Выставляем кнопку на рабочее поле
У нас должно получиться примерно следующее.
Привязка элемента Button к краям экрана
Меняем свойства элементов
Теперь давайте попробуем что то изменить в нашей надписи. Справа от графического поля имеется поле Attributes. Мы уже видели, что здесь находится Id элементов. Здесь же располагаются все остальные атрибуты. На самом деле, в работе мы будем использовать всего два-три самых важных. Но что бы свободно ориентироваться в них, вам придется их изучить, хотя бы поверхностно. Самым главным атрибутом textView конечно же является поле text. Сейчас в нем стоит надпись TextView, но мы можем записать туда всё что пожелаем. Для кнопки Button в атрибуте text стоит надпись Button (проверьте это сами).
Атрибут text элемента textView
Потренируйтесь на досуге менять атрибуты элементов, например их цвет. Вы заметите, что не всё удается поменять, несмотря на казалось бы правильные шаги. Дело в том, что внешний вид программы подчиняется определённому стилю и, что бы всё выглядело красивым, изменение некоторых атрибутов внешнего вида заблокировано. Пока для нас это не важно. Идем дальше.
В этом месте мы немного порассуждаем об устройстве среды Android Studio. Я уже писал, что помимо файла манифеста, который мы пока не трогаем, всё наше приложение будет укладываться в два файла — файл активности (MainActivity.java) и файл макета или шаблона (activity_main.xml). В первом содержится вся логика работы программы, а во втором описывается графика приложения. Но как они связаны? Сейчас мы с этим разберемся.
Перейдем в файл активности. Оно выглядит так как внизу на картинке. Для наглядности, я отделил штриховой чертой код, который нужен для первоначальной инициализации программы. Что бы связать графический элемент с его функциональной частью, необходимо сделать два шага. Во-первых, наша надпись относится к классу TextView, поэтому так и пишем в заголовке нашей программы. А имя нашему элементу дадим textViewData. Это всё равно, что мы сначала говорим, что перед нами человек, а имя ему — Вася Пупкин :-) Но что мы видим? Иногда надпись TextView горит красным.
Это значит, что наш проект пока не умеет работать с таким объектом. Решается всё просто. Сначала надо кликнуть на красный кружок с восклицательным знаком и количеством ошибок (справа вверху). Внизу откроется окно с описанием ошибок. Затем подводим мышку к красной надписи и у нас выскакивает транспарант с предложением импортировать класс (Import class), нажимаем на него и надпись TextView становится черной. Мы добавили класс к проекту. Если теперь нажать три точки возле слова import вверху страницы, мы увидим что в заголовке появилась новая надпись import android.widget.TextView. Иногда среда Android Studio сама автоматом делает эту работу за вас. Почему так — я не знаю, я только учусь :-)
Ручное подключение класса к проекту
Вторым шагом инициализации элемента является следующая волшебная запись в теле проекта — textViewData= findViewById (R.id.textView); Если всё сделано правильно, она останется в черно-синих тонах. Android Studio среда достаточно дружественная и при ручном вводе сама подсказывает правильные команды. Не забываем в конце ставить точку с запятой.
Подсказки среды Android Studio
Этой надписью мы связываем графический элемент textView с его новым именем textViewData. Отныне все обращения к нему будут происходить с использованием данного имени. Напишем снизу ещё одну магическую строчку — textViewData.setText («Привет !!!»); Как нетрудно догадаться, с её помощью мы заменим надпись с дефолтной на «Привет !!!».
Присваивание новой надписи
Аналогичную процедуру сделаем с кнопкой. В заголовке пишем запись Button buttonMy, , а внизу, после записи об инициализации textView, инициализируем кнопку. У вас должно быть так как на рисунке внизу. Первой строчкой мы связываем графический объект button c его новым именем buttonMy. Далее мы создаем обращение к функции, которая обрабатывает нажатие этой кнопки. Сама функция располагается ниже. В ней, для примера, мы выводим в объект textView новую надпись. Всё это выглядит как небольшая магия, поэтому надо немного привыкнуть к названию функций и их стилю. Для наглядности я указал где у нас находятся функции, стартующие при инициализации, а где располагаются остальные.
Обработка компонента Button
Добавим на поле ещё один элемент — editText (Palette → Text → Plain Text) и как обычно, привяжем его к границам экрана. Этот элемент нужен нам для ввода каких либо параметров, хотя он двунаправленный и с его помощью можно так же и выводить данные.
Добавление элемента editText
Давайте попробуем, ради эксперимента, поменять название этого графического объекта. Например поменяем его название на editTextRead, написав новое название в поле id справа вверху. В этом случае среда попросит подтвердить наше намерение. После нажатия кнопки Refactor название графического элемента поменяется на новое.
Изменение названия графического элемента
Ну и подправим наш Activity. Командой editTextMy = findViewById (R.id.editTextRead); проинициализируем наш editText, а командой editTextMy.setText («Я уверен»); будем записывать новый текст при нажатии кнопки. В итоге получим следующее.
Текст Activity
В принципе, для первого старта программы более чем достаточно элементов. Осталось теперь вывести результат нашей работы на экран телефона.
Подготовка телефона к работе
Здесь мы подходим к выбору отображения результатов работы. Есть два варианта — создать виртуальный прибор (Tools → Device Manager) или настроить свой телефон для этой работы. Я предлагаю вам сразу пойти по второму пути. Конечно, для нашей первой программы мы можем смотреть результат и на экране монитора, но, во-первых, виртуальный прибор работает очень медленно и требует мощный комп. А во-вторых, в дальнейшем, когда мы будем работать с bluetooth-ом, виртуальный прибор нам ничем не поможет. Поэтому сразу переводим свой смартфон в режим разработчика. Я не буду подробно описывать как это сделать. В сети есть много ресурсов с описанием этого процесса, к тому же он немного отличается для разных телефонов. Вот, для примера, первый, второй и третий источник. Есть так же много видео на эту тему, так что не буду повторяться. В итоге, после подключения смартфона к компьютеру, у меня на телефоне появляется вот такая картинка. Надо выбрать выделенный пункт и затем в разделе Режим работы USB, выбрать Передачу файлов.
Подключение Android Studio к телефону
После этого, вверху справа в среде разработки, мы должны увидеть окошко с именем своего телефона. Я использую телефон BlackView9500Plus, поэтому в окне Device Manager я вижу именно его. Вы увидите что то своё.
Окно Device Manager с названием телефона
Итак теперь у нас всё готово. Нажимаем на зеленый треугольник (красный квадрат) и, после небольшой паузы (смотри указатель процесса Gradle Build Running), видим результат как на самом правом экране, так и на самом смартфоне.
Вывод изображения на телефон
А после нажатия на кнопку видим изменение надписей на элементах
Приложение поле нажатия кнопки
В принципе, на этом можно было бы уже остановиться. Но для работы с BLE устройствами нам будет необходим ещё один элемент — ListView, поэтому не расслабляемся. Остался последний рывок:-)
Элемент ListView
Выберите элемент Palette → Legacy → ListView и поместите его на форму. Он займет сразу всё поле по ширине, но не обольщайтесь, его так же надо будет привязать к границам экрана. Придется немного повозиться, сначала уменьшив его в размере, что бы были доступны синие кружки по сторонам элемента. А после привязки, опять растянув его на весь экран.
Установка элемента ListView
Теперь проинициализируем элемент в нашей Activity.
Ошибка инициализации ListView
Ой, что то не срослось :-) Среда не знает про элемент ListView, хотя в текстовом описании всё нормально, ошибок нет.
Текстовое представление ListView
Я не знаю почему, но иногда Android Studio глючит и приходится как то выкручиваться. Я решил описать этот глюк, что бы вы знали как из него выходить. Иногда помогает переименование графического элемента. Мы это ранее уже делали. Попробуем и сейчас этот трюк. Переименуем элемент в ListView1.
Переименование элемента
Увы, в этот раз не прокатило. Пойдем другим путем. Синхронизируем проект с Gradle Files. Делается это так: File → Sync Project with Gradle Files (выделено красным прямоугольником). После этого придется подождать несколько минут и все ошибки будут исправлены.
Синхронизация проекта с Gradle Files
Теперь, когда все ошибки исправлены добавим в наш Activity следующий текст. Здесь мы, после инициализации listViewInfo, добавляем массив строк с названием месяцев года. Затем инициализируем адаптер и привязываем его к нашему listViewInfo. Тут надо несколько слов сказать об адаптере. Чуть выше, мы учились привязывать графический элемент к его классу и новому имени. В данном случае ситуация похожая. У нас есть графический элемент с несколькими одинаковыми пустыми полочками (строки). Так же имеется массив строк с указанием месяцев года. Адаптер связывает два этих элемента и размещает эти строки (месяцы года) на пустые полочки элемента listViewInfo. Более подробно об адаптере можно почитать здесь и здесь. Последние три добавленные строки позволяют выводить в элемент editTextMy название месяца, выбранного пользователем. Попробуйте, после компиляции проекта, ткнуть в любую строку listViewInfo и сами увидите.
listViewInfo = findViewById(R.id.ListView1);
String[] countries = {"Январь","Февраль","Март","Апрель","Май","Июнь",
"Июль","Август","Сентябрь","Октябрь","Ноябрь","Декабрь"};
listAdapter = new ArrayAdapter<>(this, android.R.layout.simple_list_item_1, countries);
listViewInfo.setAdapter(listAdapter);
listViewInfo.setOnItemClickListener((listAdapter, view, position, id) -> {
String selectedItem = countries[position];
editTextMy.setText(selectedItem);
});Однако здесь мы опять видим красные строчки. Проект не знает об элементе ListAdapter.
Добавление к проекту элемента listAdapter
Но стоит в заголовке добавить название нашего элемента (ArrayAdapter
Добавление класса ArrayAdapter
Остался последний шаг — нажимаем зеленый треугольник и загружаем проект в телефон. Теперь, если нажать на строку с надписью Январь, это же название появится в строке элемента editTextMy. Попробуйте понажимать и другие строки.
Загрузка проекта в телефон
Заключение
В этой, вводной части по андроиду, я постарался провести новичков по самым важным пунктам создания проектов. Я и сам новичок, поэтому возможно у меня есть неточности или ошибки в описании. Тема очень большая, можно писать и писать. Но, я надеюсь, вы получили самое главное — возможность создавать свои собственные проекты в среде Android Studio. Во второй части мы перейдем к самому интересному — будем учиться работать с BLE на андроиде. Осталось только её написать :-) Напоследок дам один совет, он меня не раз выручал. На начальной стадии изучения, каждый свой шаг проверяйте опытом. Т.е. грузите изменённый проект в ваш смартфон. Это позволит отловить одиночные ошибки. Иначе, когда ошибок в проекте будет больше, трудно понять почему программа перестала работать. Ну и больше практики, практики, практики. Удачи, пойду писать вторую часть :-)
Печерских Владимир
Сотрудник Группы Компаний «Цезарь Сателлит»
