向下滚动时 ImageView 缩放 [英] ImageView Scaling when scrolling down

问题描述

向下滚动时如何使用 autolayout 简单地缩放 imageView ?

How can I simply scaling imageView with autolayout when scrolling down ?

尝试查看视差效果，但不是我想要的.

Try to see parallax effect but not exactly what I wanted.

我只想使用一个 scrollView 和一个标题 ImageView 可以调整大小取决于 scrollView 位置.

I just want to use a scrollView and a header ImageView who can resize depends on scrollView position.

推荐答案

一步一步:

1 - 打开故事板并在顶部添加具有这些约束的图像视图(选择您的纵横比):

1 - open storyboard and add an image view on top with these constraint (choose your aspect ratio) :

2 - 为你的 uiimage 选择 aspectFill 模式和 clipSubviews

2 - select aspectFill mode and clipSubviews for your uiimage

3 - 在 vi​​ewController 的顶部添加一个 UIScrollView，里面有一个子视图.有关使用 scrollView 的自动布局的所有详细信息:http://natashatherobot.com/ios-autolayout-scrollview/

3 - add a UIScrollView on top of your viewController with a child view inside. All the details about the auto layout with scrollView : http://natashatherobot.com/ios-autolayout-scrollview/

4 - 然后在代码中引用您的 imageView 和 scrollView.

4 - then make outlets reference of your imageView and scrollView in your code.

5 - 在 vi​​ewDidLoad 中，插入self.automaticallyAdjustsScrollViewInsets = false 并设置 scrollView 的 contentInsets 和 contentOffset :

5 - in viewDidLoad, insert self.automaticallyAdjustsScrollViewInsets = false and set contentInsets and contentOffset of the scrollView :

class ViewController: UIViewController {

    @IBOutlet weak var scrollView: UIScrollView!
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.automaticallyAdjustsScrollViewInsets = false
   }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        let imageHeight = imageView.frame.height

        let newOrigin = CGPoint(x: 0, y: -imageHeight)

        scrollView.contentOffset = newOrigin
        scrollView.contentInset = UIEdgeInsets(top: imageHeight, left: 0, bottom: 0, right: 0)
    }

}

6 - 将 scrollviewDelegate 添加到 ViewController 和 scrollViewDidScroll 方法以获取 scrollView 的位置

6 - add scrollviewDelegate to the ViewController and the scrollViewDidScroll method to get position of the scrollView

class ViewController: UIViewController, UIScrollViewDelegate

override func viewDidLoad() {
        super.viewDidLoad()

        scrollView.delegate = self
        self.automaticallyAdjustsScrollViewInsets = false
}

func scrollViewDidScroll(scrollView: UIScrollView) {

    let offsetY = scrollView.contentOffset.y

    if offsetY < 0
    {
        imageView.frame.size.height = -offsetY
    }
    else
    {
        imageView.frame.size.height = imageView.frame.height
    }
}

7 - 然后构建并运行.

7 - then build and run.

您可以在 github 上下载示例:https://github.com/raphrel/scalingImageWhenScrollDown

you can download example on github: https://github.com/raphrel/scalingImageWhenScrollDown

也许有更好的解决方案，但这个可行.享受

there is maybe a better solution but this one works. enjoy

这篇关于向下滚动时 ImageView 缩放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！