Okay, so the design is a Tabview with various views and a simple tabbar.
And a section follows that with a header filled with texts in a white rectangular shape and a logo on top of the rectangle.
And I used .offset(x:, y,) to shift the header to remain on top permanently and the same .offset(x:, y,) to help keep the tabbar down permanently.
It worked fine on my iPhone 15 pro. But when tested on an iPhone 13 pro max, they are all jumping around. Please, is there a better way to fix this?
Sample code below:
var body: some View { //TabView Pages TabView { //HomeView HomeView() .tabItem { Label("Home", systemImage: "house.circle") } //MediaView MediaView() .tabItem { Label("Media", systemImage: "tv.and.mediabox") } //VideosView VideosView() .tabItem { Label("Videos", systemImage: "video") } //ContactView ContactView() .tabItem { Label("Contact", systemImage: "person.crop.circle.fill") } } //Tab Customisation .onAppear() { UITabBar.appearance().backgroundColor = .purple UITabBar.appearance().unselectedItemTintColor = .bubbleGumPink } .tint(.white) .ignoresSafeArea() .offset(x: 0, y:200) //Header BG .background( Image("Header") .resizable() .frame(width: 1080, height: 300) .offset(x: 0, y:-300))//HeaderText Section { ZStack { HStack { VStack (alignment: .leading) { Spacer() .frame(height: 50) Text("SOME HEADER TEXT") .font( Font.custom("Avenir Next", size: 20)) .bold() Text("Subtitle...") .font( Font.custom("Avenir Next", size: 17)) //White Rectangle BG .frame(maxWidth: .infinity) .background( RoundedRectangle(cornerRadius: 20) .foregroundColor(.white).shadow(radius: 20)) //Logo .overlay(Image("logo") .resizable() .frame(width: 70, height: 70) .offset(x:-140, y:-90)) } } } .offset(x: 0, y:-550) }Can anyone please help me?
