Научный руководитель: Вильданов Алмаз Нафкатович
к.ф.-м.н., Уфимский университет науки и технологий, Нефтекамский филиал
Введение
В современном мире мобильные приложения стали неотъемлемой частью повседневной жизни человека. Одним из ключевых аспектов успешного приложения является удобство его использования, включая интуитивно понятные элементы ввода данных. Функция автозаполнения позволяет значительно ускорить процесс ввода информации и снизить количество ошибок со стороны пользователя. В операционной системе Android для реализации данной функции предусмотрен специальный элемент интерфейса – AutoCompleteTextView, который представляет собой расширение обычного текстового поля EditText с возможностью отображения выпадающего списка подсказок.
Целью данной работы является создание демонстрационного мобильного приложения, иллюстрирующего принципы работы с AutoCompleteTextView на примере справочника косметических средств. Приложение позволяет пользователю вводить название косметического продукта, получая при этом подсказки из предварительно заданного списка.
Инструментарий и среда разработки
Для разработки приложения использовалась среда Android Studio – официальная интегрированная среда разработки для платформы Android. Приложение написано на языке Java с использованием Android SDK. В качестве целевой платформы выбрана актуальная версия Android с поддержкой библиотеки AndroidX, обеспечивающей обратную совместимость приложения с более ранними версиями операционной системы.
Структура проекта
Проект состоит из двух основных файлов:
- MainActivity.java – главный класс активности, содержащий логику работы приложения
- activity_main.xml – файл разметки, определяющий пользовательский интерфейс
Разработка пользовательского интерфейса
Пользовательский интерфейс приложения создается с использованием декларативного подхода в XML-файле разметки. Корневым элементом выступает ConstraintLayout, который обеспечивает гибкое позиционирование дочерних элементов. Внутри него размещается LinearLayout с вертикальной ориентацией, центрирующий содержимое на экране:
<androidx.constraintlayout.widget.ConstraintLayout
xmlns:android=”http://schemas.android.com/apk/res/android”
xmlns:app=”http://schemas.android.com/apk/res-auto”
android:id=”@+id/main”
android:layout_width=”match_parent”
android:layout_height=”match_parent”>
<LinearLayout
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:orientation=”vertical”
android:gravity=”center”
android:padding=”24dp”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”parent”>
Интерфейс содержит два основных элемента. Заголовок приложения реализован с помощью TextView с текстом “Косметика”, увеличенным размером шрифта 24sp и полужирным начертанием:
<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:text=”Косметика”
android:textSize=”24sp”
android:textStyle=”bold”
android:layout_marginBottom=”32dp” />
Основной элемент – AutoCompleteTextView с идентификатором autoCompleteTextView2. Ему заданы параметры ширины на весь родительский контейнер, отступы для удобства касания, фон в виде стандартной рамки для редактирования и порог срабатывания автозаполнения, равный одному символу:
<AutoCompleteTextView
android:id=”@+id/autoCompleteTextView2″
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:hint=”Введите название косметики”
android:inputType=”text”
android:padding=”12dp”
android:background=”@android:drawable/editbox_background”
android:completionThreshold=”1″ />
Реализация логики приложения
Логика приложения реализована в классе MainActivity, наследующемся от AppCompatActivity. Вначале объявляется массив строк с названиями косметических продуктов, которые будут служить источником данных для автозаполнения:
public class MainActivity extends AppCompatActivity {
String[] seaFish = {
“Мицеллярная вода”,
“Тоник для лица”,
“Сыворотка с гиалуроновой кислотой”,
“Крем для век”,
“Пилинг-скатка”,
“Тональный крем”,
“Консилер”,
“Тушь для ресниц”,
“Матовая помада”,
“Скраб для тела”,
“Масло для волос”,
“Шампунь для объёма”,
“Парфюмированная вода”
};
}
Метод onCreate является точкой входа в активность. В нем производится инициализация интерфейса с помощью setContentView, подключение режима EdgeToEdge для использования всей площади экрана и настройка отступов для системных панелей:
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
EdgeToEdge.enable(this);
setContentView(R.layout.activity_main);
ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main), (v, insets) -> {
Insets systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars());
v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom);
return insets;
});
}
Настройка AutoCompleteTextView
Ключевым моментом в разработке является правильная настройка элемента автозаполнения. Сначала производится поиск элемента по его идентификатору:
AutoCompleteTextView autoCompleteTextView = findViewById(R.id.autoCompleteTextView2);
Важно отметить, что в исходном коде используется идентификатор autoCompleteTextView2, который должен соответствовать идентификатору, указанному в XML-разметке. Это обеспечивает связь между логикой приложения и пользовательским интерфейсом.
Далее создается адаптер массива ArrayAdapter, который связывает данные (массив строк с названиями косметики) с элементом интерфейса. В качестве макета для отображения элементов выпадающего списка используется стандартный системный макет simple_dropdown_item_1line:
ArrayAdapter<String> adapter = new ArrayAdapter<>(
this,
android.R.layout.simple_dropdown_item_1line,
seaFish
);
После создания адаптера он устанавливается для AutoCompleteTextView с помощью метода setAdapter. Метод setThreshold(1) определяет минимальное количество символов, которое должен ввести пользователь для появления подсказок. Значение 1 означает, что выпадающий список будет появляться после ввода первого же символа:
autoCompleteTextView.setAdapter(adapter);
autoCompleteTextView.setThreshold(1);
autoCompleteTextView.setHint(“Введите название косметики”);
autoCompleteTextView.setText(“”);
Обработка ошибок и проверка наличия элемента
В коде предусмотрена проверка на null для элемента AutoCompleteTextView. Это делается для предотвращения возможных ошибок, если по какой-то причине элемент с указанным идентификатором не будет найден в разметке:
if (autoCompleteTextView != null) {
// настройка адаптера и параметров
}
Принцип работы приложения
При запуске приложения пользователь видит экран с заголовком “Косметика” и полем ввода с подсказкой “Введите название косметики”. Когда пользователь начинает вводить текст, система автоматически фильтрует массив данных и отображает выпадающий список с подходящими вариантами. При выборе одного из вариантов текст автоматически подставляется в поле ввода.
Механизм автозаполнения работает следующим образом: при каждом изменении текста в поле ввода AutoCompleteTextView передает введенный фрагмент адаптеру, который, в свою очередь, фильтрует массив данных, оставляя только те элементы, которые содержат введенную подстроку. Отфильтрованный список отображается в выпадающем окне.
Особенности реализации
В процессе разработки были учтены следующие важные моменты:
- Использование AndroidX – библиотека обеспечивает совместимость с различными версиями Android и предоставляет современные компоненты интерфейса.
- EdgeToEdge – режим позволяет приложению использовать всю область экрана, включая области под системными панелями.
- Обработка отступов – правильная настройка отступов гарантирует, что содержимое не будет перекрыто системными элементами (строка состояния, навигационная панель).
- Проверка наличия элемента – защита от возможных ошибок при поиске view по идентификатору.
- Выбор макета для выпадающего списка – использование системного макета simple_dropdown_item_1line обеспечивает единообразный внешний вид с другими приложениями Android.
Результат работы
В результате выполнения работы было создано функционирующее мобильное приложение для Android, демонстрирующее работу элемента AutoCompleteTextView. Приложение позволяет пользователю вводить названия косметических средств с функцией автозаполнения, что ускоряет процесс ввода и исключает возможность орфографических ошибок.
Интерфейс приложения интуитивно понятен и соответствует рекомендациям Material Design. Приложение корректно отображается на различных устройствах благодаря использованию ConstraintLayout и правильной обработке системных отступов.
Заключение
В ходе выполнения работы были изучены и практически применены следующие аспекты Android-разработки:
- создание пользовательского интерфейса с использованием XML-разметки;
- работа с элементом AutoCompleteTextView и его настройка;
- использование ArrayAdapter для связывания данных с элементами интерфейса;
- обработка системных отступов для корректного отображения на различных экранах;
- применение современных библиотек AndroidX.
Разработанное приложение может служить основой для более сложных проектов, требующих функционала автозаполнения, например, справочников, каталогов товаров, поисковых систем и других приложений, где пользователю необходимо выбирать значения из заранее известного списка.