Сжать панель навигации при прокрутке на основе вида прокрутки

Question

У меня установлен вид прокрутки на фиксированную высоту внутри моего контроллера просмотра.Я хочу использовать панель навигации сверху с большими заголовками, поэтому, когда я прокручиваю вид прокрутки, он должен свернуться, как в контроллере навигации.Можно ли сделать это?Моя сцена выглядит так:

Навигационная панель имеет ограничение сверху / слева / справа 0 против просмотра.В настоящее время он остается на вершине правильно, однако он не рухнет на прокрутке, как ожидалось.

Answer 1

В конце концов я создал пользовательский вид для репликации панели навигации.Здесь вы можете посмотреть, как это выглядит, и прочитать приведенные ниже шаги для репликации:

1. Чтобы настроить контроллер вида, который будет использоватьсяс пользовательским представлением прокрутки, сначала убедитесь, что вы используете размер Freeform для вашего контроллера.Для этого выберите Freeform в Инспекторе размеров и установите высоту для высоты вашего нового вида Scroll View:

   

2. Вставьте свойПрокрутите Вид и настройте 0 верхних / левых / правых / нижних ограничений, чтобы он соответствовал размеру вашего контроллера вида:

   

3. Добавьте свой контент в свой вид прокрутки как обычно

4. Теперь, чтобы создать свою собственную панель навигации, добавьте вид за пределы вида прокрутки и настройте ограничения следующим образом:

   

   Обратите внимание на несколько вещей:

   • верхнее ограничение выровнено с суперпредставлением, а не с безопасной областью, поэтому вид отстаетстрока состояния
   • Высота установлена ​​на> = 44, поэтому она является минимальной высотой и может расширяться, если содержимое больше
   • В Инспекторе атрибутов выберите «Обрезать до границ», чтобы ваш контентвнутри представления не переполняется (как в CSS, переполнение: скрыто)
   • В этот момент вы можете увидетьнекоторые ошибки в вашей раскадровке, но не беспокойтесь об этом: это потому, что у вас нет контента в вашем представлении, и он не знает, насколько высоким он должен быть

5. Установите фон просмотра прозрачным и добавьте внутри «Визуальный эффект с размытием», с ограничениями 0 сверху / слева / справа / снизу.Это приведет к размытию содержимого за пользовательской панелью навигации

6. Теперь убедитесь, что вы установили флажок «Руководство по разметке безопасной зоны» в представлении панели навигации (оно находится над настройкой ограничений):

   

   Таким образом, вы можете добавлять контент внутри представления, который не будет находиться за строкой состояния, поскольку находится вне безопасной области.И это работает с надрезом тоже.

7. Добавьте метку внутри своего вида, задайте ограничения сверху и снизу для Безопасной области и убедитесь, что у вас также определено фиксированное ограничение высоты:

   

   Теперь вы также можете видеть, что ошибки в вашем раскадровке исчезли :) На этом этапе все должно выглядеть так:

   

8. Теперь часть кодирования.В вашем ViewController создайте розетки для ScrollView и пользовательской панели навигации.Для этого переключитесь в помощник редактора (символ диаграммы Венна вверху справа), выберите элемент в вашей раскадровке, удерживайте нажатой клавишу CTRL и перетащите в свой класс ViewController:

   

   Сделайте то же самое для вашего View, который является вашей навигационной панелью:

    @IBOutlet weak var mainScrollView: UIScrollView!
    @IBOutlet weak var customNavigationBar: UIView!
   

9. Затем вам нужно добавить UIScrollViewDelegate в ваш класс, чтобы выможет прослушивать событие прокрутки и получить фактическую позицию Y текущего смещения прокрутки с помощью функции scrollViewDidScroll:

    class ViewController: UIViewController, UIScrollViewDelegate {
   

   Вам также необходимо настроить делегат в хуке viewDidLoad:

   mainScrollView.delegate = self
   

10. Создайте новую функцию scrollViewDidScroll, чтобы получить позицию прокрутки, и вы можете использовать ее для создания различных анимаций с другими элементами.В этом случае, если позиция прокрутки достигает 44 (это высота, которую я установил для моей пользовательской панели навигации), она будет анимирована до полной непрозрачности:

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let y = self.mainScrollView.contentOffset.y
        let barHeight = 44
    
        if(y < barHeight) {
            customNavigationBar.alpha = y/CGFloat(barHeight)
        } else {
            customNavigationBar.alpha = 1
        }
    }
    

    Вы можете использовать ту же логику для анимации метки.внутри панели навигации измените его размер и т. д. *

Полный ViewController:

class ViewController: UIViewController, UIScrollViewDelegate {
    @IBOutlet weak var mainScrollView: UIScrollView!
    @IBOutlet weak var customNavigationBar: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        mainScrollView.delegate = self
        customNavigationBar.alpha = 0
    }

    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        let y = self.mainScrollView.contentOffset.y
        let barHeight = 44

        if(y < 44) {
            customNavigationBar.alpha = y/CGFloat(barHeight)
        } else {
            customNavigationBar.alpha = 1
        }
    }

}

Answer 2

Не используйте «свободную» панель навигации, подобную этой.Используйте контроллер навигации, даже если вы не собираетесь делать какую-либо навигацию.Это дает вам желаемое поведение, бесплатно.