Edge-to-edge в Android: делаем правильно
Прошедший Google I/O 2019 принёс массу нашумевших новинок, многие из которых будут влиять на индустрию мобильной разработки в ближайшие годы. Не менее интересно было следить за зарождающимися трендами. Сначала в историю ушли механические клавиши управления, экраны смартфонов становились всё больше, а боковые рамки всё незаметнее. На смену экранным системным кнопкам пришли жесты, оставляя всё больше пространства для потребления контента. Приложения отображаются на всей видимой поверхности дисплея, от нижней до верхней рамки, не стесняя себя условными границами статус-бара и навигационной панели. Мы на пороге эры Edge-to-Edge.
Что такое Edge-to-Edge? Если понимать буквально, это означает, что ваше приложение должно отображаться на всей видимой поверхности дисплея, от нижней до верхней рамки, не стесняя себя статус-баром и нижними кнопками навигации.
Edge-to-edge на примере системной оболочки Android.
Когда речь идёт про Android, простая идея далеко не всегда проста в реализации. В этой статье речь пойдет о том, как по-максимуму использовать всё доступное место на экране любого девайса, независимо от производителя, версии системы и многообразия настроек, которыми так любят радовать пользователей производители устройств из поднебесной (и не только). Код, представленный в статье, был протестирован на более чем 30-ти девайсах нами собственноручно, и на 231 разных устройствах 100 тысячами пользователями наших приложений.
Сама по себе проблема создания edge-to-edge интерфейса не нова и была актуальна задолго до I/O 2019. Наверняка каждый из вас вспомнит, как впервые гуглил что-то из разряда: «android transparent status bar» или «android status bar gradient».
Главными критериями соответствию приложения званию «edge-to-edge» являются наличие:
- прозрачного Status Bar;
- прозрачного Navigation Bar.
Подробнее про них на material.io.
Приложение Deezer не сильно переживает о соблюдении принципов Edge-to-Edge
Важно отметить, что речь не идёт о том, чтобы убрать их совсем, как в «fullscreen mode». Мы оставляем пользователю возможность видеть важную системную информацию и пользоваться привычной навигацией.
Не менее важное требование к решению — масштабируемость и расширяемость. Есть и ряд других:
- Корректно сдвигать экран над клавиатурой, не сломав поддержку adjustResize-флагов у Activity;
- Избегать наложения Status Bar и Navigation Bar на UI-элементы приложения, отображая при этом под ними соответствующий фон;
- Работать на всех девайсах с актуальными версиями Android и выглядеть идентично.
Немного теории
На поиск решения для такой простой, казалось бы, задачи, у вас может уйти неожиданно много времени, объяснить которое проектному менеджеру будет непросто. А когда QA всё же найдут злосчастный смартфон, на котором ваш экран выглядит не «по канонам»…
В нашем проекте мы ошибались несколько раз. Лишь спустя месяц, пройдя через длинную череду проб и ошибок, мы решили проблему раз и навсегда.
В первую очередь, необходимо разобраться с тем, как Android рисует системные панели. Начиная с Android 5.0 было предоставлено удобное API для работы с системными отступами вдоль горизонтальных граней экрана. Они называются WindowInsets, и на картинке снизу они окрашены красным:
Также, разработчиками из команды Android были добавлены слушатели, позволяющие подписываться на изменения этих отступов, например, при появлении клавиатуры. Строго говоря, WindowInsets — это отступы вашего layout-файла от границ экрана. При изменении размеров вашей Activity (split-screen mode, появление клавиатуры) будут меняться и Inset’ы. Таким образом, для поддержки edge-to-edge нам нужно сделать так, чтобы этих отступов не было. Экран с нулевыми WindowInsets будет выглядеть так:
Реализация
В нашей реализации мы будем активно оперировать Window и его флагами.
Все примеры будут написаны на Kotlin, но вы без труда сможете реализовать их и на Java, используя вместо extension-функций утилиты.
Первым делом у корневого элемента верстки необходимо явно установить флаг:
Это необходимо делать для того, чтобы корневой View рисовался под системными элементами, а также для корректных измерений Inset’ов при подписке на их изменение.
Теперь переходим к самому главному — убираем границы экрана! Однако, это необходимо делать очень аккуратно. И вот почему:
- Обнулив нижний Inset мы рискуем остаться без реакции окна на появление клавиатуры: на StackOverflow есть десятки советов по обнулению верхнего Inset’а, но про нижний деликатно молчат. Из-за этого NavigationBar не выходит сделать полностью прозрачным. При обнулении нижнего Inset’а флаг adjustResize перестаёт работать.
Решение: При каждом изменении Inset’ов определять, содержится ли в нижнем высота клавиатуры, обнулять его только в противном случае.
При обнулении Inset’ов, видимые части View будут заезжать под Status Bar и Navigation Bar. Согласно концепции Material Design (и здравому смыслу) в системных областях не должно располагаться никаких активных элементов. То есть, в этой области не должно быть кнопок, полей для ввода текста, чекбоксов и т.д.
Решение: мы добавим listener в listener, чтобы при изменении WindowInsets, транслировать системные отступы в Activity, и реагировать на них внутри, выставляя корректные padding’и и margin’ы для View.
Такое поведение допускать нельзя (Toolbar залезает на Status Bar).
Функция removeSystemInsets() выглядит следующим образом:
Функция calculateDesiredBottomInset() высчитывает нижний Inset с учётом клавиатуры или без неё, в зависимости от текущей конфигурации устройства.
Для проверки высоты клавиатуры используется метод isKeyboardAppeared(). Мы доверились гипотезе, что клавиатура не может занимать меньше четверти высоты экрана. При желании, вы можете как угодно модифицировать логику проверки.
В методе removeSystemInsets() используется listener. На самом деле, это всего лишь typealias для лямбда-выражения. Его полный код:
Следующим шагом является задание прозрачности системным барам:
Скомпоновав все вышеописанное, получаем следующий метод:
Теперь, для включения «edge-to-edge» режима у желаемой Activity, нужно всего лишь вызвать следующую функцию в методе onCreate():
Таким образом, менее чем за 30 строк кода мы достигли «edge-to-edge» эффекта, при этом не нарушая никаких UX-принципов и не лишая пользователя привычных системных элементов управления. Такая реализация может показаться кому-то простой и тривиальной, однако же именно она обеспечивает надёжную работу вашего приложения на любых устройствах.
Добиться «edge-to-edge» эффекта можно ещё примерно сотней разных способов (количество подобных советов на StackOverflow яркое тому подтверждение), но многие из них ведут либо к некорректному поведению на различных версиях Android, либо не учитывают такие параметры, как необходимость отображения длинных списков, либо ломают ресайз экрана при показе клавиатуры.
Ложка дегтя
Решение, описанное в этой статье подходит для всех актуальных девайсов. Под актуальными подразумеваются устройства на Android Lollipop (5.0) и выше. Для них решение выше будет работать идеально. А вот для более старых версий Android понадобится своя реализация, так как про WindowInsets в те времена ещё ничего не было известно.
Хорошая новость заключается в том, что на Android KitKat (4.4) прозрачность системных панелей всё же поддерживается. А вот более старые версии такую красоту не поддерживают вовсе, можно даже не пытаться.
Сконцентрируемся на сдвиге Inset’ов в Android 4.4. Это возможно сделать в методе fitSystemWindows(). Таким образом, главным элементом в вашей верстке должен быть контейнер с переопределенным методом fitSystemWindows, содержащим в точности такую же реализацию, как и у нашего listener’а в примере для актуальных версий Android.
На девайсах с Android 4.4 работает только частичная прозрачность через выставление translucent-флагов:
Эти флаги делают системные бары полупрозрачными, добавляя им небольшой градиент, который, к сожалению, невозможно убрать. Однако, градиент можно превратить в полупрозрачную цветную полосу с помощью этой библиотеки: https://github.com/jgilfelt/SystemBarTint. Она не раз выручала нас в прошлом. Последние изменения вносились в библиотеку 5 лет назад, поэтому она откроет свою прелесть лишь истинным ретроградам.
Весь процесс проставления флагов для Kitkat будет выглядеть следующим образом:
С учётом этого, пишем универсальный метод, который умеет делать системные бары прозрачными (или хотя бы полупрозрачными), независимо от того, на устройстве с какой версией Android запускается приложение:
Под спойлером ниже вы можете увидеть, как семпл, представленный в статье, выглядит на некоторых из проблемных девайсов:
Huawei Honor 8, Android 7.0
Xiaomi Redmi Note 4, Android 6.1
HTC Desire Dual Sim, Android 4.4.2
Samsung J3, Android 7.0
Meizu M3s, Android 5.1
Asus Zenfone 3 Max, Android 6.0
Umi Rome, Android 5.0
Nexus 5X, Android 8.0
Samsung Galaxy S8, Android 9.0
Напоследок хочется сказать, что решение даже такой, казалось бы, простой задачки, как задание прозрачности для элементов системного UI, может протащить вас по всему многообразию подводных камней, и не привести в итоге к желаемому результату, а наоборот, станет причиной появления неприятных багов. Хорошо, что теперь у вас есть эта статья.
Полный листинг программы и семпл работы вы можете найти в нашем git-репозитории.
Материал вдохновлен докладом Chris Banes «Becoming a master window fitter».
Источник
Edge magazine 17+
Future plc
-
- Газеты и журналы: № 193 в этой категории
-
- 3,8 • Оценок: 14
-
- Бесплатно
- Включает встроенные покупки
Снимки экрана
Описание
Covering hardware and software from all over the world, whether it’s online, portable, coin-op, PC or console, Edge covers them all, giving detailed, clear and impartial reviews to tell you what you need to know, not what the developers want you to think.
Join thousands of others and download our free app now!
Once you’ve downloaded our app, you will need to take a free trial or purchase a single issue or subscription to access our in-depth content. We also publish specials and guides — browse our publications, read what interests you most, and get inspired.
Back issues, specials, and future issues are available for purchase within the app. Subscriptions are available on various monthly and annual terms, and auto-renew until you decide to cancel it. You can cancel your subscription at any point. Please check inside the app for current pricing.
*** Please Note: Our digital edition is not printable and does not include the covermount items or supplements you would find with the print edition ***
• The free trial offer is only available to new subscribers. If you have previously subscribed then payment will be taken immediately.
• You can cancel at any time during the free trial period and you will not be charged. Simply turn off auto-renew in your Apple account subscriptions page at least 24 hours before the auto-renew is due.
• Payment will be charged to your iTunes Account at confirmation of purchase.
• Your subscription automatically renews unless auto-renew is turned off at least 24 hours before the end of the current subscription period.
• You will be charged for renewal within 24 hours prior to the end of the current period, for the same duration and at the current subscription rate for that product.
• You can manage your subscriptions and turn off auto-renewal by going to your Account Settings after purchase .
• No cancellation of the current subscription is allowed during active subscription period. This does not affect your statutory rights.
• Any unused portion of a free trial period, if offered, will be forfeited when you purchase a subscription.
• We will be collecting information about your use of the app both when you are online and offline. To find out more please see our privacy policy.
The subscription will include the current issue if you don’t already own it and subsequently published future issues for the duration of your subscription period.
By purchasing a subscription or downloading an app you agree that you have read and accept Future Publishing Ltd’s Privacy Policy and Terms of Use:
Источник
Разделить экран для многозадач 17+
Сделайте две вещи сразу
vishnu rao
-
- Утилиты: № 84 в этой категории
-
- 3,5 • Оценок: 715
-
- 8,99 $
Снимки экрана
Описание
NO Hidden Fee. Pay Once. Stop Constantly Switching Between Apps & Browser Tabs for your online tasks. Get Split Screen now for viewing two things on your iPhone at once.
Приложение для многозадачности Split Screen Multitasking заняло первое место в iPhone и iPad в 46 странах, а также заняло 10-е место в 78 странах, включая США, Китай и Японию, 25-е место в 84 странах и 26–100 в нескольких других. Split View позволяет делать две вещи одновременно. Загрузите DuMore, чтобы перестать постоянно переключаться между приложениями или вкладками браузера для всех ваших онлайн-задач и начать просмотр двух вещей одновременно на разделенных экранах на вашем iPhone и iPad.
Мы любим делать две вещи на многозадачности iPad и iPhone, но до сих пор невозможно было одновременно следить за обеими задачами. Разве вы не хотели одновременно открывать две вещи на своем iPhone и iPad? Теперь вы можете!
DuMore Split Screen Multitasker is designed for your new large screen iPhone and iPads that do not have the native iOS Split Screen, Split View and Slide Over features. The DuMore Split Screen App offers an alt experience similar to using two apps at the same time with web apps, browsers, inbuilt plugins and extensions.
► Download Now! ◄
How will you DuMore with Split Screen View?
— Watch a TV show while you check all your social network accounts — flip left/right in social plugin to easily manage all your social network accounts in a split screen
— Or play Music and check Facebook while checking routes with Google Maps on a road trip!
— How about having the superpower to play your little one’s favorite cartoon while tracking the score
— Imagine keeping one eye on the market, news or data while responding to an email at work
» There are millions of possibilities!
►Download Now!◄
Get most out of the large screen of your iPhone, iPhone Plus or iPad with split screen multitasking.
DuMore comes equipped with all the tools you need for multitasking:
» Social Plugin: Instantly switch between social networks with left/right swipe in a cool cube animation. Access all your social media accounts in one app.
» Child Lock: Control and limit access to web pages, social networks, videos and more.
» File Manager: Download and save files or screenshots in the file manager.
» Download Manager: Desktop-class download manager coming soon.
» Split View Management: Resize, Maximize, Minimize, Add, and Remove Split Tabs.
» Plugins: Full featured mini apps for split screen multitasking experience.
» Extensions: support for Evernote, 1Password, Translate and more apps coming soon.
» Support for Left Handed User: First and only iOS app to support left handed users on iOS. Toggle interface for left-hand or right-hand users in settings.
» Page shot: Full Page screen capture now allows you to turn a full web page into an image. View it in the app or your Apple Photos app.
» And more!
► DuMore has a desktop class screen split browser that includes:
— Smart address box.
— Private Browsing.
— Translator.
— Customizable Home Page.
-Parental Controls.
— Maximize, Minimize, Add or Remove a Tab in split screen view.
— Edge-to-edge full-screen.
— Customizable search box: 1 click access to your favorite search engine.
— Bookmark, History, Reading List.
— Share Link
— Save a complete web page as a pdf.
— And more.
DuMore also helps you recover several GB disk space on your iPhone and iPad by allowing you to remove Facebook, Instagram and other bulky apps that store content you can’t delete.
This is the perfect iPhone split screen app with split screen multitasking browser for your large screen iPhone 7, 6S and iPhone Plus. DuMore brings split screen multi tasking and split view for all iPads, old and new. You don’t have to switch between two apps when you can view two things simultaneously. This is limited to apps that have a website like facebook and twitter. You can also resize the two split view windows or close one split screen tab for an edge-to-edge full screen view of your favorite websites and videos.
Tell us how you use this app and how it can be improved for you, we’re listening.
Источник
