Во второй части серии мы собираемся создать панель навигации с прикрепленными изображениями.
В другой раз мы исправим выделенную ячейку.
Это вторая часть из серии, посвященной реализации функций экрана профиля Twitter. Первую статью можно найти здесь.
Предварительные требования:
- Вы прочитали и поняли мою первую статью
- Знание фундаментальных концепций iOS (жизненный цикл UIViewController, UIViews и т. Д.)
- Основы автоматической раскладки
Стратегия:
- Добавьте tableview на экран профиля и настройте ограничения
2. Добавьте заголовок в табличное представление (не заголовок раздела)
3. Добавьте изображение в заголовок.
4. Установите ограничения для просмотра изображений.
5. Сделайте изображение липким / эластичным, как в предыдущем уроке.
6. Определите, когда нижняя часть панели навигации достигает нижней части изображения.
7. Когда нижняя часть панели навигации достигнет нижней части окна просмотра изображений, мы переместимся вниз по области просмотра изображений.
Примечание. Большая часть работы аналогична предыдущей статье, за исключением того, что мы используем табличное представление и части 6 и 7.
Реализация:
Добавьте tableview на экран профиля и настройте ограничения
Добавьте табличное представление в сцену и настройте ограничения Autolayout следующим образом. Обязательно закрепите поля Top, Leading, Bottom, Trailing в табличном представлении с нулевым пробелом к соответствующим краям UIView. Не прикрепляйте булавками к безопасной зоне. Если вы это сделаете, вы получите ошибку, если встроите контроллер представления в контроллер навигации. Вы увидите пустое пространство вместо содержимого под панелью навигации, если закрепите его в безопасной области.
Вставить сцену в контроллер представления навигации
Мы встроим наше табличное представление в контроллер навигации и получим от него бесплатную панель навигации.
Добавление представления заголовка в представление таблицы
Не заголовок раздела, а фактический заголовок для представления таблицы.
Теперь мы собираемся добавить изображение и необходимые ограничения точно так же, как в предыдущей статье.
Настройка ограничений для просмотра изображения внутри заголовка
Сделать просмотр изображения липким / эластичным
Прочтите последний учебник для получения инструкций.
Запустите код, чтобы убедиться, что он работает. Если все работает правильно, вы должны увидеть следующее
Теперь мы почти подошли к концу последнего урока, все, что было раньше, должно быть новым.
С навигационной панелью трудно что-то увидеть, но есть небольшая ошибка. (Сделайте навигационную панель прозрачной, и вы сможете это увидеть). Нам нужно скорректировать нашу базовую линию (то, что мы определяем как верхнюю часть экрана). ) в нашей функции viewdidscroll. Поэтому вместо проверки смещения
Поэтому вам следует внести следующие изменения.
Создайте переменную экземпляра, которая будет содержать высоту панели навигации.
Извлеките высоту панели навигации из функции viewDidLoad ()
Затем создайте константу внутри функции scrollViewDidScroll (), которая будет действовать как базовое / верхнее значение экрана.
Теперь мы заменяем приведенный ниже код
if offset < 0 {//code}
с участием
1.) if offset < baseline {//code}
и
imageview.height.constant = originalHeight - offset
становится
2.) imageviewHeight.constant = originalHeight + abs (base - offset)
наконец-то
else {
imageviewTop.constant = 0
}
становится
3. else {
imageviewTop.constant = base
//other code
}
- Этот код просто определяет, проходим ли мы мимо вершины. Как объяснялось ранее, верхняя часть определяется как -1 * высота панели навигации.
- Этот код просто растягивает изображение на столько, насколько экран перемещается вверх. Единицы перемещены вверх = разница между исходной позицией (базой) и текущей позицией (смещением)
- Когда мы закончим прокрутку, нам нужно вернуть изображение в исходное положение, прежде чем мы начнем прокрутку, что составляет всего -1 * высота панели навигации.
Не забудьте также изменить режим содержания изображения на заполнение сторон.
Обобщение липкого / эластичного кода
Примечание. Это небезопасный код. Если вы перейдете к этому контроллеру представления из контроллера представления, не встроенного в контроллер навигации, этот код выйдет из строя. (Вы понимаете, почему?) Вы могли бы сделать его более безопасным, используя опции, но для краткости я решил пропустить безопасный код.
Теперь ваше приложение должно выглядеть так.
Теперь пора сделать панель навигации приклеенной к фону изображения.
Следующее, что мы сделаем, это сделаем нашу панель навигации прозрачной. Мы сделаем это, предоставив нашему навигационному контроллеру настраиваемый класс и изменив панель навигации в нашем настраиваемом классе.
Прозрачная панель навигации
Снова запустите приложение.
Мы фактически сделаем этот контроллер представления источником данных для нашего табличного представления, чтобы отображать ячейки на экране, чтобы мы могли фактически протестировать прокрутку.
Настройка заглушек tableview
Мы хотим сделать так, чтобы при прокрутке вниз на панели навигации нижняя часть изображения использовалась в качестве фона. Мы добьемся этого эффекта, сдвинув область просмотра изображения вниз, как только нижняя часть панели навигации коснется нижней части изображения.
Теперь нам нужно понять, когда нижняя часть навигационной панели достигает нижней части изображения. Это когда смещение + высота навигационной панели = база + высота просмотра изображения. Поэтому мы отслеживаем, произошло ли это событие. Если это так, то мы создадим иллюзию того, что изображение прилипло к панели навигации, просто сдвинув изображение вниз.
Если это событие произошло, мы будем перемещаться вниз по изображению пропорционально тому, как далеко мы прокрутили вниз.
Как далеко мы прокрутили вниз = разница между смещением панели навигации и нижней частью изображения.
После того, как мы закончили прокрутку, мы хотим убедиться, что изображение находится в правильном месте.
Эта логика реализована в приведенном ниже коде.
Настройка иллюзии фонового изображения панели навигации
Запустите приложение в последний раз и…
мы добились желаемого эффекта.
