画像のスクロールビュー/スライダーを作成したいです。サンプルコードをご覧ください:
ScrollView(.horizontal, showsIndicators: true) {
HStack {
Image(shelter.background)
.resizable()
.frame(width: UIScreen.main.bounds.width, height: 300)
Image("pacific")
.resizable()
.frame(width: UIScreen.main.bounds.width, height: 300)
}
}
これでユーザーはスライドできるようになりますが、少し違ったものにしたいです (UIKit の PageViewController に似ています)。多くのアプリでよく見かける、点をインジケーターとして使う典型的な画像スライダーのように動作させたいのです。
- 常に完全な画像が表示され、中間画像は表示されません。したがって、ユーザーがドラッグして途中で停止すると、自動的に完全な画像にジャンプします。
- インジケーターとしてドットが欲しいです。
多くのアプリがこのようなスライダーを使用しているのを見たことがあるのですが、既知の方法があるはずですよね?
ベストアンサー1
今年の SwiftUI には、これに対する組み込みメソッドはありません。将来的には、システム標準の実装が登場するでしょう。
短期的には、2つの選択肢があります。Asperiが指摘したように、Appleのチュートリアルには、UIKitのPageViewControllerをSwiftUIで使用するためにラップするセクションがあります(UIKitとのインターフェース)。
2 番目のオプションは、独自に作成することです。SwiftUI で同様のものを作成することは完全に可能です。以下は、スワイプまたはバインディングによってインデックスを変更できる概念実証です。
struct PagingView<Content>: View where Content: View {
@Binding var index: Int
let maxIndex: Int
let content: () -> Content
@State private var offset = CGFloat.zero
@State private var dragging = false
init(index: Binding<Int>, maxIndex: Int, @ViewBuilder content: @escaping () -> Content) {
self._index = index
self.maxIndex = maxIndex
self.content = content
}
var body: some View {
ZStack(alignment: .bottomTrailing) {
GeometryReader { geometry in
ScrollView(.horizontal, showsIndicators: false) {
HStack(spacing: 0) {
self.content()
.frame(width: geometry.size.width, height: geometry.size.height)
.clipped()
}
}
.content.offset(x: self.offset(in: geometry), y: 0)
.frame(width: geometry.size.width, alignment: .leading)
.gesture(
DragGesture().onChanged { value in
self.dragging = true
self.offset = -CGFloat(self.index) * geometry.size.width + value.translation.width
}
.onEnded { value in
let predictedEndOffset = -CGFloat(self.index) * geometry.size.width + value.predictedEndTranslation.width
let predictedIndex = Int(round(predictedEndOffset / -geometry.size.width))
self.index = self.clampedIndex(from: predictedIndex)
withAnimation(.easeOut) {
self.dragging = false
}
}
)
}
.clipped()
PageControl(index: $index, maxIndex: maxIndex)
}
}
func offset(in geometry: GeometryProxy) -> CGFloat {
if self.dragging {
return max(min(self.offset, 0), -CGFloat(self.maxIndex) * geometry.size.width)
} else {
return -CGFloat(self.index) * geometry.size.width
}
}
func clampedIndex(from predictedIndex: Int) -> Int {
let newIndex = min(max(predictedIndex, self.index - 1), self.index + 1)
guard newIndex >= 0 else { return 0 }
guard newIndex <= maxIndex else { return maxIndex }
return newIndex
}
}
struct PageControl: View {
@Binding var index: Int
let maxIndex: Int
var body: some View {
HStack(spacing: 8) {
ForEach(0...maxIndex, id: \.self) { index in
Circle()
.fill(index == self.index ? Color.white : Color.gray)
.frame(width: 8, height: 8)
}
}
.padding(15)
}
}
デモ
struct ContentView: View {
@State var index = 0
var images = ["10-12", "10-13", "10-14", "10-15"]
var body: some View {
VStack(spacing: 20) {
PagingView(index: $index.animation(), maxIndex: images.count - 1) {
ForEach(self.images, id: \.self) { imageName in
Image(imageName)
.resizable()
.scaledToFill()
}
}
.aspectRatio(4/3, contentMode: .fit)
.clipShape(RoundedRectangle(cornerRadius: 15))
PagingView(index: $index.animation(), maxIndex: images.count - 1) {
ForEach(self.images, id: \.self) { imageName in
Image(imageName)
.resizable()
.scaledToFill()
}
}
.aspectRatio(3/4, contentMode: .fit)
.clipShape(RoundedRectangle(cornerRadius: 15))
Stepper("Index: \(index)", value: $index.animation(.easeInOut), in: 0...images.count-1)
.font(Font.body.monospacedDigit())
}
.padding()
}
}
2つの注意点:
- GIFアニメーションでは、ファイルサイズの制限によりフレームレートを落として大幅に圧縮しなければならなかったため、アニメーションの滑らかさを示すのに非常に不十分です。シミュレーターや実際のデバイスでは見栄えがします。
- シミュレーターでのドラッグ ジェスチャは扱いにくい感じがしますが、物理デバイスでは実にうまく機能します。