Tweetbot banner image pull down to zoom image

Question

Tweetbot и Kickstarter для iOS использует классную функцию в профилях пользователей, имеющих изображение баннера. Если вы нажмете на tableView, масштабирование изображения.

Я его частично работает, используя следующее, он изменяет высоту изображения, но как ни странно, не ширина:

- (void)scrollViewDidScroll:(UIScrollView *)scrollView { 

    UIImageView *imageView = (UIImageView *)self.tableView.tableHeaderView; 
    CGFloat y = -scrollView.contentOffset.y; 
    imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width+y, self.cachedImageViewSize.size.height+y); 
    NSLog(@"%@", NSStringFromCGRect(imageView.frame)); 

} 

Кто-нибудь знает, как воссоздать этот эффект?

Answer 1

Хорошо, я понял. Вот что я сделал:

- (void)viewDidLoad { 
    [super viewDidLoad]; 

    self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"church-welcome.png"]]; 
    self.imageView.contentMode = UIViewContentModeScaleAspectFill; 
    self.cachedImageViewSize = self.imageView.frame; 
    [self.tableView addSubview:self.imageView]; 
    [self.tableView sendSubviewToBack:self.imageView]; 
    self.tableView.tableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, 170)]; 

} 

- (void)scrollViewDidScroll:(UIScrollView *)scrollView { 

    CGFloat y = -scrollView.contentOffset.y; 
    if (y > 0) { 
     self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width+y, self.cachedImageViewSize.size.height+y); 
     self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y); 
    } 

} 

Answer 2

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

Answer 3

Swift 2 вариант ответа Nic Хаббарда:

var imageView: UIImageView! 
var cachedImageViewSize: CGRect! 

override func viewDidLoad(){ 

    super.viewDidLoad() 

    self.imageView = UIImageView(image: UIImage(named: "church-welcome.png")) 
    self.imageView.contentMode = .ScaleAspectFill 
    self.cachedImageViewSize = self.imageView.frame 
    self.tableView.addSubview(self.imageView) 
    self.tableView.sendSubviewToBack(self.imageView) 
    self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 170)) 

} 

func scrollViewDidScroll(scrollView: UIScrollView) { 
var y: CGFloat = -scrollView.contentOffset.y 
if y > 0 { 
    self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width + y, self.cachedImageViewSize.size.height + y) 
    self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y) 
    } 
} 

Answer 4

выше ответ на Swift:

вариабельных децелераций:

var imageView: UIImageView! 
var cachedImageViewSize: CGRect! 

viewDidLoad:

var imageView: UIImageView! 
var cachedImageViewSize: CGRect! 

override func viewDidLoad() { 
    super.viewDidLoad() 

    self.imageView = UIImageView(image: UIImage(named: "image-plane")) 
    imageView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170) 
    self.imageView.contentMode = .ScaleAspectFill 
    self.cachedImageViewSize = self.imageView.frame 
    self.tableView.addSubview(self.imageView) 
    self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y) 
    self.tableView.sendSubviewToBack(self.imageView) 
    self.tableView.tableHeaderView = UIView(frame: CGRectMake(0, 0, self.view.frame.size.width, 170)) 
} 

scrollViewDidScroll:

override func scrollViewDidScroll(scrollView: UIScrollView) { 

     let y: CGFloat = -scrollView.contentOffset.y 
     if y > 0 { 
      self.imageView.frame = CGRectMake(0, scrollView.contentOffset.y, self.cachedImageViewSize.size.width + y, self.cachedImageViewSize.size.height + y) 
      self.imageView.center = CGPointMake(self.view.center.x, self.imageView.center.y) 
     } 
    } 

Answer 5

Swift версия 3.0 ответа Nic Хаббарда:

override func viewDidLoad() { 

    self.imageView = UIImageView(image: UIImage(named: "header-image")) 
    imageView.frame = CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170) 
    self.imageView.contentMode = .scaleAspectFill 
    self.cachedImageViewSize = self.imageView.frame 
    self.tableView.addSubview(self.imageView) 

    self.imageView.center = CGPoint(x: self.view.center.x, y:self.imageView.center.y) 
    self.tableView.sendSubview(toBack: self.imageView) 
    self.tableView.tableHeaderView = UIView(frame: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: 170)) 
} 

override func scrollViewDidScroll(_ scrollView: UIScrollView) { 
    let y: CGFloat = -scrollView.contentOffset.y 
    if y > 0 { 
     self.imageView.frame = CGRect(x: 0, y: scrollView.contentOffset.y, width: self.cachedImageViewSize.size.width + y, height: self.cachedImageViewSize.size.height + y) 
     self.imageView.center = CGPoint(x: self.view.center.x, y: self.imageView.center.y) 
    } 
} 

Answer 6

Вышеуказанные решения фактически не реально обеспечить точное выполнение, как это в Tweetbot или Tinder [масштабирование изображения профиля цели].

Я также должен был решить эту проблему и самое совершенное внедрение я нашел использовать 2 основные элементы:

1) Tableview, который имеет вставку содержимого

2) ImageView на вершине этой точки зрения таблицы, которая имеет выход для ограничения верхнего и верхнего ограничений и который находится поверх этого пустого пространства, предоставляемого вставки содержимого таблицы.

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

imageViewHeightConstraint.constant = view.frame.height * 0.3 
tableView.contentInset = UIEdgeInsets(top: view.frame.height * 0.3, left: 0, bottom: 0, right: 0) 

Затем просто прослушайте метод делегата scrollViewDidScroll и соответствующим образом измените ограничения.

func scrollViewDidScroll(_ scrollView: UIScrollView) { 
    let contentOffset = scrollView.contentOffset.y 

    if -contentOffset >= view.frame.height * 0.3 { 
     //reset the top constraint 
     topConstraint.constant = 0 
     //make the imageview bigger by the additional content offset value 
     imageViewHeightConstraint.constant = -contentOffset 
    } else { 
     topConstraint.constant = -(view.frame.height * 0.3 + contentOffset) 
    } 
} 

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

Пожалуйста, обратите внимание, что вам нужно:

imageView.contentMode = .scaleAspectFill 
layer.masksToBounds = true 

В противном случае изображение будет нарисована поверх ваших первых клеток Tableview [в зависимости от размера изображения он может прийти, чтобы покрыть по всей табличном], потому что выводится за пределы «границ».