Введение
В первой части я помогу вам познакомиться со средой разработки Android Studio и создать простенький проект. Впоследствии мы используем его в качестве базового для работы с BLE устройствами. Эта часть вводная, для новичков. Она достаточно простая. Если вы уже знакомы с Android Studio, вы можете её пропустить. Самая жесть будет позже, во второй части. Итак приступим к изучению.
Подготовка среды к работе
Заходим на официальный сайт и скачиваем оттуда дистрибутив Android Studio. На данный момент это Android Studio Jellyfish for Windows, который занимает больше 1 ГБ памяти. Далее устанавливаем его. Я не буду подробно останавливаться на этой процедуре, т.к. в сети есть огромное количество материала, посвященное этому. К тому же установка элементарна. Я приведу лишь картинки такой установки.
![Установка Android Studio Установка Android Studio](https://habrastorage.org/getpro/habr/upload_files/7ee/0b4/746/7ee0b4746a596e7c6fc5ad63f37bd0a5.png)
Далее запускаем среду разработки, выбираем New Project и шаблон Empty Views Activity. Если выбрать другой шаблон, он будет содержать ненужные нам элементы и настройки.
![Запуск нового проект Запуск нового проект](https://habrastorage.org/getpro/habr/upload_files/f0a/76c/070/f0a76c0704d3147319e47b31376cbbdb.png)
После нажатия кнопки Next откроется окно с настройками проекта. Здесь мы можем выбрать имя проекта, язык и минимальную версию Андроида и др. Я советую установить настройки такие как на экране и двигаться дальше.
![Настройки проекта Настройки проекта](https://habrastorage.org/getpro/habr/upload_files/fc2/f8f/2a0/fc2f8f2a07cc2e79b3f805527bb2a2d0.png)
Далее среда разработки начнет формировать новый проект. В первый раз это может продлиться довольно долго. У меня это занимает минут пять. Дело в том, что среда скачивает указанную выше SDK и много чего ещё. Что бы было нескучно откройте снизу приложения закладку Build и любуйтесь этим процессом :-) Особое внимание следует уделить строке Gradle: Configuring projects с узкой синей полоской индикатора загрузки. Это указатель сборщика проекта. По нему мы можем понять завершен текущий процесс или нет. Почаще поглядывайте на него :-)
![Формирование проекта Формирование проекта](https://habrastorage.org/getpro/habr/upload_files/bf7/246/caa/bf7246caa61ea41d3ca404e61f8f6028.png)
Итак, процесс закончился, ушел желтый фон обработки и перед нами открылся проект, имеющий следующий вид. Для последующей работы нам нужно всего три выделенных файла: AndroidManifest.xml, MainActivity.java и activity_main.xml. Ниже показан файл активности, который будет содержать всю логику нашей программы.
![Файл MainActivity.java Файл MainActivity.java](https://habrastorage.org/getpro/habr/upload_files/474/25e/72e/47425e72ee4ecb6df2822b3125efbfcc.png)
В файле манифеста даются различные разрешения. В дальнейшем мы будем писать туда разрешения для работы с bluetooth. В текущем учебном проекте вносить изменения в него мы не будем.
![Файл AndroidManifest.xml Файл AndroidManifest.xml](https://habrastorage.org/getpro/habr/upload_files/4b6/dc3/f3a/4b6dc3f3a589698549365995176a6922.png)
В папке layout-a содержится файл activity_main.xml. Это более сложный объект, чем предыдущие. Он описывает графическое представление нашей программы, т.е. ту картинку, которую мы видим на экране со всеми надписям, кнопочками и прочими элементами. Это представление может быть как графическим, так и текстовым. Можно и одновременно выводить оба представления. Переключатель закладок находится вверху справа, я их выделил красным. На графическом поле выводятся два образца - светлый и темный, для дневного и ночного представления нашего приложения. Мы будем работать исключительно со светлым.
![Графическое представление activity_main.xml Графическое представление activity_main.xml](https://habrastorage.org/getpro/habr/upload_files/976/455/342/9764553423675d4361278b5f2cb6025d.png)
![Текстовое представление activity_main.xml Текстовое представление activity_main.xml](https://habrastorage.org/getpro/habr/upload_files/36a/a44/467/36aa44467b46a77b0865686b9a0a198a.png)
Работа с графикой
Давайте немного исследуем графический интерфейс. Если мы кликнем на надпись "Hello World !", то мы увидим четыре пружинки, идущие к краям экрана. Мы можем захватить эту надпись и потаскать её по экрану. Этими пружинками надпись позиционируется на экране. Мы можем привязывать новые элементы не только к краям экрана, но и к другим элементам. Однако в дальнейшем, все новые элементы, для простоты, будем привязывать только к краям экрана. Немного поигравшись, удалите элемент с поля, нажав на клавиатуре кнопку delete. Чуть ниже я объясню причину.
![Смешанное представление activity_main.xml Смешанное представление activity_main.xml](https://habrastorage.org/getpro/habr/upload_files/426/4a4/449/4264a4449f58f15e46295df15df022f5.png)
Каждый графический элемент на поле пронумерован и имеет свой id. Ниже на рисунке я выделил красным овалом то поле, где мы его можем увидеть. По каким то причинам (я не знаю, я сам новичок :-) надпись "Hello World !" не имеет своего id. Это поле у него пустое, поэтому я и предложил его удалить. Мы же пройдемся по шагам и создадим свою надпись на экране. Все элементы, которые мы можем поместить на экран, сгруппированы по тематике в разделе Palette. Если мы зайдем в раздел "Common" или "Text", мы увидим элемент TextView, я выделил его красным прямоугольником. Этот элемент служит для выведения на экран различных надписей. Удерживая кнопку мыши на нем, переместим элемент на наше пустое поле. Результат показан на картинке внизу. В поле, выделенным красным овалом, появилось его id с надписью textView.
Теперь скажем несколько слов о правилах именований, принятых в языке Java. Тип элемента всегда начинается с большой буквы, он один для всех элементов одного типа. В данном случае все надписи будут иметь тип TextView. Внутри данного типа каждый элемент будет иметь свой уникальный id, который будет начинаться с маленькой буквы. В принципе это собственное имя может быть любым, однако для легкого понимания их называют так же как и общий тип, только с маленькой буквы, добавляя цифры в конце. И делается это средой автоматически. Элементы типа TextView обозначаются как правило textView, textView2, textView3 и т.д. Я сразу скажу, что это вполне удобно, т.к. далее мы всё равно будем присваивать им более понятные названия.
![Вывод элемента TextView Вывод элемента TextView](https://habrastorage.org/getpro/habr/upload_files/f93/ab5/eda/f93ab5eda06076087c956dc66ff44478.png)
Вернемся к позиционированию элементов на экране. Если вы посмотрите на рисунок вверху в поле "Component Tree", то увидите, что напротив нашего элемента стоит красный кружок с восклицательным знаком. Среда указывает на ошибку. Наш элемент не имеет никакой привязки, поэтому её необходимо сделать. У нашей надписи есть четыре синих кружка. Удерживая мышкой один из них, потащите его к ближайшему краю экрана. Вся надпись притянется к нему и кружок закрасится полностью. Так надо сделать со всеми четырьмя кружками. Тогда вы увидите элемент, привязанный пружинками к краям формы. Теперь нашу надпись можно поместить в любое место нашего экрана. Так же позиционируются и все другие элементы - кнопки, контейнеры и пр. Красный кружок в поле "Component Tree" заменился на желтый треугольник.
![Привязка элемента TextView к краям экрана Привязка элемента TextView к краям экрана](https://habrastorage.org/getpro/habr/upload_files/a51/741/6e7/a517416e768c7bbebe81dde86b772fd6.png)
Таким же способом поместим на рабочее поле кнопку из раздела Common -> Button. В поле "Component Tree" так же как и ранее с надписью, будет красный кружок с восклицательным знаком. Значит надо кнопку привязать. Делаем.
![Выставляем кнопку на рабочее поле Выставляем кнопку на рабочее поле](https://habrastorage.org/getpro/habr/upload_files/fad/2bd/ee5/fad2bdee51f29c89b5baf9e9301710f5.png)
У нас должно получиться примерно следующее.
![Привязка элемента Button к краям экрана Привязка элемента Button к краям экрана](https://habrastorage.org/getpro/habr/upload_files/25e/875/a2b/25e875a2b12df2993c3ca6cd5040e0a3.png)
Меняем свойства элементов
Теперь давайте попробуем что то изменить в нашей надписи. Справа от графического поля имеется поле Attributes. Мы уже видели, что здесь находится Id элементов. Здесь же располагаются все остальные атрибуты. На самом деле, в работе мы будем использовать всего два-три самых важных. Но что бы свободно ориентироваться в них, вам придется их изучить, хотя бы поверхностно. Самым главным атрибутом textView конечно же является поле text. Сейчас в нем стоит надпись TextView, но мы можем записать туда всё что пожелаем. Для кнопки Button в атрибуте text стоит надпись Button (проверьте это сами).
![Атрибут text элемента textView Атрибут text элемента textView](https://habrastorage.org/getpro/habr/upload_files/772/d45/519/772d455192cb09eace65b7a0c88ad10e.png)
Потренируйтесь на досуге менять атрибуты элементов, например их цвет. Вы заметите, что не всё удается поменять, несмотря на казалось бы правильные шаги. Дело в том, что внешний вид программы подчиняется определённому стилю и, что бы всё выглядело красивым, изменение некоторых атрибутов внешнего вида заблокировано. Пока для нас это не важно. Идем дальше.
В этом месте мы немного порассуждаем об устройстве среды Android Studio. Я уже писал, что помимо файла манифеста, который мы пока не трогаем, всё наше приложение будет укладываться в два файла - файл активности (MainActivity.java) и файл макета или шаблона (activity_main.xml). В первом содержится вся логика работы программы, а во втором описывается графика приложения. Но как они связаны? Сейчас мы с этим разберемся.
Перейдем в файл активности. Оно выглядит так как внизу на картинке. Для наглядности, я отделил штриховой чертой код, который нужен для первоначальной инициализации программы. Что бы связать графический элемент с его функциональной частью, необходимо сделать два шага. Во-первых, наша надпись относится к классу TextView, поэтому так и пишем в заголовке нашей программы. А имя нашему элементу дадим textViewData. Это всё равно, что мы сначала говорим, что перед нами человек, а имя ему - Вася Пупкин :-) Но что мы видим? Иногда надпись TextView горит красным.
Это значит, что наш проект пока не умеет работать с таким объектом. Решается всё просто. Сначала надо кликнуть на красный кружок с восклицательным знаком и количеством ошибок (справа вверху). Внизу откроется окно с описанием ошибок. Затем подводим мышку к красной надписи и у нас выскакивает транспарант с предложением импортировать класс (Import class), нажимаем на него и надпись TextView становится черной. Мы добавили класс к проекту. Если теперь нажать три точки возле слова import вверху страницы, мы увидим что в заголовке появилась новая надпись import android.widget.TextView. Иногда среда Android Studio сама автоматом делает эту работу за вас. Почему так - я не знаю, я только учусь :-)
![Ручное подключение класса к проекту Ручное подключение класса к проекту](https://habrastorage.org/getpro/habr/upload_files/64a/d14/a8c/64ad14a8c743d5374e9376d80601e6f5.png)
Вторым шагом инициализации элемента является следующая волшебная запись в теле проекта - textViewData = findViewById(R.id.textView); Если всё сделано правильно, она останется в черно-синих тонах. Android Studio среда достаточно дружественная и при ручном вводе сама подсказывает правильные команды. Не забываем в конце ставить точку с запятой.
![Подсказки среды Android Studio Подсказки среды Android Studio](https://habrastorage.org/getpro/habr/upload_files/08a/da8/dde/08ada8ddedd263f211499db58a98a18c.png)
Этой надписью мы связываем графический элемент textView с его новым именем textViewData. Отныне все обращения к нему будут происходить с использованием данного имени. Напишем снизу ещё одну магическую строчку - textViewData.setText("Привет !!!"); Как нетрудно догадаться, с её помощью мы заменим надпись с дефолтной на "Привет !!!".
![Присваивание новой надписи Присваивание новой надписи](https://habrastorage.org/getpro/habr/upload_files/4e5/c96/3c9/4e5c963c9c2c959474fa1b18932f45dd.png)
Аналогичную процедуру сделаем с кнопкой. В заголовке пишем запись Button buttonMy, а внизу, после записи об инициализации textView, инициализируем кнопку. У вас должно быть так как на рисунке внизу. Первой строчкой мы связываем графический объект button c его новым именем buttonMy. Далее мы создаем обращение к функции, которая обрабатывает нажатие этой кнопки. Сама функция располагается ниже. В ней, для примера, мы выводим в объект textView новую надпись. Всё это выглядит как небольшая магия, поэтому надо немного привыкнуть к названию функций и их стилю. Для наглядности я указал где у нас находятся функции, стартующие при инициализации, а где располагаются остальные.
![Обработка компонента Button Обработка компонента Button](https://habrastorage.org/getpro/habr/upload_files/4a1/01d/95f/4a101d95f4615f96654084c796a5912d.png)
Добавим на поле ещё один элемент - editText (Palette -> Text -> Plain Text) и как обычно, привяжем его к границам экрана. Этот элемент нужен нам для ввода каких либо параметров, хотя он двунаправленный и с его помощью можно так же и выводить данные.
![Добавление элемента editText Добавление элемента editText](https://habrastorage.org/getpro/habr/upload_files/2ca/bfa/803/2cabfa80359073b22f6ae1eacae6a85b.png)
Давайте попробуем, ради эксперимента, поменять название этого графического объекта. Например поменяем его название на editTextRead, написав новое название в поле id справа вверху. В этом случае среда попросит подтвердить наше намерение. После нажатия кнопки Refactor название графического элемента поменяется на новое.
![Изменение названия графического элемента Изменение названия графического элемента](https://habrastorage.org/getpro/habr/upload_files/d71/5d6/e4b/d715d6e4b9135cc8bd211c0683a0e319.png)
Ну и подправим наш Activity. Командой editTextMy = findViewById(R.id.editTextRead); проинициализируем наш editText, а командой editTextMy.setText("Я уверен"); будем записывать новый текст при нажатии кнопки. В итоге получим следующее.
![Текст Activity Текст Activity](https://habrastorage.org/getpro/habr/upload_files/980/be2/770/980be27700f6d16290b3e1529ce99ba0.png)
В принципе, для первого старта программы более чем достаточно элементов. Осталось теперь вывести результат нашей работы на экран телефона.
Подготовка телефона к работе
Здесь мы подходим к выбору отображения результатов работы. Есть два варианта - создать виртуальный прибор (Tools -> Device Manager) или настроить свой телефон для этой работы. Я предлагаю вам сразу пойти по второму пути. Конечно, для нашей первой программы мы можем смотреть результат и на экране монитора, но, во-первых, виртуальный прибор работает очень медленно и требует мощный комп. А во-вторых, в дальнейшем, когда мы будем работать с bluetooth-ом, виртуальный прибор нам ничем не поможет. Поэтому сразу переводим свой смартфон в режим разработчика. Я не буду подробно описывать как это сделать. В сети есть много ресурсов с описанием этого процесса, к тому же он немного отличается для разных телефонов. Вот, для примера, первый, второй и третий источник. Есть так же много видео на эту тему, так что не буду повторяться. В итоге, после подключения смартфона к компьютеру, у меня на телефоне появляется вот такая картинка. Надо выбрать выделенный пункт и затем в разделе Режим работы USB, выбрать Передачу файлов.
![Подключение Android Studio к телефону Подключение Android Studio к телефону](https://habrastorage.org/getpro/habr/upload_files/9af/285/288/9af2852882fee17d348ffa43c5aab642.png)
После этого, вверху справа в среде разработки, мы должны увидеть окошко с именем своего телефона. Я использую телефон BlackView9500Plus, поэтому в окне Device Manager я вижу именно его. Вы увидите что то своё.
![Окно Device Manager с названием телефона Окно Device Manager с названием телефона](https://habrastorage.org/getpro/habr/upload_files/502/f9b/f43/502f9bf43877e86ebdb464ffa0f52a91.png)
Итак теперь у нас всё готово. Нажимаем на зеленый треугольник (красный квадрат) и, после небольшой паузы (смотри указатель процесса Gradle Build Running), видим результат как на самом правом экране, так и на самом смартфоне.
![Вывод изображения на телефон Вывод изображения на телефон](https://habrastorage.org/getpro/habr/upload_files/8af/896/847/8af8968472af1d321859450d1fe9734e.png)
А после нажатия на кнопку видим изменение надписей на элементах
![Приложение поле нажатия кнопки Приложение поле нажатия кнопки](https://habrastorage.org/getpro/habr/upload_files/7db/85a/672/7db85a672b891a3f492ad2906dac2dfc.png)
В принципе, на этом можно было бы уже остановиться. Но для работы с BLE устройствами нам будет необходим ещё один элемент - ListView, поэтому не расслабляемся. Остался последний рывок :-)
Элемент ListView
Выберите элемент Palette -> Legacy -> ListView и поместите его на форму. Он займет сразу всё поле по ширине, но не обольщайтесь, его так же надо будет привязать к границам экрана. Придется немного повозиться, сначала уменьшив его в размере, что бы были доступны синие кружки по сторонам элемента. А после привязки, опять растянув его на весь экран.
![Установка элемента ListView Установка элемента ListView](https://habrastorage.org/getpro/habr/upload_files/465/7f3/d6d/4657f3d6de1df1a1e81c3ca25b96e889.png)
Теперь проинициализируем элемент в нашей Activity.
![Ошибка инициализации ListView Ошибка инициализации ListView](https://habrastorage.org/getpro/habr/upload_files/6ed/067/0c9/6ed0670c9737393822fbdd8db0a32866.png)
Ой, что то не срослось :-) Среда не знает про элемент ListView, хотя в текстовом описании всё нормально, ошибок нет.
![Текстовое представление ListView Текстовое представление ListView](https://habrastorage.org/getpro/habr/upload_files/666/595/93a/66659593a61c52a4c873d6856392f8f9.png)
Я не знаю почему, но иногда Android Studio глючит и приходится как то выкручиваться. Я решил описать этот глюк, что бы вы знали как из него выходить. Иногда помогает переименование графического элемента. Мы это ранее уже делали. Попробуем и сейчас этот трюк. Переименуем элемент в ListView1.
![Переименование элемента Переименование элемента](https://habrastorage.org/getpro/habr/upload_files/ae8/9be/086/ae89be0864a3e279f188c9dbd13d5222.png)
Увы, в этот раз не прокатило. Пойдем другим путем. Синхронизируем проект с Gradle Files. Делается это так: File -> Sync Project with Gradle Files (выделено красным прямоугольником). После этого придется подождать несколько минут и все ошибки будут исправлены.
![Синхронизация проекта с Gradle Files Синхронизация проекта с Gradle Files](https://habrastorage.org/getpro/habr/upload_files/eab/6f2/f60/eab6f2f6046653c3211cd08100971b45.png)
Теперь, когда все ошибки исправлены добавим в наш 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 Добавление к проекту элемента listAdapter](https://habrastorage.org/getpro/habr/upload_files/c66/d02/852/c66d028520265a8625b6965df259e4a7.png)
Но стоит в заголовке добавить название нашего элемента (ArrayAdapter<String> listAdapter;) и импортировать нужный класс, как всё приходит в норму и красный цвет пропадает.
![Добавление класса ArrayAdapter Добавление класса ArrayAdapter](https://habrastorage.org/getpro/habr/upload_files/803/c90/25a/803c9025a1631092b5144c74a63ffd79.png)
Остался последний шаг - нажимаем зеленый треугольник и загружаем проект в телефон. Теперь, если нажать на строку с надписью Январь, это же название появится в строке элемента editTextMy. Попробуйте понажимать и другие строки.
![Загрузка проекта в телефон Загрузка проекта в телефон](https://habrastorage.org/getpro/habr/upload_files/425/555/b3c/425555b3cbed67d571d7b3fcdbcec405.png)
Заключение
В этой, вводной части по андроиду, я постарался провести новичков по самым важным пунктам создания проектов. Я и сам новичок, поэтому возможно у меня есть неточности или ошибки в описании. Тема очень большая, можно писать и писать. Но, я надеюсь, вы получили самое главное - возможность создавать свои собственные проекты в среде Android Studio. Во второй части мы перейдем к самому интересному - будем учиться работать с BLE на андроиде. Осталось только её написать :-) Напоследок дам один совет, он меня не раз выручал. На начальной стадии изучения, каждый свой шаг проверяйте опытом. Т.е. грузите изменённый проект в ваш смартфон. Это позволит отловить одиночные ошибки. Иначе, когда ошибок в проекте будет больше, трудно понять почему программа перестала работать. Ну и больше практики, практики, практики. Удачи, пойду писать вторую часть :-)
Печерских Владимир
Сотрудник Группы Компаний «Цезарь Сателлит»
Комментарии (5)
bBars
19.06.2024 16:07Странно, что ни слова про собственно BLE, даже невооружённым взглядом. Вся эта длинная статья могла бы хотя бы называться по-другому. Разобраться с BLE интересно. Надеюсь, следующая статья не будет про какой-нибудь gradle и альтернативы ;)
utya
Спасибо за статью. Но мне кажется начинать новый проект в 2024 году под Android не используя compose очень странно
pecherskih Автор
Я не вижу в этом ничего странного. Есть принцип от простого к сложному, а Compose - это фреймворк, т.е. надстройка. Для новичков в Андроиде, которым являюсь и я, сначала надо освоить базовые понятия, а потом двигаться дальше
utya
Я с вами спорить не буду, но компоуз это совершенно иной подход. Который сейчас является основным согласна гуглу. И если вы пишите туториал, вы должны хотя бы об этом как-то двумя тремя предложениями сказать. Если это статья, то да это ваше виденье. Вам карты в руки.