OnBoarding screen with background full image - SwiftUI - ios

Question

newbie here!
I would like to make a onBoarding screens for launch view like in example:
I need some help please, I searched on internet but I didn't found anything which can help me with that!
I found some videos and I tried to manipulate the code from tutorial, but it didn't work.
I want to make a full View background with a VStack(alignment: .center){Text("")}.
On the internet and YouTube I found just videos which teach you slider like Sliders from WebDevelopment(header).
I would be so glad if anyone can help me! Thank you so much!

Answer 1

Here is another way, like this:
struct ContentView: View {
#State private var isFinished: Bool = Bool()
var body: some View {
if isFinished {
Text("Welcome!").font(Font.system(.largeTitle, design: .monospaced))
}
else {
OnboardingView(pages: pages, isFinished: { value in isFinished = value })
.statusBar(hidden: true)
}
}
}
struct OnboardingView: View {
let pages: [OnboardingPage]
var isFinished: (Bool) -> Void
#State private var currentPage: Int = 0
#State private var toggleView: Bool = Bool()
#State private var animation: Animation? = Animation.default
var body: some View {
GeometryReader { proxy in
Image(pages[currentPage].backgroundImage)
.resizable()
.ignoresSafeArea()
.scaledToFill()
VStack {
Spacer()
if toggleView {
middleVStack(index: currentPage).transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: Edge.trailing), removal: AnyTransition.move(edge: Edge.leading)))
}
else {
middleVStack(index: currentPage).transition(AnyTransition.asymmetric(insertion: AnyTransition.move(edge: Edge.trailing), removal: AnyTransition.move(edge: Edge.leading)))
}
Spacer()
Button(action: {
if (pages.count > (currentPage + 1)) { currentPage += 1; animation = .default; toggleView.toggle() }
else { isFinished(true) }
}, label: {
Text(pages[currentPage].stringOfButton)
.font(Font.body.bold())
.padding()
.frame(maxWidth: .infinity)
.background(pages[currentPage].colorOfButton.cornerRadius(10.0))
.padding()
})
HStack {
ForEach(pages.indices, id:\.self) { index in
Circle()
.fill(Color.white.opacity(index == currentPage ? 1.0 : 0.5))
.frame(width: 12, height: 12, alignment: .center)
.onTapGesture { animation = nil ; currentPage = index }
}
}
}
.foregroundColor(.white)
.shadow(radius: 5.0)
.animation(animation, value: currentPage)
}
}
func middleVStack(index: Int) -> some View {
VStack(spacing: 20.0) {
Image(systemName: pages[index].image).font(Font.system(size: 100.0).bold())
Text(pages[index].title)
.font(Font.system(size: 50, weight: .bold, design: .rounded))
Text(pages[index].info)
.font(Font.system(.title3, design: .rounded).bold())
.padding()
}
}
}
struct OnboardingPage: Identifiable {
let id: UUID = UUID()
var backgroundImage: String
var image: String
var title: String
var info: String
var stringOfButton: String
var colorOfButton: Color
}
let info: String = " Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
var pages: [OnboardingPage] = [OnboardingPage(backgroundImage: "background1", image: "megaphone", title: "Title 1", info: info, stringOfButton: "Next", colorOfButton: .green),
OnboardingPage(backgroundImage: "background2", image: "gauge", title: "Title 2", info: info, stringOfButton: "Next", colorOfButton: .orange),
OnboardingPage(backgroundImage: "background3", image: "gyroscope", title: "Title 3", info: info, stringOfButton: "Get Started", colorOfButton: .blue)]

Answer 2

This is the general idea of what you are going for.
You can achieve it with a ZStack, where the image is the background. You will then want to scale the image to fit the background, ignoring safe area.
Example:
struct ContentView: View {
var body: some View {
ZStack {
Image("background")
.resizable()
.scaledToFill()
.ignoresSafeArea()
VStack {
Text("Title").font(.title)
Text("Content")
}
.foregroundColor(.white)
.shadow(radius: 1)
VStack {
Spacer()
Button {
print("pressed")
} label: {
Text("Button")
.padding()
.background(Color.yellow)
.clipShape(Capsule())
}
}
}
}
}
Result:
I do not own the rights to this image.