スクロールしたら画像が拡大するやつ〜
(※この記事は、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を含めた新しいサイズを代入します。
こうすることで、思うように動くようになると思います。
最後に
シンプル過ぎてすみませんでした!
Author And Source
この問題について(スクロールしたら画像が拡大するやつ〜), 我々は、より多くの情報をここで見つけました https://qiita.com/shunya813/items/d23efdc3d2f49669204a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .