Строка поиска android studio

Ну теперь рискнем запустить нашу программу и посмотреть на результат:

Источник

Добавляем в Android-приложение систему локального поиска

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

Мы расскажем о том, как добавили функцию локального поиска по содержимому существующего приложения и при этом сохранили единообразие пользовательского интерфейса. Мы рассмотрим здесь изменения, внесённые в пользовательский интерфейс и причины этих изменений, так же поговорим о добавлении в элемент класса Activity объекта GestureOverlayView и о создании собственных жестов. Естественно, особое внимание будет уделено поиску.

Подробнее о поиске

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

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

Как нужно отображать результаты поиска, какой макет для этого использовать? Мы начали со списка (объект ListView), сделали его в том же стиле, в котором выполнена корзина покупателя. Однако при таком представлении блюда выглядят не особо привлекательно – виной всему слишком маленькие размеры фотоснимков. Когда мы увеличили размеры изображений в списке, оказалось, что на странице теперь слишком мало места для отображения результатов. В итоге было принято решение разместить результаты поиска в сетке (элемент GridView), поступить так же, как сделано в основной части ресторанного меню, но вместо того, чтобы размещать сбоку большой блок с подробностями о выбранном блюде, мы поместили на всём экране набор продуктов. Это, в частности, помогает быстро отличить страницу с результатами поиска от обычного экрана меню. Для того чтобы посмотреть подробности о блюде, пользователь должен коснуться его фотографии на странице результатов поиска. В ответ на это над страницей появится диалоговое окно (объект DialogFragment), его можно видеть на одном из рисунков, приведенных ниже. Благодаря этому пользователь может быстро вернуться к странице поиска и продолжить просмотр других блюд, просто коснувшись пространства за пределами диалогового окна. Поиск, в идеале, должен выполняться практически мгновенно, без задержек, так как пользователи хотят найти то, что им нужно, как можно быстрее. Иначе они либо не смогут найти то, что хотят, либо им просто надоест ждать результатов, они просто не будут ничего искать и покинут приложение.

Как обрабатывать конфиденциальные данные пользователя? Можно создать систему поиска, которая будет выдавать подсказки, основываясь на введённых ранее поисковых запросах или поиск, для работы которого пользователю нужно будет вводить более или менее подробные сведения о себе. Это поднимает вопросы о том, что другие люди могут увидеть, что именно ищет пользователь, и о том, куда именно отправляются введённые персональные данные. В нашем случае речь идёт о приложении ресторана, поэтому если кто-то узнает, что пользователю нравятся шоколадные пирожные, ничего страшного не произойдёт. Однако есть и проекты, в которых конфиденциальности нужно уделять самое пристальное внимание. В нашем приложении пользователю не нужно вводить никакой информации о себе, не производится логирования поисковых запросов, не ведётся их история.

Поиск в приложении для ресторана

Первый шаг реализации поиска в ресторанном приложении заключается в переработке класса базы данных и добавлении в него метода для построения новой таблицы с результатами поиска. Таблица будет использована для вывода информации на экран. Подробности о базе данных, с которой мы работаем в данном приложении, можно почитать здесь. Поиск по базе данных легко реализовать с использованием SQLite-запросов. Фактически, тут нужно несколько строк кода. Здесь мы выполняем поиск в названиях и описаниях товаров всего, что содержит введённый пользователем поисковый запрос. В качестве результатов поиска мы возвращаем все столбцы базы данных, так как эти сведения понадобятся позже для отображения подробностей о блюде, изображения которого коснулся пользователь. Учтите, что если ваша база данных очень большая, поиск может занять заметное время, поэтому стоит задуматься об отображении прогресс-бара или вращающегося индикатора, чтобы пользователь видел, что приложение работает. Вот метод для выполнения поиска по базе данных.

Теперь нужно доработать нашу главную Activity, включить в ActionBar строку поиска. Для того чтобы узнать подробнее о настройке ActionBar, обратитесь к этому материалу. Поисковый функционал будет полностью реализован внутри приложения. Нам не нужно, чтобы в поиске участвовали другие программы, установленные на устройстве, не надо нам и посылать запрос на поиск некоему внешнему приложению.

Добавим эту строковую переменную в класс MainActivity. Мы будем использовать её для отправки строки запроса в поисковый Intent. Это – переменная класса для добавления дополнительных данных в объект класса Intent.

Теперь обновим метод onCreateOptionsMenu в классе MainActivity. Добавим в него код для инициализации ActionBar:

Теперь добавим класс SearchResultActivity.

Занимаясь построением списка, мы обрабатываем и вариант, когда в результате поиска ничего не нашлось. А именно, если поиск не дал результатов, мы покажем пользователю диалоговое окно, сообщим о том, что произошло и закроем Activity, в которой планировалось отобразить результаты. В итоге пользователь не увидит пустой страницы. Делаем это мы в том же классе SearchResultActivity, ниже дано его продолжение.

Далее рассмотрен адаптер для элемента GridView. Его мы построили на основе похожего кода из основного меню, внеся в него незначительные правки. Кроме того, мы можем доработать и существующие файлы макетов. Построение единообразно выглядящих экранов приложения – одно из преимуществ повторного использования кода, дополняющее отсутствие необходимости создавать каждый экран с нуля. Выше вы могли заметить, что мы повторно использовали класс OrderViewDialogue, изначально, написанный для корзины, но подходящий и здесь. Итак, вот продолжение кода:

