(※この記事は、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を含めた新しいサイズを代入します。

こうすることで、思うように動くようになると思います。

最後に

シンプル過ぎてすみませんでした！

スクロールしたら画像が拡大するやつ〜

はじめに

コード

最後に