[SwiftUI] ScrollView の使い方

環境＆対象

ScrollView

画面に収まりきらない要素を表示する時に、いくつか方法があります。

１つの方法は、(縮小)スケーリングして画面にすべてが収まるようにすることです。

別の方法として 画面には要素の一部のみが表示され スクロールすることで、全体を見ることができるようにすることです。

上の２つを組み合わせて、拡大縮小もでき スクロールすることもできるように実装されることも多いです。

今回は、２つめの方法である スクロールする方法で実装したいくとして考えていきます。
（スケーリングして表示したければ、.resizable() を付与することになります。）

スクロールできるようにするための要素として、SwiftUI では、ScrollView が用意されています。

AppKit での NSScrollView、UIKit での UIScrollView 相当です。

Apple のドキュメントは、こちら。

Imageの表示(確認する環境)

アプリを作成して動作を確認してみますが、確認には Image を使って、画像を表示することにします。

1,920 x 2,560 の大きさのイメージをリソースに、”mountain” という名称で追加して表示してみています。

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/02/20
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        Image("mountain")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

使用した画像は、以下の画像です。

Photo by Laurice Manaligod on Unsplash

シミュレータ上では、以下のように表示されます。

＃ わかりにくいですが 画像中央が表示されています。

ScrollViewを使う

画像が大きいので、一部しか表示されていません。このような状況で、スクロールできるようにScrollView を使うのは簡単です。スクロール対象にしたいビューを 含むように ScrollView を配置します。

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/02/20
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView {
            Image("mountain")
        }
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

シミュレータ上では、以下のような動作になります。

ScrollView によりスクロールできるようになったのですが、縦方向にしかスクロールしません。

ScrollView のドキュメントを確認すると、１つめの引数で スクロール方向を設定できるようになっていて、デフォルトでは 縦方向になっていることがわかります。

使用している写真は、縦横方向のどちらも画面に収まりきらないサイズなので、縦横両方向にスクロールできるようにして使ってみます。

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/02/20
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    var body: some View {
        ScrollView([.vertical, .horizontal]) {
            Image("mountain")
        }
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

(デフォルトである) .vertical に加えて、.horizontal も指定することで、縦横どちらの方向にもスクロールできることがわかります。

＃ ScrollView の initializer の第２引数で スクロールインディケータの表示非表示も制御できます。

ScrollView を使うことで、非常に簡単にスクロールできるようなビューを作ることができました。

まとめ

ScrollView の使い方を見てきました。

説明は以上です。
不明な点やおかしな点ありましたら、こちらまで。

関連記事:

[SwiftUI] ScrollView をスクロールさせる [SwiftUI] Grid の使い方 [SwiftUI] editMode を参照する [SwiftUI] How to access .editMode