First: i want the slider to ignore the safe area on top, .edgesignorningsafearea(.top) doesn’t work since there is a frame to it. How can i make it go over the safe area?
Second: How can i customize my slider icons. I want them to be lines instead of dots and to be located to the left instead in the middle.
Third: As you can see in the video i also can’t drag the picture from the 3rd picture to the first to start the cycle over again. I can’t even drag from 1st back to 3rd. How can i manage this?
Fourth: I also want the ImageSlider to stop the timer once the user holds a picture (so if i hold picture one it will stay there and not go to picture two, and makes it unstable)
The code in your video you have posted is a TabView not a Slider.
What exactly are you trying to achieve with the three images?
Can you copy and paste post your code as text in a reply.
Place 3 back-ticks ``` on the line above your code and 3 back-ticks ``` on the line below your code so that it is formatted nicely. The back-tick character is located on the same keyboard key as the tilde character ~ (below the Esc key on a QWERTY keyboard).
This also makes it easier for anyone assisting as they can copy the code and carry out some testing rather than having to type the code in from an image.
Getting a clearer understanding of what you are trying to achieve will help us to guide you in resolving the other questions you may have.
import SwiftUI
struct Tab1: View {
private var numberOfImages = 3
private let timer = Timer.publish(every: 10, on: .main, in: .common) .autoconnect()
@State private var currentIndex = 0
var body: some View {
GeometryReader { proxy in
TabView(selection:$currentIndex) {
ForEach(0..<numberOfImages) {num in
Image("\(num)")
.resizable()
.scaledToFill()
.overlay(Color.black.opacity(0.4))
.tag(num)
}
}.tabViewStyle(PageTabViewStyle())
.clipShape(RoundedRectangle(cornerRadius: 10))
.frame(width: proxy.size.width, height: proxy.size.height/ 3)
.onReceive(timer, perform: { _ in
withAnimation {
currentIndex = currentIndex <
numberOfImages ? currentIndex + 1 : 0
}
})
}
}
}
struct Tab1_Previews: PreviewProvider {
static var previews: some View {
Tab1()
}
}
These three images are later going to show a certain category of recipe. So the user can easily click on one of the pictures and be directed to a specific page to find that recipe. Example: Summer Desserts, when the user then press on that picture it directs them to just, summer desserts. Fast, and easy.
About the TabView, can’t the tabView ignoresafearea?
If you place the GeometryReader inside a ZStack you can apply the .edgesIgnoringSafeAreas(.all) to the GeometryReader.
The images need to be equal in ratio otherwise it will only extend the tallest image into the safe area and the others will be sized vertically with respect to their aspect ratio.
struct Tab1: View {
private var numberOfImages = 3
private let timer = Timer.publish(every: 10, on: .main, in: .common) .autoconnect()
@State private var currentIndex = 0
var body: some View {
ZStack {
GeometryReader { proxy in
TabView(selection:$currentIndex) {
ForEach(0..<numberOfImages) {num in
Image("\(num)")
.resizable()
.scaledToFill()
// .overlay(Color.black.opacity(0.4))
.tag(num)
}
}
.tabViewStyle(PageTabViewStyle())
.clipShape(RoundedRectangle(cornerRadius: 10))
.frame(width: proxy.size.width, height: proxy.size.height / 3)
.onReceive(timer, perform: { _ in
withAnimation {
currentIndex = currentIndex < numberOfImages ? currentIndex + 1 : 0
}
})
}
.edgesIgnoringSafeArea(.all)
}
}
}
I suspect that you will have to use a different method to display your images and use a Button to cycle through the images. You could then use a NavigationLink to go to a DetailView to see the recipe associated with the specific image.
There is a Module in the SwiftUI Foundations course that Chris Ching has created that shows you how to implement a Recipe App. The sorts of things you are considering are discussed in that course.
although now I got a new problem and that is in the preview the application works and are ignoring the safe area on the top. However, the simulator does not show the image above the safe area on the top. But the code says so. The code is always right, right…?
Well, I’m using a TabBar and each TabBar page is different so I think I’m using a subview? Although, it’s connected to the content view so each TabView is coded differently
ContentView:
struct ContentView: View {
@State private var selection = 0
var body: some View {
VStack {
TabView(selection: $selection) {
Tab1()
.tag(0)
Tab2()
.tag(1)
Tab3()
.tag(2)
Tab4()
.tag(3)
Tab5()
.tag(4)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
Divider()
TabBarView(selection: $selection)
}
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
```TabBar Home page view:´´´
import SwiftUI
struct Tab1: View {
private var numberOfImages = 3
private let timer = Timer.publish(every: 10, on: .main, in: .common).autoconnect()
@State private var currentIndex = 0
var body: some View {
GeometryReader { proxy in
TabView(selection:$currentIndex) {
ForEach(0..<numberOfImages) { num in
Image("\(num)")
.tag("num")
// overlay(Color.black.opacity(0)) om relevant
}
}
.tabViewStyle(PageTabViewStyle())
.frame(width: proxy.size.width, height: proxy.size.height / 3).ignoresSafeArea(.all, edges: .all)
.onReceive(timer, perform: { _ in
withAnimation {
currentIndex = currentIndex < numberOfImages ? currentIndex + 1 : 0
}
})
}
}
}
struct Tab1_Previews: PreviewProvider {
static var previews: some View {
Tab1()
}
}