Question

Tweetbot和Kickstarter for 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

以上对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 3

Swift 3.0版本的Nic Hubbard回答：

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 4

我认为它只是调整图像视图的大小以适应垂直空间，同时保持相同的宽高比。

Answer 5

Swift 2版本的Nic Hubbard回答：

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 6

上面提到的解决方案实际上并没有真正提供Tweetbot或Tinder [目标的配置文件图片缩放]的确切实现。

我还必须解决这个问题，我发现最完美的实现是使用2个主要元素：

1）具有内容插入的Tableview

2）在该表视图顶部的Imageview，其具有顶部约束和高度约束的出口，并且位于由tableview内容插入提供的空白空间的顶部。

首先确保为tableView设置insets并为imageView设置初始高度约束。例如，您可以在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单元格的顶部[取决于它可能覆盖到整个表格视图的图像大小]，因为它是在＆＃34;边界之外绘制的。＃/ p >

Tweetbot横幅图像下拉缩放图像

6 个答案: