Сейчас включили тестирование нового дизайна.
Чтобы включить нужно в консоле ввести следующее:
1. Переходим на http://youtube.com.
2. Заходим в консоль разработчика (обычно на F12 или в меню браузера средства разработчика), переходим во вкладку Console.
3. Вставляем скрипт, нажимаем Enter и обновляем страницу
Скрипт:
document.cookie="PREF=f6=4;path=/;domain=.youtube.com";
для чёрной обложки нужно включить ночной режим в настройках пользователя
Всем привет!
Начнем без предисловия, давно обещал показать, как же все таки реализуется верстка для планшетных ПК на платформе ведроид Android на уровне макета.
На данный момент адаптирую одно из имеющихся приложений под 7' и 8/10', поэтому буду максимально краток.
Поехали!
*для удобства и наглядности все изображения склеил (телефон и планшет)
Примерно так выглядит экран приложения, который не адаптирован под размер планшета. Коротко говоря - все растянуто. У меня еще не так все плохо, и это уже радует.
Перво наперво хотелось бы начать с того, что устройств и диагоналей для нашей платформы существует нереальное количество (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
Вот вроде и все. Если я что то пропустил, не стесняйтесь спросить в комментариях.
Напоследок фото моего котопса:
Всем бобра! =)
Привет, человеки!
Очень давно ничего не писал по тематике MD (да и вообще в целом), виной тому очень печальный график, по которому пришлось работать, ну и чаще читаю ленту чем пишу в ней что то.
Сегодня речь пойдет про создание splash screen в стиле MD в приложении Gift Exchange для Pikabu, которое я не успел подготовить, @Kpoxaru уже все провернула (и я записался в последний момент), поэтому покажу то, что успел сделать.
Тематикой должна быть актуальная сейчас тема обмена подарками на НГ, которая упростит жизнь организатору, и участнику.
Первым делом, конечно открываем студию, создаем пустую активность, в дальнейшем мы будем брать код с гитхаба, и подгонять стили под свои нужды.
Пример того, как выглядит анимация:
Следующим шагом будет посещение страницы чувака с ником 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 - гитхаб чувака
Привет всем, меня зовут Дима, у меня началось это 1 год назад...
Я приобрел свой первый принтер. Шли дни, я распечатывал необходимые документы, на всплывающее окошко о низком ресурсе кликал "напомнить позже".
Как вдруг ресурс печати иссек... По закону подлости именно в этот день нужно распечатать много документов, идти в платную печать не рентабельно. Нужно купить новый картридж!
В магазин электроники я решил не ходить, так как всем известно что в интернете выгоднее.
Как оказалось, мне предстояло столкнуться с рядом сложностей:
- Какой картридж нужен для моего принтера?
- Что такое совместимый картридж?
- Интернет-магазины с неудобной навигацией, непонятной информацией.
- Ленивые / некомпетентные консультанты.
- Товар в наличии, но приехать забрать сегодня нельзя...
Зародилась идея - создать сервис с подробными характеристиками, удобной навигацией, проверенными интернет-магазинами и товаром в наличии.
На первом же пункте начались трудности, во всем интернете и даже на сайтах производителей:
- к одному и тому же принтеру указывают разные подходящие картриджи;
- у одного и того же картриджа указывают разные характеристики;
Сделал официальный запрос к производителям расходных материалов, прислали таблицы с характеристиками картриджей и их совместимостью с принтерами.
Разработал прототип с использованием материального дизайна.
Остался последний пункт: проверенные интернет-магазины с товаром в наличии.
Я решил рассмотреть интернет-сервисы сравнения цен, так как у них строгие правила размещения на своих площадках, что означает - проверенные магазины.
Свой выбор остановил на Яндекс.Маркет.
Минусов сервисов сравнения цен:
- отсутствуют полные характеристики расходных материалов;
- нет разделения на оригинальные и совместимые;
- нет разделения на комплекты расходных материалов;
- нет разделения на объемы расходных материалов;
- нет информации о совместимости принтера с расходными материалами;
- нельзя добавить свой принтер в личном кабинете, чтобы в будущем не искать его модель и совместимые расходные материалы.
В итоге у меня вот что получилось: https://ink.moscow
Хочется понять, актуален ли данный сервис?
не под все браузеры сделана совместимость, в работе пока что... попробуйте через гугл хром, яндекс браузер, оперу.
Чуть позже будет добавлено:
- бренды "Brother, Canon, Epson, Kyocera, Panasonic, Samsung, Xerox";
- выбор города, сейчас только Москва;
- расходные материалы на карте, с фильтрацией;
- авторизация через социальные сети;
- поиск расходных материалов для этикет-принтеров;
- мобильное приложение.
Открытка в Стиле Material Design!
Девушке исполнялось 21 год , соответсвенно 7+7+7 = 21
На главной странице Google ttcnm кнопка "Мне повезёт!", тут это тоже обыграно) Мол, Наташе всегда везёт! :)
Ну и ещё в игровых автоматах часто бывает в качестве Бинго Bingo, Jack-Pot, Джек-Пот, супер-выигрыша - сочетание цифр: 777, или три семёрки ;)
Подарено Наташе)Несколько недель назад Google начал тестирование нового дизайна для веб-версии YouTube
Захотели попробовать? Отлично! Но тут есть некоторые ограничения:
- Приведённый способ актуален только для браузера Chrome. Возможно, что с некоторыми поправками, он будет работать и на других Chromium-браузерах
- К сожалению, сейчас для этого придётся выйти из своего аккаунта. Лично я использую режим Инкогнито(комбинация Ctrl+Shift+N для Windows)
Если это вас не останавливает, читайте дальше. Вам нужно:
- Открыть страницу YouTube
- Зайти в инструменты разработчика(комбинация Ctrl+Shift+I для Windows)
- Перейти во вкладку "Resources"
- Перейти в "Cookies" -> "www.youtube.com"
- Найти параметр "VISITOR_INFO1_LIVE" и удалить его
- Дальше нужно перейти во вкладку "Console", вставить
document.cookie="VISITOR_INFO1_LIVE=Qa1hUZu3gtk;path=/;domain=.youtube.com";
и выполнить команду нажатием Enter
- Перезагрузить страницу YouTube(комбинация Ctrl+R для Windows)
Всё! Теперь можно закрыть Инструменты разработчика(Ctrl+Shift+I снова поможет) и насладиться новым дизайном
Если материал вызовет интерес, то я расскажу о новом способе поделиться видео в приложениях YouTube для Android и iOS
ВНИМАНИЕ: Работает только если вы вышли из аккаунта.
1. Идем по этой ссылке: https:www.youtube.com/?gl=US
2. Открываем консоль вашего браузера (Ctrl+Shift+I в Google Chrome)
3. Заходим во вкладку Resources или что-то подобное
4. Удаляем куки VISITOR_INFO1_LIVE нажатием клавиши Delete, перед этим выделив
5.Открываем консоль и пишем туда следующую строку
document.cookie="VISITOR_INFO1_LIVE=Qa1hUZu3gtk;path=/;domain=.youtube.com";
6. Нажимаем Enter.
