CODEWITHSUNDEEP
swiftswiftuitabbarswiftui-tabview
Nicolas Gimelli
Nicolas Gimelli

Reputation: 1302

How to Add Space Above TabBar Icons in SwiftUI

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

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?

Upvotes: 6

Views: 6466

Answers (2)

bdeviOS
bdeviOS

Reputation: 563

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()
     }
 }

Upvotes: 0

Quang Hà
Quang Hà

Reputation: 4746

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
                }
            }
        )
    }
}

Upvotes: 0

Related Questions