Ещё одна деталь, которую стоит рассмотреть – это использование портретной или ландшафтной версии интерфейса. Ниже приведен код файла search_query_grid_results.xml, который находится в папке res/layout-land folder и задаёт ландшафтный вариант интерфейса. Число столбцов (numColumns) установлено в 4. Почти такой же файл для портретной ориентации интерфейса расположен в папке res/layout-port. От ландшафтного варианта он отличается лишь тем, что в нём элементы располагаются в два столбца.

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

Поисковый экран и окно с подробностями о блюде

Обработка жестов

Для того чтобы выйти из окна с результатами поиска, мы хотели бы сдвинуть, смахнуть его соответствующим жестом влево или вправо, так же как при просмотре других страниц в основном меню. Класс GestureDetector отлично работает со списками (ListView), но вот с таблицами (GridView) – нет. Поэтому нам нужно перейти на использование GestureOverlayView.

Для начала нужно создать библиотеку жестов, используя приложение GestureBuilder, которое можно найти среди примеров, поставляющихся вместе с Android SDK. В частности, то, что нам нужно, расположено по адресу android\sdk\samples\android-23\legacy\GestureBuilder.

Для использования приложения его нужно скомпилировать и запустить на устройстве, а затем задать с его помощью имена и конфигурации жестов. После добавления всех необходимых жестов (в нашем случае это скольжение влево, left swipe, и скольжение вправо, right swipe), нужно скопировать файл «gestures» с устройства и поместить в папку res/raw. Приложение подскажет точное расположение этого файла, в нашем случае достаточно было подключить устройство к ПК по USB и заглянуть в корневую директорию.

Приложение Gesture Builder

Скопировав файл с жестами в нужное место, необходимо обновить класс SearhcResultActivity, добавив в него объявления переменных для работы с GestureOverlayView:

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

В качестве анимации мы решили применить overridePendingTransition. Для входящей анимации используется значение 0, что означает отсутствие анимации. Можно создать пустой xml-файл анимации и использовать его, но это приведёт к тому, что система довольно много времени потратит на «размышления» и исходящая анимация будет исполнена слишком быстро.

Вот код файла анимации сдвига влево, move_left.xml. Файл, ответственный за анимацию сдвига вправо, move_right.xml, выглядит точно так же за исключением того, что значение toXDelta неотрицательно.

Обратите внимание на то, что GrivView не может иметь параметр layout_height равный 0dp, когда находится внутри GestureOverlayView, так как он займёт указанные 0dp вместо того, чтобы расшириться, наподобие LinearLayout. Для того чтобы выполнить это требование, в нашем случае, параметр layout_height был установлен в значение fill_parent. Кроме того, нам не нужно, чтобы жесты были видимыми, не нужна нам и задержка, которая вызвана тем, что линия жеста плавно исчезает с экрана. Наши «линии жестов» и так прозрачны, да и лишние задержки нам ни к чему. Поэтому устанавливаем fadeOffset и fadeDuration в значение 0. Ниже показан обновлённый xml-код, задающий взаимоотношения GridView и GestureOverlayView.

Источник

Android programmers blog

Simply about difficult

Поиск по этому блогу

четверг, 5 сентября 2013 г.

Живой поиск в ListView через EditText

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

Для начала создайте новый проект в Eclipse если конечно он у вас установлен, если не установлен то прошу в этот тред, далее если у Вас все хорошо и проект вы создали, открываем файл activity_main.xml и удаляем все что там и копируем вот этот текст:

Это задаст нашему окну красивый вид с списком и полем для ввода вверху, а еще нам нужно создать доп. файл с одним TextView в который будем выводить наш список данных. Его мы назовем list_item.xml и вот что он будет в себе содержать:

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

Открываем наш класс MainActivity.java и вставляем следующий код:

Здесь все просто, создали адаптер, создали ListView, создали массив с данными которые нужно вывести, дальше определили все параметры и вывели текст в адаптере на ListView, если не помните как работает это то советую прочитать мою первую статью про ListView, там все очень щепетильно описано что куда и как работает.

Вот так будет выглядеть программа на данном этапе.

Теперь нам нужно сделать так что бы при введении текста в программе что-то менялось, а что же должно меняться? А должны отсеиваться не подходящие по слову или букве слова. Как это сделать? Для этого нам нужно использовать встроенную функцию Android’a которая называется addTextChangedListener(), она считывает посимвольно каждый раз когда вы вводите текст в поле ввода, т.е. она обновляется каждый раз как вы кликните по какой либо букве на клавиатуре.

Что же, теперь давайте добавим ее в наш код, для этого делаем несколько отступов от последней строчки в onCreate() от этого места lv.setAdapter(adapter); и вставляем следующий код:

Здесь мы используем только один метод, как вы видите это onTextChanged(), как я и говорил ранее он обновляется каждый раз когда вы набираете текст в EditText. Собственно это и все, теперь когда вы скомпилируете программу и пробурите что-то ввести в поле ввода вам выдаст то что вы ищите (если конечно вы будете вводить то что есть в списке (:)

То что будет показывать программа при вводе буквы «S».

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

Источник