3

I'm just getting started with a SwiftUI app and so the first thing I'm doing is getting my navigation set up.

I'm starting with a very simple TabBar using all default stuff, including SF Symbols for the icons.

struct ContentView: View {
    var body: some View {
        TabView {
            ActivityView()
                .tabItem {
                    Image(systemName: "house.fill")
                    Text("Activity")
                }
            
            DiscoverView()
                .tabItem {
                    Image(systemName: "magnifyingglass")
                    Text("Discover")
                }
            
            MoreView()
                .tabItem {
                    Image(systemName: "ellipsis")
                    Text("More")
                }
            
        }
    }
}

It's rendering like this:

ellipsis is aligned near top of tab bar

Why is the ellipsis not vertically centered? I thought one of the big selling points of SF Symbols is that they would all line up with each other.

I'm really confused.

aheze
  • 24,434
  • 8
  • 68
  • 125
Bryan Deemer
  • 743
  • 1
  • 6
  • 18
  • 1
    Probably a `tabItem` bug. – aheze Apr 13 '21 at 22:14
  • 1
    Try to remove the [baseline information](https://developer.apple.com/documentation/uikit/uiimage/3294229-imagewithoutbaseline) of the ellipsis Image. Or see similar [SO question](https://stackoverflow.com/questions/58185158/how-to-center-a-sf-symbols-image-vertically-in-uitabbaritem) for other possibilities. – Mickey16 Apr 14 '21 at 08:20

1 Answers1

4

Xcode 12.5.1 & 13.0 Beta 1

The 'ellipsis' symbol is still rendering to the top of the tabItem frame, and the frame and offsets cannot be modified directly in SwiftUI. I have resolved it by wrapping the image in a UIImage and removing the baseline.

    MoreView()
        .tabItem {
            Image(uiImage: UIImage(systemName: "ellipsis")!.imageWithoutBaseline())
            Text("More")
        }

enter image description here

rbaldwin
  • 4,581
  • 27
  • 38