スクロールを実装する
Published by @SoNiceInfo at 6/25/2020
スクロールを実装するにはScrollView、Listを使います。
ScrollView
ScrollViewを呼び出す際にはスクロールする方向、スクロールバーの表示非表示、中身を指定します。
横スクロールのときは.horizontalで方向を指定し、中身をHStackで構成します。
縦スクロールのときは.verticalで方向を指定し、中身をVStackで構成します。
今回の例では予め作成したEmojiTileというViewをHStackで構成してScrollViewでスクロールできるようにしています。
実行例では実際に横スクロールしている様子を表示しています。
List
Listではその名の通り、リスト形式のスクロールを実装することができます。
以下のコードのようにデータを渡してあげるとそのデータをリスト表示することができます。
例えば以下のようにすると、複数の動物情報を持つanimalsをリスト化します。
ここでは使いませんがデータがIdentifiableプロトコルに準拠しているとリストの要素を追加、削除したときの動きをSwiftUI側で追えます。
struct Animal: Identifiable {
var id: Int
let name: String
}
List (animals) { animal in
Text(animal.name)
}今回の例では各リストの項目に直にTextを利用しています。
実行例では実際にリストをスクロールしている様子を表示しています。
//
// ContentView.swift
//
import SwiftUI
struct ContentView: View {
var body: some View {
VStack () {
Spacer()
ScrollView(.horizontal, showsIndicators: false) {
HStack {
EmojiTile(text: "😀", color: .blue)
EmojiTile(text: "😉", color: .green)
EmojiTile(text: "😊", color: .purple)
EmojiTile(text: "😀", color: .blue)
EmojiTile(text: "😉", color: .green)
EmojiTile(text: "😊", color: .purple)
EmojiTile(text: "😀", color: .blue)
EmojiTile(text: "😉", color: .green)
EmojiTile(text: "😊", color: .purple)
}
}
Spacer()
List() {
Text("Hoge")
Text("Fuga")
}
Spacer()
}
}
}
struct EmojiTile: View {
var text: String
var color: Color
var body: some View {
Text(text)
.font(.custom("Emoji", size: 50))
.padding(50)
.background(color)
.cornerRadius(10)
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}参考
ScrollView - SwiftUI | Apple Developer DocumentationList - SwiftUI | Apple Developer Documentation
