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

How to make tabbar appearance non-transparent in SwiftUI, without tapping in UIKit properties? – Ios swift

UITabBar.appearance().isTranslucent = false

I can do this thing in swiftui controller’s init method, but I want to use swiftui code to perform the same action, instead of UIKit code.

Tags:

2

Answers


  1. 0

    you could do a custom tabbar and customize anything you want

    First: Create the model

    struct TabItem: Identifiable {
    var id = UUID()
    var text: String
    var icon: String
    var tab: Tab
}

var tabItems = [
    TabItem(text: "Home", icon: "house", tab: .home),
    TabItem(text: "Serach", icon: "magnifyingglass", tab: .explore),
    TabItem(text: "Notifications", icon: "bell", tab: .notifications),
]

enum Tab: String {
    case home
    case explore
    case notifications
    case library
}

    Second: Apply tab bar

    struct ContentView: View {
    @State var selectedTab: Tab = .home
    
    var body: some View {
        ZStack(alignment: .bottom) {
            
            Group {
                switch selectedTab {
                case .home:
                    Text("First View")
                case .explore:
                    Text("Second View")
                case .notifications:
                    Text("Third View")
                case .library:
                    Text("Fourth View")
                }
            }
            .frame(maxWidth: .infinity, maxHeight: .infinity)
            
            HStack {
                ForEach(tabItems) { item in
                    Button {
                        selectedTab = item.tab
                    } label: {
                        VStack(spacing: 0) {
                            Image(systemName: item.icon)
                                .symbolVariant(.fill)
                                .font(.body.bold())
                                .frame(width: 44, height: 29)
                            Text(item.text)
                                .font(.caption2)
                                .lineLimit(1)
                        }
                        .frame(maxWidth: .infinity)
                    }
                    .foregroundStyle(selectedTab == item.tab ? .primary : .secondary)
                }
            }
            .padding(.horizontal, 8)
            .padding(.top, 14)
            .frame(height: 88, alignment: .top)

            .background(.ultraThinMaterial, in: RoundedRectangle(cornerRadius: 0, style: .continuous))
            .frame(maxHeight: .infinity, alignment: .bottom)
            .ignoresSafeArea()
        }
    }
}

    now the tab bar style is transparent thanks to ultraThinMaterial

    Login or Signup to reply.
  2. 0

    From iOS 16 this can be done with:

    TabView
{
    Group
    {
        PersonsView()
        .tabItem
        {
            Label("Together", systemImage: "person.2.fill")
        }

        ...
    }
    .toolbarBackground(.visible, for: .tabBar)
}

    Additionally set the color with .toolbarBackground(.gray, for: .tabBar).

    Group is not needed, but it would put .toolbarBackground() below one of the tab items, which looks horrible. (It must be placed inside the TabView block.)

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

Back To Top
Search