Эта статья - продолжение истории про фрилансера Мишу и его знакомство со складными устройствами от авторов - выпускников «IT Школы Samsung». В предыдущей части главный герой осваивал инструментарий Remote Test Lab.
В далеком 2019 году Samsung выпустила Galaxy Fold - инновационный складной смартфон корейской компании. Прошло уже почти 5 лет, а Миша до сих пор ни разу не сталкивался с адаптацией приложений под подобный тип устройств. В первую же неделю выполнения знаменитого фриланс заказа у него возникли проблемы:
Приложение некорректно работало при складывании/раскладывании смартфона
Наш герой не знал, что конкретно подразумевается под “адаптацией”
Если первая проблема решается довольно просто, то вот вторая выглядит неординарно. В связи с этим, Миша решил написать заказчику, на что получил ответ:
Понял Миша, что сначала стоит начать с исправления очевидных багов.
Исправление багов
Пересоздание Activity
Суть бага: введенные пользователем данные сбрасывались при складывании / раскладывании смартфона - типичная проблема, с которой сталкивался почти каждый начинающий Android-разработчик. Если человек при написании кода из SMS, менял конфигурацию устройства, то приложение Activity возвращало свое состояние до начального.
Видимо, приложение делалось в спешке, поэтому для быстрого решения этой проблемы были заблокированы все возможные пути пересоздания Activity. Однако нельзя чисто физически заблокировать смену конфигурации складного смартфона по объективным причинам. Поэтому приложение и ломается на Fold’е.
Решение
Баг Миша исправил с помощью SavedInstanceState.
@Override
protected void onSaveInstanceState(@NonNull Bundle outState) {
outState.putString("currentState", currentState.toString());
outState.putParcelable("user", user);
super.onSaveInstanceState(outState);
}currentState - enum со всеми возможными состояниями активити
user - parcelable с данными о пользователе
Возможное решение
Второй способ сохранить данные перед пересозданием Activity — сложить их во ViewModel. Можно было бы класть все состояния в нее. Но есть одно «но»: изначально в проекте не подразумевалась ViewModel для описываемого Activity, а создавать ее только ради сохранения двух переменных — жесткий boilerplate. Гораздо проще все положить в Bundle в методе onSaveInstanceState.
Проблемы разметки
Суть бага: интерфейс приложения плохо адаптировался под экран необычного размера.
Этот баг, как и предыдущий, является еще более распространенным. Поэтому во всех Layout’ах был выполнен переезд на Constraints.
Ну вот, баги исправлены, а теперь стоит озаботиться непосредственно адаптацией под изменяющийся экран Fold-a.
Для упрощения этого процесса Samsung опубликовал гайдлайны. Основные из них мы сейчас рассмотрим.
Погружение в гайдлайны
Самое главное - отзывчивая верстка
У устройств серии Fold два экрана: внешний и внутренний. Пользователи часто складывают и открывают свои устройства, поэтому нужно, чтобы интерфейс подстраивался под оба экрана. Правильную реализацию такого поведения можно будет переиспользовать на устройствах с большими экранами, например, на планшетах.
Все окей, если приложение корректно:
Отображается на экранах с разным соотношением сторон и размерностью
Ведет себя в горизонтальной ориентации
Заполняет весь экран своим контентом
Также можно почитать:
Не тратьте место впустую
Пользователи часто недовольны, когда приложение просто растягивается на большом экране. Они используют устройства с большими экранами для просмотра большого количества контента одновременно, и точно не для того, чтобы видеть большие вьюхи, растянутые между констреинтами, как в примере ниже.
Как решать эту проблему?
Показывайте больше информации одновременно
Большой экран можно разбить пополам, отделив, например, одну из частей для показа предыдущего узла графа навигации. Такой подход позволяет получить доступ к содержимому без полноэкранного перехода.
Также можно почитать:
Для некоторых приложений будет эффективнее использовать не двух-, а трехкомпонентный макет. Попробуйте представить ваше приложение в обоих вариантах и выберите лучший.
Можно двигаться дальше, если приложение:
Отображает упрощенный контент на свернутом экране
Использует двух/трехкомпонентный макет для максимально эффективного использования свободного места на экране
Раскрывает предыдущие экраны навигации на развёрнутом экране
Позволяйте делать простые вещи, не уходя с экрана
Для простой формы, отображающей небольшое количество контента, стоит использовать всплывающее окно малого размера. Показ поверх предыдущего экрана помогает пользователям выполнить свою задачу и не забыть, над чем они работали.
Используйте плавающие окна для использования нескольких функций одновременно
Если ваше приложение имеет функциональность, которую было бы полезно держать на виду, но которая не требует частого взаимодействия, попробуйте ее вынести в плавающий виджет. В некоторых случаях будет полезно реализовать его отображение поверх других приложений.
Уменьшите расстояние перемещения пальцев
На больших экранах стоит отслеживать места взаимодействия пользователя с интерфейсом. Знание последней точки нажатия позволит открыть диалоговое окно рядом с ней, экономя пользовательское время.
Примеры классно спроектированного интерфейса
Мессенджеры
В приложениях подобного типа можно использовать преимущества двухпанельного режима, настраиваемой разделительной панели и всплывающего окна.
Приложения - камеры
Эти приложения в полной мере используют преимущества больших экранов при съемке.
Приложения для просмотра контента
В таких приложениях можно реализовать много фич, например:
Адаптивный макет, разработанный для разных форм-факторов
Сплит-бар настраивается в многокомпонентном представлении
Используются всплывающие окна
Поддерживается режим Flex для просмотра видео
И это еще не все
На самом деле, мы разобрали лишь основную часть правил и особенностей адаптации мобильных приложений к складным экранам. Если после прочтения этого списка у вас осталось желание копать глубже, то ниже приведен список дополнительных статей, которые отлично дополняют уже изученный материал.
Об авторах
Игорь Ефимов
Всем привет! Меня зовут Игорь, я ученик Томского Государственного университета. В 2021 году я выпустился из «IT Школы Samsung», получив Гран-при в ежегодном Конкурсе по разработке мобильных приложений «IT Школа выбирает сильнейших!» в рамках проекта Samsung Innovation Campus, и уже второй год я работаю в ней преподавателем. Параллельно больше года на фрилансе я разрабатываю нативные приложения под обе мобильные платформы: Android и iOS.
Антон Воробьев
А меня зовут Антон, из IT-школы я выпустился ровно через год после Игоря, в 2022 году. Так же, как и Игорь, победил во всероссийском конкурсе ‘'IT-школа выбирает сильнейших’', взяв Гран-при. Сейчас я учусь в Высшей Школе Экономики и активно развиваюсь в мобильной разработке, чтобы устроиться на свою первую в жизни работу.