TabView unable to position image correctly

Question

I'm building the step-by-step view (Paged Scrolling View with PageTabViewStyle)

I tried to put the images and the text in a ZStack but that did not solve the problem. I added a Spacer() with padding, also failed.

What confuses me, is that whenever I comment out the PageTabViewStyle, the positioning is correct but the TabView breaks ALTHOUGH it wrapped at the right bracket.

Watch here https://i.stack.imgur.com/WVG3V.jpg

Ideally, the image should be top trailing, ignoring the safe area and the NavigationBar. With the text sitting just underneath. How do I achieve this?

struct ContentView: View {
    var recipe: Recipe
    var body: some View {
            
        TabView {
            ForEach(0..<recipe.directions.count) { x in
                ScrollView(.vertical, showsIndicators: false) {
                       VStack {
                          Image(recipe.images[x])
                                .resizable()
                                .aspectRatio(contentMode: .fit)

                     Spacer()
                                
                             Text(recipe.directions[x])
                                    .font(.system(size: 29, weight: .medium))
                                    .foregroundColor(.primary)
                                    .padding()
                        
                             }.navigationTitle("")
                          }.edgesIgnoringSafeArea(.top)
                        }
                     }
                .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
                }
             }
            
    struct ContentView_Previews: PreviewProvider {
        static var previews: some View {
            NavigationView {
          ContentView(recipe: recipesData[0])
            }
          }
       }

Data File

struct Recipe: Identifiable {
    var id = UUID()
    var directions: [String]
    var images: [String]
}

let recipesData: [Recipe] = [
    Recipe(
    directions: [
    "Gather all ingredients on your countertop.",
    "Make the pesto by washing the parsley and mint. Slice tomatoes",
    "Cut the cucumber and measure 1 cup walnuts, 1/2 cup walnut oil and 2 tbsp of lemon juice.",
    ],
    images: [
    "step1",
    "step2",
    "step3"
    ]
   )
 ]

score 1 · Answer 1 · answered Jan 01 '21 at 06:32

1

You see just empty large navigation bar, so needed to hide it

    .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
    .navigationTitle("")
    .navigationBarHidden(true)

As with regards to ignoring safe area for paged tab view see post and answer https://stackoverflow.com/a/62596307/12299030

answered Jan 01 '21 at 06:32

Asperi

228,894
20
464
690

I had already tried the ```.navigationBarHidden(true)``` but because the back button is necessary for the UI, I tried kimigori's answer from your link and that worked perfectly! So thank you for the answer and the link. – Lewis Jan 01 '21 at 19:05

score 0 · Accepted Answer · answered Jan 01 '21 at 21:10

Found the solution in another post. Credit @kimigori

Remove .edgesIgnoringSafeArea(.all) from the TabView
Add frame to the TabView with screen width and height
Wrap a TabView with ScrollView
Add .edgesIgnoringSafeArea(.all) to the ScrollView

struct ContentView: View {
    let colors: [Color] = [.red, .green, .blue]

    var body: some View {
        ScrollView {
            TabView {
                ForEach(0...2, id: \.self) { index in
                    Rectangle()
                        .fill(colors[index])
                }
            }
            .frame(
                width: UIScreen.main.bounds.width ,
                height: UIScreen.main.bounds.height
            )
            .tabViewStyle(PageTabViewStyle())
            
        }
        .edgesIgnoringSafeArea(.all)
    }
}

TabView unable to position image correctly

2 Answers2