SwiftUI: How to let ScrollView move one item once - uiscrollview

Question

My image list is a horizontal scroll list. And image in the list is presented as full screen width. By default, it is moving continuously, however, I want to let it move one item at a time, how could I do that.
I search it here, there is some similar questions related with Android but not iOS, specifically SwiftUI.
private struct PresentedImageList: View {
var images: [ImageViewModel]
var body: some View {
GeometryReader { gr in
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: 6) {
ForEach(self.images, id: \.self) { image in
KFImage(source: .network(image.fileURL))
.resizable()
.frame(width: gr.size.width)
.aspectRatio(1.77, contentMode: .fit)
}
}
}.background(Color.black)
}
}
}

Answer 1

If you have one ScrollView appearing, then you could just simply add
.onAppear {
UIScrollView.appearance().isPagingEnabled = true
}
this code at the end of the ScrollView Closure.
entire code would be
private struct PresentedImageList: View {
var images: [ImageViewModel]
var body: some View {
GeometryReader { gr in
ScrollView(.horizontal, showsIndicators: false) {
HStack(alignment: .top, spacing: 6) {
ForEach(self.images, id: \.self) { image in
KFImage(source: .network(image.fileURL))
.resizable()
.frame(width: gr.size.width)
.aspectRatio(1.77, contentMode: .fit)
}
}
}
.onAppear {
UIScrollView.appearance().isPagingEnabled = true
}
}
}
}
However if you have multiple ScrollView appearing, that added code will affect all of the ScrollViews appearing.
So in that case you could use TabView, instead of HStackView.
var body: some View {
GeometryReader { gr in
ScrollView(.horizontal, showsIndicators: false) {
TabView(alignment: .top, spacing: 6) {
ForEach(self.images, id: \.self) { image in
KFImage(source: .network(image.fileURL))
.resizable()
.frame(width: gr.size.width)
.aspectRatio(1.77, contentMode: .fit)
}
}
//.tabViewStyle(PageTabViewStyle.page(indexDisplayMode: .never))
// --> in case you don't want the indicators
}
}
}

Answer 2

in SwiftUI this is not available. so need to do using UIKit
struct ContentView: View {
var images: [ImageViewModel]
var body: some View {
GeometryReader { gr in
ScrollViewUI(hideScrollIndicators: false) {
HStack(alignment: .top, spacing: 0) {
ForEach(self.images, id: \.self) { image in
VStack {
KFImage(source: .network(image.fileURL))
.resizable()
.frame(width: gr.size.width-6,alignment: .center)
.aspectRatio(1.77, contentMode: .fit)
}
.frame(width: gr.size.width,alignment: .center)
}
}
}
}
}
}
ScrollViewUI
struct ScrollViewUI<Content: View>: UIViewControllerRepresentable {
var content: () -> Content
var hideScrollIndicators: Bool = false
init(hideScrollIndicators: Bool, #ViewBuilder content: #escaping () -> Content) {
self.content = content
self.hideScrollIndicators = hideScrollIndicators
}
func makeUIViewController(context: Context) -> ScrollViewController<Content> {
let vc = ScrollViewController(rootView: self.content())
vc.hideScrollIndicators = hideScrollIndicators
return vc
}
func updateUIViewController(_ viewController: ScrollViewController<Content>, context: Context) {
viewController.hostingController.rootView = self.content()
}
}
ScrollViewController
class ScrollViewController<Content: View>: UIViewController, UIScrollViewDelegate {
var hideScrollIndicators: Bool = false
lazy var scrollView: UIScrollView = {
let view = UIScrollView()
view.delegate = self
view.showsVerticalScrollIndicator = !hideScrollIndicators
view.showsHorizontalScrollIndicator = !hideScrollIndicators
view.bounces = false
view.backgroundColor = .clear
view.isPagingEnabled = true
return view
}()
init(rootView: Content) {
self.hostingController = UIHostingController<Content>(rootView: rootView)
self.hostingController.view.backgroundColor = .clear
super.init(nibName: nil, bundle: nil)
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
var hostingController: UIHostingController<Content>! = nil
override func viewDidLoad() {
super.viewDidLoad()
view.addSubview(scrollView)
view.backgroundColor = .clear
self.makefullScreen(of: self.scrollView, to: self.view)
self.hostingController.willMove(toParent: self)
self.scrollView.addSubview(self.hostingController.view)
self.makefullScreen(of: self.hostingController.view, to: self.scrollView)
self.hostingController.didMove(toParent: self)
}
func makefullScreen(of viewA: UIView, to viewB: UIView) {
viewA.translatesAutoresizingMaskIntoConstraints = false
viewB.addConstraints([
viewA.leadingAnchor.constraint(equalTo: viewB.leadingAnchor),
viewA.trailingAnchor.constraint(equalTo: viewB.trailingAnchor),
viewA.topAnchor.constraint(equalTo: viewB.topAnchor),
viewA.bottomAnchor.constraint(equalTo: viewB.bottomAnchor),
])
}
}