Современные приложения должны быть реактивными, позволять пользователю полностью контролировать навигацию и взаимодействие, поэтому одно из самых раздражающих явлений - быть заблокированным уродливым полупрозрачным черным видом с загрузочным спиннером в центре, ожидая несколько секунд для загрузки содержимого...
Почти все известные приложения, которыми мы пользуемся каждый день, в основе своей имеют очень простой пользовательский интерфейс: бесконечный, бесконечный список элементов, который все время прокручивается и прокручивается…
Подумайте о таких приложениях, как Instagram, Facebook, LinkedIn... все они работают по одной схеме: вы открываете экран и ожидаете увидеть список строк, все с одинаковыми элементами, более или менее.
Изучая прототипы, где-то, в какой-то момент в прошлом, неизвестный озаренный UX-дизайнер начал использовать ячейки-заполнители вместо этих ужасных загрузочных представлений... пользователь ожидает найти какую-то ячейку там, так давайте поместим что-то похожее здесь! Так и появились skeleton плейсхолдеры.
Поместить туда плейсхолдер, подобный тому, что используется для текстовых полей, было довольно умно, но все же это не передавало ощущение загрузки, поэтому другой UX-дизайнер добавил анимацию к представлениям... и знаете что? Родились skeleton placeholders!
Создать современный skeleton placeholder очень просто благодаря SwiftUI. С помощью нескольких строк кода и небольшой хитрости мы можем создать эту продвинутую UX-функцию в наших приложениях.
Прежде всего, позвольте мне показать вам на небольшом видео, что мы будем кодировать:
Как вы можете видеть, я создал список, состоящий из анимированных ячеек.
Код для этого пользовательского интерфейса очень прост, минимален, смею сказать. Конечно, в своем приложении вы добавите больше условий. Скелетные представления будут отображаться только во время получения данных с сервера, например.
Нечего сказать об этой простой структуре, поэтому перейдем к SkeletonRow .
- Строки 11-12: Здесь задаются начальная и конечная точки градиента. Анимация будет сделана с помощью движущегося градиента. Я почти всегда использую диагональный градиент, чтобы создать большее ощущение движения.
- Строка 14: Я выбрал два цвета, определенные в каталоге активов, для градиента. Эти цвета - просто двоттенка, чтобы хорошо увидеть анимацию.
- Строка 17: Все представления инкапсулируются внутри VStack. Обратите внимание на три представления, которые составляют скелет, названные здесь, но определенные как представления позже в структуре. Такой подход позволяет мне писать действительно чистый и читабельный код, даже если я ничего не знаю о реализации представлений. Код SwiftUI имеет тенденцию легко засоряться, поэтому требуется дополнительная осторожность.
- Строка 22: анимация создается здесь, как только вьюшка появляется на экране, она анимируется.
- Строка 23: это небольшая хитрость, необходимая для того, чтобы избежать странного поведения, которое происходит при использовании обширной анимации и NavigationViews. Поместите все в основной поток, и у вас не будет никаких сюрпризов!
- Строка 25: здесь изменяется начальная точка градиента. Значения зависят от вас. Меняйте их по своему усмотрению, просто найдите то, что вам нравится или подходит для вашего приложения. Вы можете изменить даже значение endingPoint, поэтому я использовал переменную @State в строке 4.
- Строка 31: градиент View определен здесь и используется везде. Это View, измененный анимацией в строке 22.
Остальные переменные - это простые вьюшки. Для простоты я использовал жестко заданные значения для размеров... в реальном приложении я настоятельно рекомендую использовать GeometryReader для вычисления правильных рамок в соответствии с размером устройства.
Эта заметка является переводом оригинальной статьи Александро Манили - Skeleton Placeholder Views in SwiftUI
#Swift #ios #программирование для начинающих #swiftui