Material Design - пора обновляться. Coordinator, дубль два.
Привет, человеки!
Наступили долгожданные выходные, на улице щебечут птички (собачки\котятки), а мы усаживаемся за компьютер, и продолжаем кодить.
В прошлый раз мы с помощью говна и палок силы интеллекта интегрировали предиктивный поиск в приложении, на основе имеющихся у нас данных. Сегодня мы поговорим о библиотеке Picasso, о том, как она может пригодиться в обновлении интерфейса. Также я обновлю данные по компоненту Coordinator.
Для затравки - пример того, чего мы добьемся с вами в этот раз:
![Material Design - пора обновляться. Coordinator, дубль два. Android, Программирование, Гифка, Длиннопост](https://cs8.pikabu.ru/post_img/2016/06/18/6/1466243836134346383.jpg)
Перед нами - элемент 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. мои дорогие подписчики! Если я начал выкладывать котиков, значит школота интеллигенция портала жестом однокнопочного рукоблуда руки поставила минусы, и я восполняю баланс в мире =)
Material Design - пора обновляться (Часть 6)
Привет, земляне!
Сразу прошу прощения за столь долгое отсутсвие. В качестве оправдания могу сказать, что меня загрузили на работе по самое нехочу, плюс все это в предверии отпуска, который я совмещаю с будущим предложением руки и сердца той, которая терпит полуночника / полупрограммиста.
В прошлый раз мы вели разговор про обновленный компонент Tabs (Вкладки). Сегодня, как и обещал, я расскажу про умный поиск в приложении, по вводу первых символов. В качестве примера, буду использовать собственное приложение для просмотра сериалов. Полетели!
Для затравки, я покажу пример того, что будет достигнуто в этом посте:
![Material Design - пора обновляться (Часть 6) Android, Программирование, Гифка, Длиннопост](https://cs8.pikabu.ru/post_img/2016/06/11/9/1465657853150573778.jpg)
Итак, перед вами - предиктивный поиск элементов, среди массива списка(ов). Проще говоря, система определяет наиболее подходящий вариант из поискового запроса, которые мы ей указываем.
Что это дает? Ускоренный поиск повышает юзабилити в приложении, решает возможности встроенных библиотек, которые теперь нет нужды использовать, плюс это все завернуто в строке 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. мои дорогие подписчики! Если я начал выкладывать котиков, значит школота интеллигенция портала жестом однокнопочного рукоблуда руки поставила минусы, и я восполняю баланс в мире =)
Игра на Андроид
Здесь есть еще традиция "пятничное мое"? Надеюсь еще есть.
Хочу поделиться своей игрушкой на андроид. Это мое хобби, поэтому не судите строго
В прошлом я уже выкладывал свои попытки создания, в которых я использовал рисование примитивов на канве. Теперь же я использовал движок cocos2d-x.
Идея игрушки:
Я использовал идею из своей старой игры "Битва умов", где нужно сражаться с различными противниками путем ответов на вопросы.
На данный момент есть 8 персонажей, каждый имеет свою уникальную способность, а также сильную и слабую сторону: Геймер, Программист, Киноман, Комик, Инженер, Гуманитарий, Спортсмен, Хипстер
Для вопросов были выбраны такие теми: Компьютерные игры, Информатика, Фильмы и сериалы, История и политика, Наука, Литература, Спорт, Интернет
Первый шаг
Самим сложным этапом для меня стало рисование персонажей и предметов, поскольку я совсем не умею рисовать и никогда не умел. Для рисования я решил использовать программу Inkscape, урок для которой нашел на Пикабу (тут: http://pikabu.ru/story/risuem_banan_v_programme_inkscape_207... , спасибо тебе @SashaChikago). Получилось так себе, но я пытался. Пример персонажа и пример врага ниже.
Нормально анимировать не получилось, потому что перерисовать персонажа в немного другой позе стало для меня невыполнимой задачей. Именно поэтому я решил, что урон будет наноситься молниями с неба. С фоном дела обстояли еще хуже, поскольку все мои идеи я нарисовать не мог, поэтому довелось попросить у Гугла картинку для перерисовки.
Второй шаг
Дальше пошёл процесс программирование. Здесь самой большой трудностью стал баланс. При одних настройках враги уж очень слабые, а при других проще ногу себе отгрызть, чем победить их. Получилось сбалансировать или нет, решать вам.
Третий шаг
На написание вопросов ушло очень много времени, я думал уйдет на много меньше. Часть вопросов я взял с открытых баз ответов на всякие викторины, но, учитывая тематики которые я выбрал, много вопросов пришлось придумать самому. Если игра понравится людям, надеюсь часть из них поможет создавать вопросы)
Четвёртый шаг
Наверно здесь должно быть продвижение игры, но @FirstPhoenix еще не запостил урок на эту тему, к моему большому сожалению. Я только записал видео старта игры, а ее выложил на Google Play -> https://play.google.com/store/apps/details?id=com.tapac1k.bo...
Итоги
Создание игр очень интересное хобби, но для него нужно уделять много времени и сил. Надеюсь с каждым разом у меня будет получаться лучше. Для сравнение прошлый пост:
http://pikabu.ru/story/obnovil_igrushku_vse_taki_bez_sprayto...
Программирование на Android
Серия познавательных (и полезных) материалов о тонкостях настройки, компиляции и дизайна приложений на Android.
В освещении несколько тем:
Дизайн -
http://pikabu.ru/story/material_design__pora_obnovlyatsya_4156400
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_2_4172654
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_3_4178810
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_4_4198359
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_5_4215136
Программирование -
http://pikabu.ru/story/programmiruem_mobilnyiy_spravochnik_chast_1_maketyi_4032797
http://pikabu.ru/story/programmiruem_prilozhenie_pikabu_dlya_android_chast_5_dizayn_4014466
http://pikabu.ru/story/programmiruem_prilozhenie_pikabu_dlya_android_chast_4_4001359
http://pikabu.ru/story/kak_smotret_pikabu_v_telefone_bez_reklamyi_chast_3_3988916
http://pikabu.ru/story/kak_smotret_pikabu_v_telefone_bez_reklamyi_chast_2_3969264
http://pikabu.ru/story/zadolbalo_ili_kak_smotret_pikabu_v_telefone_bez_reklamyi_3942031
Тестирование -
http://pikabu.ru/story/liga_pomoshchi_nuzhnyi_testeryi__pechenka_4181566
Мой опыт создания игры
Хотелось бы поделиться своими опытом создания игры с 0.
Давно прочитав пост о создании приложения и найдя дополнительной мотивации я преступил к созданию....и тут же остановился. Я понял что, в одиночку это сделать архи сложно. Так у нас образовалась команда в 3 человека: сценарий, кодинг и визуал.
Когда мы только начинали создавать концепты игры у нас было много идей и предложений: от 3D раннера до RPG. Остановившись на таком жанре как текстовы квест началась разработка сценария.
По ходу создания сценария были придуманы основые фишечки игры: загадки, вариативность действий, скил поинты(часть от идеи с RPG). Ксати, по части кодинга. Делали все это с абсолютного 0 в Android Studio. Все информация по созданию искалась в интернете, как самые полезные ресурсы в русском сигменте хотелось бы выделить этот и этот ресурсы. По части решения возникших проблем самым полезным был даный сайт.
В целом, обладая начальными знаниями программирования и знанием HTML(знание которого понадобится при составлении разметки) понять основные принципы Java не составило труда.
Полный туториал я расписывать не буду, ибо я кармадрочер просто не шарю в кодинге. На моих плечах был груз ответственности за сценарий, сюжетные ходы, загадки, головоломки и общую вселенную если ее так можно назвать. На фото выше собственно представлены фрагменты.
Визуал был одной из важных частей процесса разработки, ибо просто читать историю, как оказалось, очень скучно. Отказаться от 3D и анимаций было очень трудным решением давшимся нам с болью в сердце. Весь визуал делали в Adobe Photoshop. Часть (заставку) монтировали в Sony Vegas. Как и звуковые эффекты.
Разработка вы итоге велась в течении 3-х месяцев. Если бы не сессия и работа то, я думаю, за 2 месяца смогли бы. Большее кол-во времени было потрачено на собраться всем для лучшей координации действий.
Не понятно почему, но только в самом конце разработки мы задумались о названии. Уже при готовом apk файле, при активированном аккаунте разработчика на Google Play мы начали ломать голову по поводу названия. Примерно за час обсуждения не было выбрано ни одного варианта, но тут чья то светлая голова предложила "Лимб: Путешествие в ад". Доволько лаконичное и мрачноватое названия, подходившее под визуальный стиль игры.
Саму игру вы можете найти в Google Play. Будем рады конструктивной критике и отзывам. Спасибо за внимание.
Программирование на Android.
Серия познавательных (и полезных) материалов о тонкостях настройки, компиляции и дизайна приложений на Android.
В освещении несколько тем:
Дизайн -
http://pikabu.ru/story/material_design__pora_obnovlyatsya_4156400
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_2_4172654
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_3_4178810
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_4_4198359
http://pikabu.ru/story/material_design__pora_obnovlyatsya_chast_5_4215136
Программирование -
http://pikabu.ru/story/programmiruem_mobilnyiy_spravochnik_chast_1_maketyi_4032797
http://pikabu.ru/story/programmiruem_prilozhenie_pikabu_dlya_android_chast_5_dizayn_4014466
http://pikabu.ru/story/programmiruem_prilozhenie_pikabu_dlya_android_chast_4_4001359
http://pikabu.ru/story/kak_smotret_pikabu_v_telefone_bez_reklamyi_chast_3_3988916
http://pikabu.ru/story/kak_smotret_pikabu_v_telefone_bez_reklamyi_chast_2_3969264
http://pikabu.ru/story/zadolbalo_ili_kak_smotret_pikabu_v_telefone_bez_reklamyi_3942031
Тестирование -
http://pikabu.ru/story/liga_pomoshchi_nuzhnyi_testeryi__pechenka_4181566
Поиграем в бизнесменов?
Одна вакансия, два кандидата. Сможете выбрать лучшего? И так пять раз.
Не ругайте программиста за рекламу.
Хочу приоткрыть вам завесу тайны про рекламу в мобильных приложениях.
Все наверняка думают, что программисты оборзели, пихают рекламу куда угодно, по десять штук на экран. Сволочи, гребут миллионы, а программа плохая. =) Честно скажу, сам тоже раньше так думал. До тех пор пока сам не сделал программку.
Моя жена была в прошлом году беременна, ждали пополнения к новому году. Последние месяцы беременности, скажу вам, очень томительны как для мамы будущей, так и для отца. Голову надо срочно чем-то занять, иначе роженица чего доброго такого себе надумает сидя дома, что поседеешь.
Короче говоря начали делать программу для беременных мадам. Прям вот так, как хотела жена. Сам я режиссер на телеке, в программировании как рыба в кастрюле - не очень.
Вобщем обоюдными усилиями прям к рождению ребеночка доделали большую программу с кучей подробных статей (которые кстати сама жена и писала, параллельно вычитывая тонны статей и форумов) и несколькоми модулями - календари, счетчики всякие. Дизайн тоже делали всей округой. И ребята на работе помогали, и родители, и друзья. Сами освоили Illustrator. Вобщем получилось чудесно. Ну правда. =) В программку воткнули один маленький рекламный блок. Аккуратно и ненавязчиво. Решили плотно зарабатывать. Ага... =)
А теперь к сути. К подсчетам.
Итого, было потрачено:
- 3 месяца работы с кучей споров и нервов (с выходными)
- 1 месяц распихивания рекламных постов где только можно (и контакт, и фейсбук, и форумы, и иностранные)
- 2500 рублей за переводы всех статей на английский язык
- 25 баксов за аккаунт разработчика в Гугл плей
- 500 рублей на рекламу в одной группе в контакте
- 3000 рублей на раскрутку в рекламной сети.
Итого было получено:
-10000 установок приложения и...
- 24 доллара. Карл. За полгода. За рекламу.
Вобщем, это было конечно интересно. Программирование, баснословные прибыли. Но больше всего это фан, конечно. Не ругайте программистов за рекламу. По своему опыту скажу, что они не окупают затраты свои...
ПыСы: снять эти 24 бакса нельзя. Гугл не разрешает. Надо минимум 100 снимать. Смех да и только. =)