'Mimic the iOS Photos APP browsing behavior with SwiftUI
I am new to SwiftUI (iOS development). I would like to mimic the iOS Photos APP browsing behavior with SwiftUI. More specifically,
- I want to display a photo in a full-screen view by tapping a photo thumb in the thumb grid view
- And then by tapping the photo, we can hide all UI including navigationbar, statusbar, and bottom tab bar like this screenshot full-screen view without UI
- In this full-screen view, I would like to swipe left/right to browse the next/previous photo.
- At last, I would like to drag down the photo to return from full-screen view to thumb grid view as this
What I have tried:
- Assume I have two lists of URLs
photoThumbList
andphotoOriginalList
, I have established the thumb grid view byLazyVGrid
and every thumb is linked to a tabview of original images byNavigationLink
. - I can browse the original images in the tabview
- I successfully hide the statusbar and navigationbar by the tapping gesture
import SwiftUI
import Kingfisher
struct MetView: View {
@State var hideBar = false
let photoThumbList = [
"https://picsum.photos/id/237/200/300", "https://picsum.photos/seed/picsum/200/300" ]
let photoOriginalList = [
"https://picsum.photos/id/237/400/600", "https://picsum.photos/seed/picsum/400/600" ]
@State private var currentIndex = 1
@State private var indexArray: [Int] = Array(0...100)
var body: some View {
ScrollView {
LazyVGrid (columns: [GridItem(.adaptive(minimum: 500))]) {
ForEach (Array(photoThumbList.enumerated()), id: \.offset) { index, url in
NavigationLink(destination: {
TabView (selection: $indexArray[index]) {
ForEach (Array(photoOriginalList.enumerated()), id: \.offset) { index2, url2 in
ZStack {
KFImage(URL(string: photoOriginalList[index2]))
.resizable()
.scaledToFit()
Button(action: {}, label: {Text("info")})
}.tag(index2) .ignoresSafeArea()
}
}
.onTapGesture {
withAnimation{
hideBar.toggle()
}
}
.navigationBarHidden(hideBar)
.statusBar(hidden: hideBar)
.tabViewStyle(PageTabViewStyle())
.indexViewStyle(PageIndexViewStyle(backgroundDisplayMode: .always))
}, label: {
KFImage(URL(string: url)!)
.resizable()
.scaledToFit()
.ignoresSafeArea()
})
}
}
}
}
}
what I want to achieve but not succeed:
- hide the bottom tab bar in the full-screen view
- drag down the image to return to the thumb grid view. I guess there is some native SwiftUI method to achieve it, just like dismissing a popover sheet by dragging (swiping) down the sheet in iOS.
- If possible, I want a mini HStack of thumbs at the bottom like in this
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
Solution | Source |
---|