I have an app with a TabView. The tabItems look fine on the iPhone, but one is cut off on the iPad. See the picture below.
The code is simple. Here it is.
.tabItem {
Label("Saved", systemImage: "lock.fill")
}
On the iPhone, the image is positioned below the text. On the iPad, the image is positioned before the text.
'Save' would work, but that's not correct either. I'm using Xcode 15 and my minimum deployment is iOS 17.
Anybody have a work around for this?
A lame workaround (note the extra space), but this still needs to be fixed and I filed a feedback.
.tabItem {
if horizontalSizeClass == .compact {
Label("Saved", systemImage: "lock.fill")
} else {
Label("Saved ", systemImage: "lock.fill")
}
}
Please post that feedback number here, thanks! Also, note that the HIG states that for iPad, sidebars are best practice over tab bars (although of course tab bars are supported, so that feedback is a good one to file)
The feedback number is FB13188165. I will look into sidebars for the iPad.
You can simply use HStack to separate the name text and its corresponding image.
import SwiftUI
struct ContentView: View {
var body: some View {
TabView{
FirstView()
.tabItem {
HStack {
Text("Save")
.fixedSize()
Image(systemName: "lock.fill")
}
}
SecondView()
.tabItem {
HStack {
Text("Things")
.fixedSize()
Image(systemName: "message.fill")
}
}
}
}
}
struct FirstView: View {
var body: some View {
Text("First")
}
}
struct SecondView: View {
var body: some View {
Text("Second")
}
}