Question 389559 in IOS Swift Question posted in
The official documentation can be found here.

Ios swift – Swift UI Tap Bar Border

I want to add a grey border to the top of the bottom tap bar in my iOS application. How can I do that with TabView and SwiftUI?

This is how my code looks like so far

struct MainView: View {
    init () {
        UITabBar.appearance().unselectedItemTintColor = UIColor(Color.theme.onSurfaceVariant)
    }
    var body: some View {
        NavigationView()
    }
}


struct NavigationView: View {
    var body: some View {
        ZStack(alignment: .bottom) {
            TabView {
                SearchScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Search Nav",
                                value: "Search",
                                comment: "Label for Search Tab Item"
                            ),
                            systemImage: "magnifyingglass"
                        )
                    }
                TripsScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Trips Nav",
                                value: "Trips",
                                comment: "Label for Trips Tab Item"
                            ),
                            systemImage: "suitcase"
                        )
                    }
                GuideScreen()
                    .tabItem {
                        Text("Guide")
                    }
                MapScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Map Nav",
                                value: "Map",
                                comment: "Label for Map Tab Item"
                            ),
                            systemImage: "map"
                        )
                    }
                ProfileScreen()
                    .tabItem {
                        Label(
                            NSLocalizedString(
                                "Profile",
                                value: "Profile",
                                comment: "Label for Profile Tab Item"
                            ),
                            systemImage: "gear"
                        )
                    }
            }
            .accentColor(Color.theme.onSurface)
            .overlay {
                GuideImageView()
            }
        }
    }
}


struct GuideImageView: View {
    var body: some View {
        VStack {
            Spacer()
            HStack {
                Spacer()
                Button(action: {
                    print("Guide Button Tapped")
                }
                ) {
                    Image("GuideNavIcon") // Replace with your avatar image
                        .resizable()
                        .frame(width: 60, height: 60)
                        .padding(1)
                        .clipShape(Circle())
                        .overlay(Circle().stroke(Color.theme.stroke, lineWidth: 1))
                }
                .offset(y: -50)
                Spacer()
            }
            .frame(height: 0)
        }
    }
}
Tags:

2

Answers


  1. 0

    First and foremost, next time please share all code with custom Color theme details with included TabView.

    On the other hand, if you add code below right after .accentColor(Color.theme.onSurface). It must be working.

    // Add the gray border
Rectangle()
    .frame(height: 1)
    .foregroundColor(.black)
    .edgesIgnoringSafeArea(.horizontal)

    enter image description here

    Login or Signup to reply.
  2. 0

    I would try to avoid using UIKit properties and ZStack hacks as much as possible (sometimes there’s no other way in SwiftUI lol). The underlying relationship to UIKit properties can be changed in future updates to SwiftUI, so it’s not recommended as a stable solution. There’s a way to do this with pure SwiftUI modifiers. See my answer here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search