2024/9/20

【Swift/UIKit】UIScrollViewで指定したビューを表示するまでスクロールさせる方法！scrollRectToVisible

この記事からわかること

Swift/UIKitでUIScrollViewを任意の位置までスクロールさせる方法
scrollRectToVisibleの使い方
setContentOffsetとの違い

index

[open]

＼アプリをリリースしました／

友達や家族の誕生日をメモ！通知も届く-みんなの誕生日-

posted withアプリーチ

環境

Xcode：15.4
iOS：17.0
Swift：5.9
macOS：Sonoma 14.6.1

UIScrollViewで指定したViewまでスクロールさせる方法

UIScrollViewで任意のビューが表示されるように自動スクロールさせるにはscrollRectToVisibleメソッドを使用します。

公式リファレンス：UIScrollView.scrollRectToVisible

func scrollRectToVisible(
    _ rect: CGRect,
    animated: Bool
)

第一引数にスクロールビュー内で表示させたい領域をCGRect型で渡し、第二引数には自動スクロール時のアニメーションのON/OFFを指定します。

実際に使用する場合は以下のように表示したいビューのframeプロパティを渡せばそのビューがある位置までスクロールしてくれます。

@IBOutlet var scrollView: UIScrollView!
@IBOutlet var textField: UITextField!

@IBAction func taped() {
    guard let activeField = textField else { return }
    scrollView?.scrollRectToVisible(activeField.frame, animated: true)
}

ただこの自動スクロールはそのビュー(領域)がが表示されるまでスクロールされ流だけなので画面の一番下に表示されたタイミングでスクロールが止まってしまうので注意してください。

UIScrollViewで任意の位置までスクロールさせる方法

UIScrollViewで任意の位置まで自動スクロールさせるにはsetContentOffsetメソッドを使用します。

公式リファレンス：UIScrollView.setContentOffset

func setContentOffset(
    _ contentOffset: CGPoint,
    animated: Bool
)

第一引数にスクロールビューの表示位置(オフセット)をCGPoint型で渡し、第二引数には自動スクロール時のアニメーションのON/OFFを指定します。

こちらはCGPoint型でオフセット位置を指定できるのでより厳密な位置へのスクロールコントロールが可能なので計算して座標を割り出せば特定のビューを画面の中心に持ってくることも可能です。

func scrollCenterPosition() {
    
    guard let activeField = textField else { return }
    guard let scrollView = scrollView else { return }
    
    let fieldFrame = activeField.frame
    
    // スクロールビューのサイズを取得
    let scrollViewWidth = scrollView.bounds.size.width
    let scrollViewHeight = scrollView.bounds.size.height

    // 画面の中心座標Yを計算
    let centerY = (scrollViewHeight - fieldFrame.height) / 2

    // fieldFrame.origin.y　→ 対象Viewの上端座標Y
    // centerY　→ 画面(スクロールビュー)の中心座標Y
    // fieldFrame.height / 2　→ 対象Viewの中心座標Y
    let scrollPoint = CGPoint(x: 0, y: fieldFrame.origin.y - centerY + fieldFrame.height / 2)

    scrollView.setContentOffset(scrollPoint, animated: true)
}