Android Developers

Привет, человеки!

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

Сегодня разговариваем про Swipe to Refresh

Итак, Swipe to Refresh - модная фишка для многих смартфонов на всех операционных системах. Тянем экран вниз/вверх - контент обновляется. Удобно, прикольно, сопровождается клевой анимацией, которую мы будем повторять:

Долго кота за яйки тянуть не буду, программируем в том же Pikabu (может когда нибудь доведу до ума).

Создаем активность, где в дальнейшем планируется что то обновлять, пишем код в слое XML:

(не забудьте добавить для поддержки в Gradle)

compile 'com.android.support:support-v4:22.2.0'

Так как слой присутствует в компоненте поддержки, но его нет на панели инструментов в студии, вводить приходиться вручную

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

А теперь добавим немного кода:

Что происходит?

1 - Инициалзируем + находим слой по id

2 - Устанавливаем слушатель

3 - Задаем палитру цветов (каждый оборот кружочка - новый цвет)

Код слушателя:

Что происходит?

Один метод - onRefresh - указываем действие, что душе угодно.

Так как я использую это нововведение в мини браузере, то у меня этот метод обновит страницу согласно методу reload().

Кстати, цифра 3500 - это время в миллисекундах, которое колесико будет крутиться.

Смотрим что получилось на реальном устройстве:

Все шуршит, и обновляется.

Пост получился короткий, но всем по обычаю спасибо за интерес. В следующий раз поговорим о Drawable Selector. Его хочу описать потому, так как использую всвязи с изменением графики для первой простейшей игры.

Также напоминаю, что действует конкурс, по окончанию которого я бесплатно исполню желание людей, которым необходим сайт или приложение для вашего стартапа.

Всем бобра!

Привет, товарищи!

В сегодняшнем посте мы рассмотрим два вопроса по дизайну. Во первых, я покажу еще один пример по Coordinator, а также мы прокачаем строку поиска, в соответствии с гайдлайнами.

Полетели!

Для затравки покажу то, чего мы добьемся в конечном итоге:

Называется такое чудо flexible space. Общий принцип в в том, что по мере скроллинга пальцем изображение, загруженное в CollapsingToolbar'е, скрывается вместе с этой панелью.

Мы немного улучшим изображение, наложив на него фильтр. Таким образом оно будет иметь оттенок из нашей цветовой палитры.

Работать будем в приложении Pikabu Free, которое в скором времени получит индекс 2.3

Открываем студию, создаем активность, открываем слой xml:

Разметка в слое следующая (описываю только наш пример, мои кнопки и дополнительные виджеты туда не входят):

- CoordinatorLayout

-- AppBarLayout

--- CollapsingToolbarLayout

---- ImageView

----- Toolbar

( закрываем все слои в обратном порядке )

------ FloatingActionButton

Хотелось бы добавить, что к атрибуту ImageView мы добавляем параметр android:tint="#BB689F38", это наше будущее затемнение.

А у слоя CollapsingToolbarLayout параметр android:layout_height="300dp", это его общая ширина.

Теперь открываем класс активности, вставляем код. Ссылка на гитхаб будет в конце статьи, поэтому не списывайте =)

Проверяем. Откроем на реальном устройстве, предварительно загрузив изображение:

Отображается реальная ширина CollapsingToolbarLayout (300dp). Если будем скроллить, он спрячется вместе с FAB, и останется только Tollbar

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

Выглядит примерно так:

ШАГ 2 - ПОИСК

Теперь займемся поиском. Я расскажу о нем вкратце, фишка в том, что я использую стороннюю библиотеку, которая намного упрощает жизнь.

Пример такого поиска можно посмотреть в Google Chrome, при вводе адреса

Импортируем библиотеку в Gradle:

Вставляем в конце файла (XML) виджет поиска. Почему так? Так как поиск будет на весь экран, соответственно ему требуется match_parent на ширину и высоту, и он будет некорректно отображаться внутри других слоев

В коде нужно добавить три слушателя:

- setOnQueryTextListener (слушает нажатия на клавиатуру, и на кнопку подтверждения)

- setSearchViewListener (слушает состояния поиска - открыт / закрыт / неактивен)

- setOnItemClickListener (слушает нажатия на предыдущий поиск)

И вроде все. Компилируем все это дело, загружаем на устройство, проверяем:

Нажимаем на значок поиска. Он раскроется на весь экран с приятной анимацией:

На сегодня все, спасибо за интерес.

https://github.com/Mauker1/MaterialSearchView - библиотека поиска на гитхабе

https://github.com/saulmm/CoordinatorExamples - библиотека примеров MD, которые я описываю

Также напоминаю, что действует конкурс, по окончанию которого я бесплатно исполню желание людей, которым необходим сайт или приложение для вашего стартапа.

Всем бобра!

Привет, человеки!

Наступили долгожданные выходные, на улице щебечут птички (собачки\котятки), а мы усаживаемся за компьютер, и продолжаем кодить.

В прошлый раз мы с помощью говна и палок силы интеллекта интегрировали предиктивный поиск в приложении, на основе имеющихся у нас данных. Сегодня мы поговорим о библиотеке Picasso, о том, как она может пригодиться в обновлении интерфейса. Также я обновлю данные по компоненту Coordinator.

Для затравки - пример того, чего мы добьемся с вами в этот раз:

Перед нами - элемент Coordinator. Я уже рассказывал о нем до появления сообществ, поэтому дублировать информацию, и засорять пост не буду. При желании, загляните в мой профиль.

