OneClickStudio

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

Не так давно моя девушка нарезала мне задачу - добавить ей трафика на интернет. Оба пользуемся симками от МТС (Далее - Яйцо), а тариф с более доступным интернетом на моем номере. Собственно, удобно, раздал от своего номера, и незачем подключать еще одну услугу, тем более я свой трафик не отсиживаю.

Сел значит, с кружечкой чая за комп, и захожу на страничку Яйца. (уже тогда догадывался чуяла моя жопа , что будет интересно)

Краткое предисловие: Данный функционал предоставляется в услуге Единый интернет. По непонятной логике, конкретно интернет вывели совсем отдельно от сайта, и управлять ей внутри центрального портала (mts.ru) не получится. Соответственно, у нее отдельный субдомен, отдельный вход в личный кабинет, и т.д.

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

bonus.mts

lk.mts

internet.mts

Мне же ничего особо делать не надо, все уже настроено, просто передвинуть пару ползунков. Ок. Из Личного кабинета переходим в Личный кабинет Интернета. Но нет! Сайт не отвечает на попытку зайти с основного портала (редирект). Зато загружает какую то хрень на 1.2 Мб, и успокаивается.

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

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

Вроде что то начало получатся. Указываем данные, снова заходим.

А нет! Все такая же фигня.

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

Но нет. Только предложение перейти в браузере на сайт.

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

Ииии! Да сука!

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

Первый сеанс оральных ласок приняла какая то ТП и закрыла чат. Скриншот не сохранил, но звали Елизавета. Очень приятно.

Следующий заказ приняла Полина, но видимо я ее тоже не устроил

Так прошло 10 успешных попыток. Ошибка 403, 500, закрывали чаты, нахуй только не слали все что хотите.

Ладно, мы же хитрые, может в хроме какие то плагины-хуягины  расширения понаставились, и мешают. Грузимся с осла:

А осел завис!

Плюнул, создал пост. Итог - когда что то надо - нихрена не будет работать. Звонить в поддержку, и потратить еще пол часа, чтобы объяснить той же Полинке (19 лет, знаю что такое мышка) не хочу.

@MTCsupport, Вы там как? Есть что добавить?

ПС - Дальний восток. Все, кроме этого гребанного инета работает.

ППС - Добавил пару комментов для минусов. Всегда забываю.

Рассматриваемая на сегодняшнем занятии программа - это попытка мега гиганта Adobe заменить такие приложения, как Sketch, Fluid Ui и кучи других.

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

Но мы сейчас не об этом. Прикидывать новый дизайн будем для клиента интернет магазина Эльдорадо, и немного освежим его.

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

Пару пустых экранчиков мы наклепали, идем дальше. Нам надо нарисовать привычные для каждого устройства status bar и toolbar. А для этого что? Правильно. Нужно залезть в гайды, и вспомнить их размеры.

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

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

И черт меня дернул растянуть toolbar аж до 250dp (вместо положенных 56). Дальше как говориться понеслось, только успевай. Вышло что то наподобие экрана "О приложении".

В целом мне показалось миленьким.

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

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

К примеру, нарисованный ниже за пол часика экран частично берет корни из приложения Google Play Store, часть из программы AliExpress.

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

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

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

Использовал множество ресурсов, в том числе:

- Иконки (https://material.io/icons/)

- Цветовая палитра (https://material.io/guidelines/style/color.html#color-color-palette)

- Библиотеки (https://android-arsenal.com/)

- Общие принципы концепта MD (https://material.io/guidelines/patterns/confirmation-acknowledgement.html#confirmation-acknowledgement-confirmation)

- Cтоковая графика (http://www.freepik.com/)

Ну и в качестве подведения итогов.

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

Скачать можно пока на халяву, ну а дальше вы знаете. Подписка, пиратство, срок.

http://www.adobe.com/ru/products/experience-design.html

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

Всем бобра, до связи! =)

Перво наперво хотелось бы начать с того, что устройств и диагоналей для нашей платформы существует нереальное количество (over 15.000 устройств). Это минус, так как приходится адаптировать приложение как под маленькие устройства, так и под лопаты планшеты.

Гугл же по вопросу адаптации под плашеты, тв, и чайники советует компоновать экраны, и использовать фрагменты:

- Маленький экран, вертикальная ориентация: однопанельный вид с логотипом.

- Маленький экран, горизонтальная ориентация: однопанельный вид с логотипом.

- Планшетный ПК с 7-дюймовым экраном, вертикальная ориентация: однопанельный вид с панелью действий.

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

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

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

- Телевизор, горизонтальная ориентация: двухпанельный вид с панелью действий.

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

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

Итак, открываем студию, к примеру у нас имеется готовый слой для одного экрана телефона (как выше). Создаем точно такой же файл (название идентичное).

Теперь во всплывающем окне мы перетаскиваем параметр Orientation, и назначаем ему Landscape. Отдельно я подчеркнул название, указываем точно такое же как основное.

Теперь в дереве проекта у нас появится такой же файл, но с припиской -land . В моем случае слой уже работает только для 7' планшетов (sw600dp) и только для повернутого экрана (-land).

Что дальше? Следующим шагом необходимо полностью скопировать содержание старого слоя в новый.

Теперь мы сделали разметку для портретного режима. Что будем меняем? Меняем в основном сетку и представление.

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

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

Теперь если внешний вид окна в вертикальном режиме выглядел так (шрифт в TabLayout еще не увеличен):

То для горизонтального уже был переписан (можете использовать TableRow или Linear Layout) в соответствии с нашими нуждами:

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

Мы разобрались с горизонтальным режимом. А как создать макет вертикальной ориентации для планшета? Очень просто. Заходим в папку нашего проекта:

(app/src/main/res)

И создаем новую папку layout-sw600dp

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

Кстати!

Параметр в названии папки sw600dp работает для планшетов с минимальной высотой 600px (например 1024х600).

Для планшетов на 10 дюймов используйте папку res/layout-sw720dp

Вот вроде и все. Если я что то пропустил, не стесняйтесь спросить в комментариях.

Напоследок фото моего котопса:

Всем бобра! =)

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

Пример того, как выглядит анимация:

Следующим шагом будет посещение страницы чувака с ником saulmm (ссылка в конце), смотрим его пример, изучаем, берем нужный код из активности:

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

- Убираем выставление стиля в коде

- Выставляем принудительно портретную ориентацию setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

- Убираем Toolbar через requestWindowFeature(Window.FEATURE_NO_TITLE);

- И добил это дело стилем, который указывается в манифете, где жестко прописал цвет статус бара (для android 5 и выше, и указал, что я точно не хочу видеть toolbar).

Наверное я параноик, раз сделал это дважды.

Теперь нам нужна иконка. Посещаем бесплатный ресурс со стоковой графикой, находим более менее симпатичную иконку с тематикой НГ (ссылка в конце):

Изображение у нас векторное, засовываем его в люстру (Adobe Illustrator), обрезаем под размер иконки для ведроид (512х512), получаем следующее:

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

Теперь осталось только переименовать кнопки, и запустить на устройстве.

Анимация красиво воспроизводится, кнопочки тыкаются.

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

https://github.com/saulmm - гитхаб чувака

http://www.freepik.com/free-vector/christmas-color-icon-set_818976.htm#term=happy new year icon&page=1&position=23 - иконки