(※이 기사는, storyboard에 스크롤 뷰를 붙이는 기초 지식이 있는 사람을 전제로 하고 있습니다.)

이번에는 스크롤 뷰를 위로 스크롤하면(아래로 당기면) 이미지(헤더 이미지)가 확대되는 녀석을 구현하고 싶습니다.

이런 느낌의 녀석입니다 ↓



(조금 곰이 붙어 있지만 실제로 빌드하면 제대로 부드럽게 움직입니다)

덧붙여서 이번의 방법은, 상당히 여러가지 분들이 기사로서 이미 투고하고 있습니다만, 제 것은 그 중에서도 제일 심플한 방법이라고 생각합니다.

그래서 "더 자세하게 이해하고 싶다!"라는 분은 다른 기사를 참고해 주시면 좋겠습니다.

그럼 가자!

소개

①에서는 우선 스크롤 뷰를 준비합시다.

② 그리고 그 위에 확대하고 싶은 뷰를 놓아주세요

그러면 이런 느낌이 듭니다.



scrollView와 확대 ImageView 사이에 view를 넣는 것도 잊지 마세요 ~

코드

이제 코드로 이동합니다.

우선 완성형에서

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var scrollView : UIScrollView!

    @IBOutlet weak var expansionImageView : UIImageView!

    private var frameHeight : CGFloat!

    override func viewDidLoad() {
        super.viewDidLoad()

        scrollView.delegate = self

        frameHeight = self.expansionImageView.frame.size.height
    }


}

extension ViewController : UIScrollViewDelegate{

    func scrollViewDidScroll(_ scrollView: UIScrollView) {

        let offsetY = scrollView.contentOffset.y

        if offsetY < 0{

            let ToPlusOffsetY = offsetY * -1

            let newY = ToPlusOffsetY * -1

            let newHeight = ToPlusOffsetY + frameHeight

            expansionImageView.frame = CGRect(x: 0, y: newY, width: view.frame.size.width, height: newHeight)
        }
    }
}

그럼 해설해 갑니다.

당연하지만 우선 storyboard에서 설정한 객체들을 이 컨트롤러에 연결해 주세요.

그리고 그 스크롤 뷰가 가지는 메소드인 「ScrollViewDidScroll」를 호출해 주세요. 이것은, 스크롤 뷰가 스크롤 했을 때에 불리는 메소드입니다.

※아, 델리게이트를 자신에게 위임하는 것도 잊지 않고. 순서적으로는, 위임처를 지정⇨메소드를 부르는데 베터라고 생각합니다.

덧붙여서, 「스크롤 뷰」라고 하는 것은, TableView나 CollectionView도 자동적으로 보관 유지하고 있는 것이므로, 명시적으로 ScrollView 그 자체에 관계없이 괜찮습니다.

그리고 scrollViewDidScroll 안에, 스크롤 뷰가 이동하는 양을 「offsetY」라고 하는 변수로서 갖게 합니다.

이 "scrollView.contentOffset.y"는 "세로 방향으로 얼마나 이동했는지"라는 의미입니다.
반대로 'scrollView.contentOffset.x'라면 '가로로 얼마나 이동했는지'가 됩니다.

그리고, 그 변수가 0 이하가 되면, 즉 「세로 방향으로 얼마나 이동했는지(세로 방향으로 이동한 이동량)가, 0 이하가 되면(위로 가면)」, 라고 하는 구문을 if분 로 만듭니다.
※「y」는, 위로 가면 갈수록 마이너스의 값이 됩니다.

그리고 그 중에서 먼저 취득한 이동량을 플러스로 변환하는 변수(ToPlusOffsetY)를 준비합니다.

게다가, 그것을 마이너스의 값으로 다시 변환해 변수로서 갖게 합니다. (Y를 더 위로 움직이기 위해)

다음에, 미리 정의한 ToPlusOffsetY와, 글로벌하게 벌써 갖게 하고 있는 frameHeight(화상의 현재의 세로 사이즈)를 더해, 변수화합니다.

그리고 마지막으로, 확대하고 싶은 이미지의 사이즈에, newY나 newHieght를 포함한 새로운 사이즈를 대입합니다.

이렇게 하면 생각대로 움직이게 된다고 생각합니다.

마지막으로

너무 심플해서 죄송했습니다!