Xcode 12 - iOS 14
В этом руководстве мы собираемся реализовать поиск, подобный UIKit, без использования какого-либо UIViewRepresentable.
Мы собираемся разделить задачу на следующие сегменты
- Создание пользовательского интерфейса панели поиска
- Добавить эту панель поиска в заголовок списка
Создайте пользовательский интерфейс панели поиска:
На панели поиска есть увеличительное стекло, кнопка x, если текст виден, и кнопка отмены, чтобы закрыть поиск. Мы собираемся поместить все это в HStack с анимацией отображения / скрытия для отмены и кнопкой x.
Добавить эту строку поиска в заголовок списка
Мы собираемся использовать эту панель поиска в лидере списка, как показано ниже:
Если мы попробуем сейчас, панель поиска будет выглядеть примерно так:
Здесь у нас есть следующие три проблемы:
- Текст для поиска пишется заглавными буквами.
- Свиток уходит в безопасную зону.
- Фон панели поиска имеет вид заголовка по умолчанию.
- Рамка панели поиска меньше.
Давайте исправим их по очереди:
Текст для поиска должен быть заглавным:
textCase(.none)
Прокрутка переходит в безопасную область:
Необходимо добавить фон в панель поиска с дополнительным смещением по оси Y,
Фон панели поиска имеет вид заголовка по умолчанию, необходимо установить фон панели поиска. Заголовок представления списка всегда имеет правильное заполнение, поэтому необходимо добавить дополнительное смещение по x
.background(
GeometryReader { proxy in
Color(UIColor.systemBackground)
.frame(width: proxy.size.width * 1.3, height: 100) ///100 => search bar + top padding
.fixedSize()
.offset(CGSize(width: -20.0, height: -50.0))
})
Рамка панели поиска меньше, установите рамку
.frame(height: 50)
и Готово,
Вот финальная суть:
