Okay, so the design is a Tabview with varied views and a easy tabbar.
And a bit follows that with a header full of texts in a white rectangular form and a brand on high of the rectangle.
And I used .offset(x:, y,) to shift the header to stay on high completely and the identical .offset(x:, y,) to assist preserve the tabbar down completely.
It labored wonderful on my iPhone 15 professional. However when examined on an iPhone 13 professional max, they’re all leaping round. Please, is there a greater strategy to repair this?
Pattern code beneath:
var physique: some View {
//TabView Pages
TabView {
//HomeView
HomeView()
.tabItem {
Label("Dwelling", systemImage: "home.circle")
}
//MediaView
MediaView()
.tabItem {
Label("Media", systemImage: "television.and.mediabox")
}
//VideosView
VideosView()
.tabItem {
Label("Movies", systemImage: "video")
}
//ContactView
ContactView()
.tabItem {
Label("Contact", systemImage: "particular person.crop.circle.fill")
}
}
//Tab Customisation
.onAppear() {
UITabBar.look().backgroundColor = .purple
UITabBar.look().unselectedItemTintColor = .bubbleGumPink
}
.tint(.white)
.ignoresSafeArea()
.offset(x: 0, y:200)
//Header BG
.background(
Picture("Header")
.resizable()
.body(width: 1080, top: 300)
.offset(x: 0, y:-300))
//HeaderText
Part {
ZStack {
HStack {
VStack (alignment: .main) {
Spacer()
.body(top: 50)
Textual content("SOME HEADER TEXT")
.font(
Font.customized("Avenir Subsequent", measurement: 20))
.daring()
Textual content("Subtitle...")
.font(
Font.customized("Avenir Subsequent", measurement: 17))
//White Rectangle BG
.body(maxWidth: .infinity)
.background(
RoundedRectangle(cornerRadius: 20)
.foregroundColor(.white).shadow(radius: 20))
//Emblem
.overlay(Picture("brand")
.resizable()
.body(width: 70, top: 70)
.offset(x:-140, y:-90))
}
} }
.offset(x: 0, y:-550)
}
Can anybody please assist me?
