【SwiftUI】スクロールビューを作成

本記事では、SwiftUIのにてスクロールビューを実装する方法とその活用例について解説していきます。

1. スクロールビューとは
2. イメージビューの設置
3. スクロールビューの設置
4. まとめ

スクロールビューとは

スクロールビューとは、画面の表示サイズより縦や横に長いコンテンツを表示する際に使用する機能です。

スクロールビューを使用することで限られた画面サイズでも、縦スクロールや横スクロールを行うことで多くの情報を表示することができます。

例えば、twitterやinstagramのように縦にスクロールすることで複数の投稿を見ることができたり、画像を複数横に並べて表示する機能なども該当します。

縦のスクロールビュー

以降では複数の画像をスクロールビューで並べて、画面をスクロールすることで全ての画像を表示することができる機能を実現しながらスクロールビューについて解説していきます。

イメージビューの設置

スクロールビューにの中にインスタグラムのような画像と画像タイトルの組み合わせを入れていくため、まずはそのパーツを準備していきます。

画像の用意

今回は任意のフリー素材の画像を5つほど用意し、プロジェクト内のAssetsに用意した画像をドラッグ&ドロップしてアップロードしていきます。

画像をアップロードできたかの確認は、「Assets」を開いた状態で対象の画像の名称とそれぞれの画像表示を見ることで確認できます。

画像データを表示するための配列を作成

画像を画面表示させるために画像データを配列に入れていきます。画像データは、画像名とタイトルを組み合わせた構造体で作成します。

構造体を定義するための新規ファイルは、「new」→「File」から「Swift File」を選択して作成します。

構造体名は任意に好きな名前を設定でき、今回は「ImageData」とします。構造体はIdentifiableプロトコルを採用したUUIDを持つ構造体とします。UUIDを持たせることによって構造体を配列などに入れた際に各データを一意に識別できるようになります。

//写真のデータを構造体へ
struct ImageData: Identifiable{
    var id = UUID()
    var imageName:String
    var imageTitle:String
}

構造体を格納する配列には「imageArray」と名付けます。配列には、assetsにアップロードした画像の数だけ構造体を格納し、imageNameには画像のファイル名、imageTitleには画面上に表示する画像のタイトルを設定していきます。

//構造体ImageDataの配列を作成
var imageArray = [
    ImageData(imageName: "image1", imageTitle: "夕焼け"),
    ImageData(imageName: "image2", imageTitle: "海と山"),
    ImageData(imageName: "image3", imageTitle: "キャンプ"),
    ImageData(imageName: "image4", imageTitle: "大自然"),
    ImageData(imageName: "image5", imageTitle: "街並み")
]

ファイル全体の記述は以下のようになります。

画像データ１枚分のビューデータを作成

先ほど作成した構造体データを表示するためのビューを作成します。

「new」→「file」→「SwiftUI View」からビューファイルを作成し、ImageViewというファイル名をつけて保存します。

この画像一枚分のデータを表示するためのImageViewは、ContentViewから構造体ImageDataを受け取って表示することを想定していますので、構造体を受け取るための変数を用意します。

var singleImage:ImageData

画像データのビューは、画像とタイトルの組み合わせで作成しますので、VStack内にImage()とText()を配置します。それぞれのパラメータとして、変数singleImageの中からimageName,imageTitleを取り出します。

VStack{
　Image(singleImage.imageName)
　Text(singleImage.imageTitle)
}

これだと視覚的に綺麗なデザインではないので、スタイルを変更した後のソースコードと実際の表示は以下のようになります。

struct ImageView: View {
    var singleImage:ImageData
    var body: some View {
        VStack{
            Image(singleImage.imageName)
                .resizable()
                .aspectRatio(contentMode: .fit)
            Text(singleImage.imageTitle)
                .bold()
                .padding(.top, 10)
                .padding(.bottom, 20)
        }
        .background(Color(red: 0.3, green: 0.6, blue: 0.8))
        .cornerRadius(10)
    }
}

表示内容

スクロールビューの設置

ここまでで画像の構造体化、構造体データを表示するためのビューを準備してきましたので、ContentViewにて実際にスクロールビューを表示していきます。

ContentViewの中で行うのは、1枚のビューの構造体データを表示するImageViewを繰り返し呼び出す処理になります。

まずはbodyの中にScrollView{}を配置します。ScrollViewの中に要素を配置することで配置された要素が、画面幅以上に広がってもスクロールで表示することができます。

ScrollViewの中には、LazyVStackを入れます。LazyVStackは、画面表示をする内容を初期表示で一括で取得するのではなく、表示する項目のみを適宜呼び出すことができる機能になります。

VStackは、大量のデータを読み込む際に初期表示で一気に読み込むため、データの読み込みに時間がかかってしまう問題があります。一方でLazyVStackを使用することで、画面表示に必要なデータを適宜呼び出すため、データ取得、画面表示の処理を最小限にすることができます。

var body: some View {
        ScrollView{
            LazyVStack(alignment: .center, spacing: 20) {
                ForEach(imageArray) { imageData in
                   ImageView(singleImage: imageData)
                }
            }
        }
        .padding(.horizontal)
    }

実際の表示