Всем привет, на связи Роман Бобков, тестировщик из проекта Wibes. В своей статье я решил поделиться личным опытом тестирования верстки и layout на Android и теми инструментами, которые можно использовать для этого.
Проблемы тестирования верстки на Android
Хотел бы сперва поговорить о проблемах, с которыми сталкивается тестировщик, когда нужно протестировать новую фичу, связанную с созданием новых UI-элементов.
Отсутствие devtools как в браузере
Когда открываешь новую сборку и начинаешь сравнивать новый экран с макетами, понимаешь, что хотелось бы посмотреть такие свойства как:
цвет (желательно в hex формате);
размер шрифтов;
отступы между элементами;
высоту элементов.
Т.к. в Android такой встроенной возможности нет, то остаётся либо определять всё это на глаз (что не лучший вариант), либо использовать вспомогательные инструменты, именно поэтому я и пишу данную статью.
Разные диагонали/размеры экранов
Сейчас есть очень много разных моделей телефонов с различными размерами экранов. Например телефоны, которые раскладываются в «большие лопаты», или наоборот, могут складываться в «маленькие экраны». Всё это, конечно, нужно учитывать при тестировании.
Построение матрицы моделей телефонов (device martix) — это немного отдельная тема, но к нашей тоже относится. Если нет возможности и ресурсов тестировать на физических устройствах, тогда в ход идут симуляторы и фермы, которыми можно пользоваться.
Настройки масштаба шрифта
Изменение настроек по увеличению шрифта — не самый популярный кейс, поэтому многие упускают это при тестировании. На мой взгляд, тут стоит учитывать несколько факторов, один из которых — целевая аудитория продукта: если продукт нацелен на широкую аудиторию (в том числе людей в возрасте), то это обязательный кейс на проверку, т.к. люди со слабым зрением часто пользуются увеличением шрифта для удобства использования.
Немного теории
Перед тем как перейти к инструментам, хочется рассказать немного «базы» про единицы измерения на Android.
Плотность пикселей dp/dip (density-independent pixel)
Это единица измерений показывает сколько пикселей есть в 1 dp, т.е. плотность пикселей.
Как видно на картинке, в 1 dp может быть разное количество пикселей. Телефоны с плохими дисплеями (чаще дешевые смартфоны), имеют маленькое количество px (пикселей), а телефоны с хорошими дисплеями (чаще всего дорогие смартфоны и флагманы) имеют больше px на 1 dp.
Dp — универсальная единица измерения, она «подстраивается» под экран. Если бы разработчик указывал отступы, размеры в пикселях, то на дисплеях разных размеров и плотности пикселей верстка бы ломалась. Работая с dp мы спасаем себя от таких «сюрпризов».
Единица измерения текста sp (scale-independet pixel)
Sp учитывает настройки размера шрифта в системе. Если sp может увеличиваться/уменьшаться от настройки системы, то dp остается таким, каким его задает разработчик.
Щупаем единицы измерения
Для демонстрации некоторых примеров я навайбкодил приложение, которое поможет закрепить материал из статьи. Методичка по прохождению, проект и apk файл будут находится в конце статьи.
Экран dp
На экране находится 2 инпута, значение которых отображает размер отступов (красных полос) по бокам. Можно подвигать ползунок и понаблюдать, как изменяются значения в dp и px.
Экран Text
На экране мы видим текст «DEMO TEXT» и возможность задать размер в sp тексту. На этом экране следует задать текст и сделать следующие действия:
запомнить (или сделать скриншот) какого размера отображается текст;
перейти в настройки дисплея;
перейти в размер шрифта;
поставить максимальный;
вернуться в приложение.
Как мы видим, поменялся размер не только текста «DEMO TEXT», но и остального интерфейса. Хорошая практика — учитывать этот кейс при тестировании.
Дополнительные инструменты
Теперь поговорим про те инструменты, которые лично я использую при тестировании. Здесь речь пойдёт не про конкретные приложения, а больше про пользу, которую они дают.
Режим разработчика: показывать границы элементов
Важно, чтобы у вас были включены «Параметры разработчика» (5-7 раз быстро тыкнуть на номер сборки в «Сведения о ПО»), потому что именно там находится настройка «Показывать границы элементов», которая показывает границы не только приложений, но и системного интерфейса. Очень удобно проверять что-то на симметрию, отступы и чтобы UI-элементы не торчали там, где не нужно.
GRID Tool
Утилита, которая помогает выявлять похожие проблемы с отступами, симметрией. Есть разные её версии, я скачал самую первую из Google Play (в других сторах должно быть что-то похожее). Утилите необходимо дать доступ открываться поверх ваших приложений, чтобы можно было открыть сетку, которая поможет подсветить проблемы с версткой.
В приложении можно как выбрать готовые пресеты, так и создать свои. Настройка не очень гибкая, но помочь программа может.
Color Picker: Eye Dropper Tool
Пипетка позволяет «взять» цвет со скриншота, сделанного на телефоне. Я нашел конкретно эту и иногда пользуюсь ей, но вариантов множество, так что используйте ту, которая нравится вам. Как вариант, можно подключиться к компьютеру и через adb сделать скриншот и воспользоваться «пипеткой» на нём.
Inspector в Android studio
В Android studio есть возможность просматривать экран приложения и смотреть свойства элементов как во вкладке elements в devtools. Для этого нужно перейти в Running Devices и выбрать элемент.
После нажатия на иконку лупы 🔍, начинает загружаться слои и элементы экрана. Когда элементы загрузились (на скриншоте я назвал это «Дерево элементов»), можем выбрать нужный элемент через дерево или нажать «Toogle Deep Inspect» и выбрать нужный. Тогда покажутся атрибуты (на скриншоте «Атрибуты выбранного элемента»).
В атрибутах мы можем увидеть разные свойства выбранного элемента (всё как и на вебе):
width= ширина;height= высота;colors= цвет (с цветом есть нюанс, он может не быть указан в привычномhex/rgb/rgba/hsl, значение может быть функцией/переменной. Ещё цвет или значениеbackgroundможет не считаться из-за альфа-канала, который может быть задан с помощью альфа-каналов или быть унаследован от другого элемента, тогда узнать значение цвета может быть проблематично);enabled= доступность (пользовать может ввести текст);isError= флаг валидации —false, если пользователь при вводе не допустил ошибок (ввёл спец символы или превысил количество символов),trueпри обнаружении ошибок;minLines= количество строк в поле ввода;readOnly= доступ к инпуту, отличается отenabled: falseтем, что уreadOnly: trueможно фокусировать инпут, можно выделять и копировать текст;и другие свойства, которые есть у элементов.
Если нажать дважды на элемент, то можно провалиться в код компонента, который был использован. Если вы владеете начальными знаниями программирования, то сможете найти полезную информацию.
С помощью этого инструмента можно сравнивать свойства элементов с макетами из фигмы и находить неточности, которые тяжело различить «на глаз».
Практика
Если вы нашли статью полезной для себя и хотите потренироваться и закрепить новые знания, то я для этого навайбкодил приложение. Копируйте себе проект и используйте методичку — в ней немного теории, практика и проверочные вопросы
Если будут проблемы с запуском, пишите в комментариях.
А вот вам apk, если хотите пощупать первые 2 экрана с dp и текстом.