[SwiftUI] scrollDisabled の使い方

     

TAGS:

ViewModifer の1つである scrollDisabled を紹介します

環境&対象

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

  • macOS Ventura 13
  • Xcode 14.1 beta 3
  • iOS 16.0

scrollDisabled

ViewModifier の 1です。
Apple の説明では、”Scroll 可能なビューのスクロールを制御します”と書かれています。

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

func scrollDisabled(_ disabled: Bool) -> some View

引数に、Bool を指定できて、scroll 無効を 有効にするかどうかを選択できます。

MEMO

SwiftUI の API によくあるのですが、XXDisabled は、true 指定すると disable(無効) になります。
2重否定なので、すこし意味が分かりにくくなってしまってます。

コード例を見ると、ScrollView だけに有効なように見えますが、List にも有効なので、List の例と合わせて説明します。

List の scroll

List は、多くの要素を表示することができ、要素数が 表示領域より多いときには、自動でスクロールできるようになる View です。

非常に便利な設計だと思いますが、問題となるケースもあります。

List の表示領域が 要素数を十分表示できるサイズであるときも、スクロール できる余地を示す scroll bounce が行われます。

表示要素が増減しないケースでは、上下にスクロールできるようになることはないため、この scroll bounce を止めたい時があります。

scrollDisabled は、List にも有効で、このような scroll bounce を止めるために使うことができます。

List に scrollDisabled を適用する

List に scrollDisabled を適用していきます。

scrollDisable なしの実装

普通に(?)、NavigationSplitView を使って、 Sidebar にリスト表示すると以下のような動作になります。

リストの内容は、固定なのですが、scroll bounce の動作が起きてしまいます。

使ったコードは、以下です。

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/10/27
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    let elements: [(String, String)] = [
        ("World", "globe.desk"),
        ("Pencil", "pencil"),
        ("Tray", "tray"),
        ("Drive", "externaldrive"),
        ("Box", "archivebox"),
        ("Paper", "doc"),
    ]

    var body: some View {
        NavigationSplitView(sidebar: {
            List {
                ForEach(elements, id: \.0.self) { item in
                    Label(title: {Text(item.0)},
                          icon: {Image(systemName: item.1)})
                }
            }
        }, detail: {
            Text("Content")
        })
        .padding()
    }
}

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

scrollDisable を付与

先ほどの List に、.scrollDisabled を付与すると、以下のような動作になります。

使用したコードは以下です。.scrollDisabled を追加しただけです。

//
//  ContentView.swift
//
//  Created by : Tomoaki Yagishita on 2022/10/27
//  © 2022  SmallDeskSoftware
//

import SwiftUI

struct ContentView: View {
    let elements: [(String, String)] = [
        ("World", "globe.desk"),
        ("Pencil", "pencil"),
        ("Tray", "tray"),
        ("Drive", "externaldrive"),
        ("Box", "archivebox"),
        ("Paper", "doc"),
    ]

    var body: some View {
        NavigationSplitView(sidebar: {
            List {
                ForEach(elements, id: \.0.self) { item in
                    Label(title: {Text(item.0)},
                          icon: {Image(systemName: item.1)})
                }
            }
            .scrollDisabled(true) // -- Add !
        }, detail: {
            Text("Content")
        })
        .padding()
    }
}

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

まとめ

scrollDisabled を使うと スクロールの可否を制御でき、List にも適用できる。

scrollDisabled で ScrollView/ List のスクロール可否を制御できる
  • scrollDisabled を使うと、スクロール可否の制御ができる
  • scrollDisabled は、ScrollView だけでなく List にも適用できる

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

SwiftUI おすすめ本

SwiftUI を理解するには、以下の本がおすすめです。

SwiftUI ViewMatery

SwiftUI で開発していくときに、ViewやLayoutのための適切なmodifierを探すのが大変です。
英語での説明になってしまいますが、以下の”SwiftUI Views Mastery Bundle”という本がビジュアル的に確認して探せるので、便利です。

英語ではありますが、1ページに コードと画面が並んでいるので、非常にわかりやすいです。

View に適用できる modifier もわかりやすく説明されているので、ビューの理解だけではなく、どのような装飾ができるかも簡単にわかります。

超便利です

SwiftUIViewsMastery

販売元のページは、こちらです。

SwiftUI 徹底入門

# SwiftUI は、毎年大きく改善されていますので、少し古くなってしまいましたが、いまでも 定番本です。

Swift学習におすすめの本

詳解Swift

Swift の学習には、詳解 Swift という書籍が、おすすめです。

著者は、Swift の初期から書籍を出していますし、Swift の前に主力言語だった Objective-C という言語についても同様の書籍を出しています。

最新版を購入するのがおすすめです。

現時点では、上記の Swift 5 に対応した第5版が最新版です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です