Как установить эффект параллакса на карте, например, приложение Citymapper? [Дубликат]

Прежде всего, вы должны удалить UIImageView из заголовка и добавить его как простую UIImageView поверх UITableView, то, поскольку протокол UITableViewDelegate соответствует протоколу UIScrollViewDelegate, вы можете реализовать scrollViewDidScroll:, чтобы проверить, когда tableView прокручивается вниз и имеет эффект bouncing. что-то вроде этого:

-(void)someInitMethod {
   initialFrame = yourHeaderView.frame;
}
-(void)scrollViewDidScroll:(UIScrollView*)scrollView {
    if(scrollView.contentOffset.y < 0) {
       initialFrame.size.height -= scrollView.contentOffset.y;
       yourHeaderView.frame = initialFrame;
    }
}

Также убедитесь, что вы установили правильный contentMode для своего UIImageView. Также я думаю, что эта реализация создаст эффект подпрыгивания, но я не уверен, потому что я не могу проверить его прямо сейчас, но я думаю, что это хорошая стартовая точка для вас.

Недавно я опубликовал сообщение в блоге об этом, используя ограничения, которые могут помочь, оказалось, что это было довольно просто.

Вот ссылка: Создание эффекта параллакса на UIScrollView с использованием ограничений

Так я и достиг этого, в моем случае я использовал представление карты вверху:

1. Создайте контроллер просмотра в раскадровке.
2. Добавить таблицу Просмотрите и установите ограничения на 0 со всех сторон.
3. Добавьте представление карты (или любой вид) под табличным представлением, чтобы оно отображалось поверх.
4. Добавьте ограничения в верхние левые и правые.
5. В контроллере представления viewDidLoad добавьте следующее: tableView.contentInset = UIEdgeInsetsMake(200, 0, 0, 0), где 200 высота представления.
6. В контроллере представления добавьте следующий код, который изменяет размер представления на основе прокрутки:

   func scrollViewDidScroll(scrollView: UIScrollView) {
       var scrollOffset = scrollView.contentOffset.y
       var headerFrame = mapView.frame
       if (scrollOffset < 0) {
           // Adjust map
           headerFrame = CGRect(x: mapView.frame.origin.x,
               y: mapView.frame.origin.y,
               width: mapView.frame.size.width,
               height: -scrollOffset)
       } else {
           // Adjust map
           headerFrame = CGRect(x: mapView.frame.origin.x,
               y: mapView.frame.origin.y,
               width: mapView.frame.size.width,
               height: 0)
       }
       mapView.frame = headerFrame
   }
   

Если бы я мог установить contentInset из раскадровки, он был бы еще более симпатичным

Я не знаю, если это поможет вам или нет.

Установите свой делегат прокрутки в self.

, а затем выполните это:

-(void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    float scrollViewHeight = scrollView.frame.size.height;
    float scrollContentSizeHeight = scrollView.contentSize.height;
    float scrollOffset = scrollView.contentOffset.y;

    if (scrollOffset == 0)
    {
        // then we are at the top
    }
    else if (scrollOffset + scrollViewHeight == scrollContentSizeHeight)
    {
        // then we are at the end
        // Do what you need here 
    }
}

Пожалуйста, посмотрите на этот https://github.com/matteogobbi/MGSpotyViewController , который реализует тот же эффект, что и ваше требование.

Предыдущие решения на этой странице дали мне некоторые проблемы, когда мне это нужно, чтобы работать вместе с заголовками разделов и индексной панелью, поэтому я придумал следующую альтернативу. Пожалуйста, обратите внимание; Я не использую автозапуск в своем проекте, и я тестировал это только на iOS9 +;

В раскадровке вашего проекта:

1. Создайте UITableView в UIViewController (или попробуйте это с UITableViewController).
2. Отбросить UIView вверху (но внутри) UITableView, поэтому он становится заголовком таблицы над первой ячейкой.
3. Дайте этому заголовку вид желаемого height (например, 200px) и установите цвет фона на «Очистить цвет». Clear Color важна, представление должно быть прозрачным.
4. Отбросить второй UIView в заголовке таблицы UIView и сделать его того же размера, что и родительский.
5. Подключите этот второй UIView к вашему UIViewController IBOutlet, я назвал его «headerView» в моем случае.

Затем перейдите к вашему UIViewController.m:

- (void)viewDidLoad
{
    [super viewDidLoad];

    // Remove view from table header and place it in the background instead.
    [self.headerView removeFromSuperview];
    UIView *backgroundView = [UIView new];
    [backgroundView addSubview:self.headerView];
    self.tableView.backgroundView = backgroundView;
}

- (void)viewDidAppear:(BOOL)animated
{
    [super viewDidAppear:animated];

    /* Set initialScrollOffset ivar to start offset, because in my case
       the scroll offset was affected by the statusbar + navigation bar heights
       and the view controller's "extend edges under top bars" option. */
    initialScrollOffset = self.tableView.contentOffset.y;
}

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
    /* Modify headerView height only if the table content gets pulled
       beyond initial offset. */
    if (scrollView.contentOffset.y < initialScrollOffset) {
        CGRect frame = self.headerView.frame;
        frame.size.height = self.tableView.tableHeaderView.frame.size.height + -scrollView.contentOffset.y;
        self.headerView.frame = frame;
    }
}

Мне понадобилась эта реализация только для заголовка растяжения с цветом фона и метками. В этом заголовке должно быть легко добавить UIImageView.

Кроме того, шаги с 1 по 5, конечно, полностью необязательны. Вы можете программно создать представление заголовка или вместо него использовать XIB. До тех пор, пока вы убедитесь, что таблица имеет вид с четким цветным заголовком с той же высотой, что и ваш желаемый заголовок, потому что это служит в качестве разделителя, чтобы сохранить ваши ячейки и заголовки разделов в строке.

EDIT:

Я нашел еще более чистый способ выполнить это:

1. Создайте заголовок таблицы в построителе интерфейса, как описано выше: 1 UIView как контейнер со вторым встроенным UIView.
2. Пропустить код viewDidLoad выше, нет необходимости вытаскивать UIView из его контейнера, и нам не нужно будет устанавливать его в качестве фона таблицы.
3. Измените scrollViewDidScroll: к этому:

UIViewController.m:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView
{
      if (scrollView.contentOffset.y < initialScrollOffset) {
           CGRect frame = self.headerView.frame;
           frame.size.height = self.tableView.tableHeaderView.frame.size.height - scrollView.contentOffset.y;
           frame.origin.y = self.tableView.tableHeaderView.frame.origin.y + scrollView.contentOffset.y;
           self.headerView.frame = frame;
    }
}

Вот и все. Только визуальное отличие от другого решения состоит в том, что содержимое теперь будет прокручиваться вместе с остальными ячейками, а не перекрываться ими.