Виды аккордеона стали проще
При разработке приложений вам часто требуется какое-то сворачиваемое представление. С выпуском iOS 14 и Xcode 12 у нас будет роскошь элементов представления DisclosureGroup для достижения этой цели. Но до его выпуска - и для приложений, которым требуется некоторая обратная совместимость - вы должны предоставить свое собственное решение для этого.
В этой статье я хочу показать вам простой подход к созданию собственного настраиваемого сворачиваемого представления в SwiftUI. Давайте начнем!
Примечание. Требуются XCode 11.x, Swift 5.x и iOS 13.x. Предполагается, что у вас уже есть некоторые знания о программировании на Swift и SwiftUI, о том, как создавать приложения и реализовывать в них собственные представления. Это не руководство, чтобы научить вас основам.
Цель
В качестве окончательного результата мы хотим иметь простое текстовое представление со значком шеврона, указывающим состояние свертывания, и некоторым содержимым под ним - изначально в свернутом состоянии.
Первоначальный вид должен выглядеть так:
При касании строки с текстом и значком свернутое содержимое должно сдвинуться вниз и стать видимым. Конечно, мы хотим, чтобы представление принимало любой контент для свернутого контейнера, а не только текст, кнопки или какой-либо другой конкретный тип.
Сворачиваемый вид
Нам нужно простое представление, которое принимает нашу метку и содержимое как параметры и показывает их в VStack со свернутой последней строкой. Мы создаем элемент кнопки с простым стилем для обработки события касания и сохраняем параметр для свернутого состояния закрытым, чтобы избежать повреждения данных.
Чтобы сделать переход от свернутого к развернутому приятным для пользователя, мы также добавляем некоторую анимацию и переход к VStack, содержащему свернутый контент. В этом случае мы используем переход между слайдами с анимацией замедления. Возможно, вы захотите изменить это, чтобы оно соответствовало вашей схеме анимации / переходов, или вообще не использовать анимацию.
Вот окончательный вид:
Использование в главном представлении
В следующем примере показано базовое представление, в которое встроено ранее созданное складываемое представление под текстом внутри VStack:
Код должен быть довольно простым. Для простоты у нас есть просто базовое текстовое представление с отступом и цветом фона в качестве нашего содержимого. Конечно, это может быть любой вид. Даже представления прокрутки и навигации должны работать, хотя последнее может вообще не иметь смысла в таком контексте.
Заключение
Этот пример очень простой и статичный - и он задуман. Если вам нужны расширенные функции (например, динамическое изменение метки в соответствии с некоторым значением, установленным внутри сворачиваемого содержимого), вам нужно расширить сворачиваемый вид, но это может быть содержание для другой статьи ...
