[SwiftUI] ScrollView の使い方

SwiftUI2021

     

TAGS:

SwiftUI の ScrollView の使い方を説明します。

環境&対象

以下の環境で動作確認を行なっています。

  • macOS Monterey 12.3 Beta
  • Xcode 13.2.1
  • iOS 15.2

ScrollView

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

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

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

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

今回は、2つめの方法である スクロールする方法で実装したいくとして考えていきます。
(スケーリングして表示したければ、.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()
    }
}

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

mountain

Photo by Laurice Manaligod on Unsplash

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

mountainOnSimulator

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

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

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


//
//  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 の第2引数で スクロールインディケータの表示非表示も制御できます。

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

まとめ

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

ScrollView の使い方
  • ScrollView を使用すると スクロール可能なビューが簡単に作成できる
  • スクロール可能な方向を指定できる
  • スクロールインディケータの表示についても指定できる

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

コメントを残す

メールアドレスが公開されることはありません。