How to Add Space Above TabBar Icons in SwiftUI

Question

I'm working with SwiftUI and made a tab bar that looks like this:

The spacing above the icons is pretty minimal, and I'd like to either add some padding to the top of it or increase the height of the bar itself and vertically center the icons.

My code currently looks like this:

TabView{...

}
    .accentColor(Color(UIColor.label))
    .onAppear{...}

How could I go about this?

You can't change the TabBar size in Swiftui, but you can create an `.overlay` that can control the `TabView` by passing the selections, and you can make that larger than the standard . — Yrb, Jan 20 '22 at 01:52
How are you creating your `.tabItem`s? When I use a `Label` with empty string the icon is still centred, not like yours at the top. — Magnas, Jan 20 '22 at 07:29

score 1 · Answer 1 · answered Jan 21 '22 at 01:38

try this..

HStack {
     VStack {
         Image(systemName: "homekit")
             .resizable()
             .aspectRatio(contentMode: .fit)
             .frame(width: geometry.size.width/5, height: geometry.size.height/28)
             .padding(.top, 10)
         Spacer()
     }
 }

score 0 · Accepted Answer · answered Jan 20 '22 at 01:46

I would recommend to use custom view for your Tabbar, default one is closed to modify. Put your TabView in a VStack and put a customized Tabbar at bottom. You can freely to modify the layout. And also check this awesome repo when try to customize SwiftUI Control https://github.com/siteline/SwiftUI-Introspect

struct TabbBar: View {
    let tabs: [TabbItem]
    @Binding private var selectedItem: TabbItem
    
    init?(tabs items: [TabbItem], selected: Binding<TabbItem>) {
        guard items.count > 0 else {
            return nil
        }
        tabs = items
        _selectedItem = selected
    }
    
    var body: some View {
        HStack {
            ForEach(tabs) { item in
                TabbItemView(
                    item: item,
                    isSelected: createBindingFor(item)
                )
            }
        }
        .frame(maxWidth: .infinity)
        .padding(.top, 4)
    }
    
    private func createBindingFor(_ item: TabbItem) -> Binding<Bool> {
        Binding(
            get: { selectedItem == item },
            set: { isSelected in
                if isSelected {
                    selectedItem = item
                }
            }
        )
    }
}

How to Add Space Above TabBar Icons in SwiftUI

2 Answers2