Обновление дизайна WhatsCook

Всем привет!

Давно уже ничего не писал, но сегодня у меня отличное настроение и я решил поделиться одной хорошей новостью. Буквально пару дней назад я закончил работу над обновленной версией мобильного приложения под android — «WhatsCook«. Ниже пара скриншотов новой версии, под катом — чуть-чуть подробнее.

Началось все с того, что Google выпустили новую Support-библиотеку для android, которая позволяет использовать некоторые графические компоненты Material Design гайдлайна в старых версиях мобильной ОС. Мне, естественно, было очень интересно ее по-щупать. И у меня очень давно валялись готовые макеты нового дизайна (спасибо неизвестному другу Лео).

Не долго думая (около месяца :-)), я взялся за верстку новых шаблонов. Процесс верстки в android мне очень нравится, поэтому, за пару дней, я сделал прототип в точности повторяющий новый дизайн.

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

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

Следующая проблема с которой я столкнулся — данные в кеше были слишком разрозненными, было много дубликатов картинок и объектов. На каждую фотографию рецепта приходилось по 2 картинки примерно одинакового разрешения. Эта проблема возникала из-за того, что с сервера приложение запрашивает картинки определенного значения. Значение считалось как максимальная сторона экрана в пикселях. При перевороте телефона, максимальная сторона экрана могла изменится (если на телефоне нет хардварных кнопок управления и они отображаются на экране). Я устранил эту проблему, и, т.к. новый дизайн не подразумевает full-screen картинок, теперь использую минимальную сторону экрана. Проблема с дублями в кеше объектов решилась после небольшого рефакторинга.

Ну и последняя проблема: дизайн. Вы не подумайте, дизайн мне очень нравится. Но тут было несколько косяков. Во-первых: в дизайне использовались некоторые свойства объектов, которых у нас нет и не планируется (по-крайней мере пока). Это описание рецепта и примерное время на готовку. Во-вторых: Лео попросил меня добавить новую кнопку, которая не была предусмотрена в дизайне: «Другой рецепт». Поэтому мне пришлось немного по-импровизировать (а дизайнер из меня не очень). Ну, и в-третьих: ресурсы. У меня не было хайрез-картинок, были только картинки и иконки из макета (который, почему-то, был сделан под низкое разрешение). Пришлось немного по-гимпить и по-гуглить чтобы заполучить все необходимые ресурсы во всех необходимых разрешениях.

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