Программировать мы будем на примере приложения Pikabu для Android - мое первое творение, выложенное на всеобщее обозрение на этом портале.

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

Пример, который я описываю, имеет собственные исходники на гитхабе, и представляет собой ознакомительный код с презентации Google I/O. На его основе вы можете повторить мои шаги.

https://github.com/saulmm/CoordinatorExamples

Итак, после создания активности, нам нужно рассмотреть, что нам необходимо координировать. На гифке присутствует ImageView + CircleImageView, TabLayout + текстовые поля + Toolbar. Дохрена. Вот как это выглядит в файле разметки:

- CoordinatorLayout

-- AppBarLayout

--- CollapsingToolbarLayout

---- ImageView

-----CircleImageView (отдельная библиотека)

------Toolbar

-------LinearLayout

--------TextView

-------/LinearLayout (закрыли)

---------TabLayout

/закрываем все остальное

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

Как выглядит это на практике, в эмуляторе (я заранее подготовил простую круглую картинку в формате png):

Верхняя часть экрана(до иконки) у нас не занята - туда мы затолкаем изображение, которое будем грузить из сети при помощи Picasso. Это отдельная (и довольно популярная) библиотека, которая пользуется невероятным спросом среди разработчиков.

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

Загружаем картинку:

Вот и все. Три строчки кода (не считая объявления imageview), и изображение будет загружено при посещении активности, а при повторном запуске оно подгрузится из кеша.

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

Нам необходимо создать два класса, для каждой из вкладок. Я не напрягал мозг, и назвал их Tаb1 и Tab2. Профит.

В коде ничего сверхъестественного нет, объявили класс, и назначили слой для него. Аналогично поступаем со второй вкладкой, только меняем названия.

Далее, нам в коде главной активности потребуется ViewPager и встроенный класс ViewPagerAdapter, которые обеспечат работу с вкладками.

Запускаем на устройстве, проверяем, что все загружается (во фрагмент с любовью были добавлены кнопки, которые я позже заставлю тыкаться):

Все шуршит, и скроллится вправо\влево.

P.S. на старых версиях Android (до API 21) нет понятия android:elevation, поэтому круглая картинка будет обрезаться пополам. Чтобы этого косяка избежать, я просто убрал ее для старых версий:

Вот и все на сегодня. Обновление приложения будет в близжайшие дни, как только я закончу все проверять.

Спасибо, что дочитали до конца! В следующий раз мы поговорим о горизонтальной ориентации для планшетов, и я покажу еще один крутой пример по Coordinator.

P.S. мои дорогие подписчики! Если я начал выкладывать котиков, значит школота интеллигенция портала жестом однокнопочного рукоблуда руки поставила минусы, и я восполняю баланс в мире =)

Привет, земляне!

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

В прошлый раз мы вели разговор про обновленный компонент Tabs (Вкладки). Сегодня, как и обещал, я расскажу про умный поиск в приложении, по вводу первых символов. В качестве примера, буду использовать собственное приложение для просмотра сериалов. Полетели!

Для затравки, я покажу пример того, что будет достигнуто в этом посте:

Итак, перед вами - предиктивный поиск элементов, среди массива списка(ов). Проще говоря, система определяет наиболее подходящий вариант из поискового запроса, которые мы ей указываем.

Что это дает? Ускоренный поиск повышает юзабилити в приложении, решает возможности встроенных библиотек, которые теперь нет нужды использовать, плюс это все завернуто в строке Toolbar, и классно выглядит. Пример на обновленном устройстве выглядит так:

Как можно узреть, нам дается список из сериалов, и по вводу первых символов нам предлагается наиболее подходящий результат. Если ввести слово, которое отсутствует среди массива, мы ничего не увидим, так как я не знаю сериала гладиолус. И приложение тоже.

Давайте залезем в студию, и посмотрим, как это делается. Создаем Basic Activity

После того, как мы создали активность, нам необходимо реализовать список. Для этого мы объявляем компонент ListView, указываем его местонахождение в слое, и присваиваем значения для элементов.

DANGER! Не повторяйте описанный мной способ реализации строк в коде - это неправильно, используйте файл strings. Сейчас, обновляя приложения для стран, кроме России, я лью слезы, и все переделываю.

После того, как мы отобразили список в нашей активности, мы реализуем кнопку в Toolbar - именно нажатие по ней вызывает необходимый код для поиска.

Описывать тут практически нечего, мы объявляем компонент searchManager, который в свою очередь возвращает значение в методе onQueryTextChange(String s).

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

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

Опять таки, я не рекомендую использовать именно такой код, так как он сильно нагружает ЦП (центральный процессор) на вашем маленьком смартфоне. Почему?

Представим, что в списке 20 элементов. Такая функция, как сравнение текста

if (((TextView) view).getText() == "Сверхъестественное")

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

if (position == 4) {

В таком случае ничего не потеряется.

Друзья! Спасибо за то, что дочитали до конца. В связи с обновлением на Pikabu, было создано сообщество Android Developers, куда я предлагаю вступить заинтересованным личностям. Все посты теперь будут публиковаться там.

Также, я совсем забыл упомянуть о ништяках для людей, которые помогали мне в этом посте. Я про вас не забыл! На вашу почту скоро упадет обновленное приложение, и личная благодарность за то, что откликнулись на мой месадж.

В следующий раз пост будет красочнее, так как мы поговорим о библиотеке для загрузки/отображения изображений.

P.S. мои дорогие подписчики! Если я начал выкладывать котиков, значит школота интеллигенция портала жестом однокнопочного рукоблуда руки поставила минусы, и я восполняю баланс в мире =)