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

SwiftUI: Use image from assets for TabView in NavigationStack – Ios swift

NavigationStack {
    TabView(selection: $selection) {
        HomeView()
            .tabItem {
                Image(systemName: "rectangle.grid.1x2.fill")
                    .padding(.top, 8)
            }
            .tag(0)
        
        ChatsView()
            .tabItem {
                Image(systemName: "message")
                    .padding(.top, 8)
            }
            .tag(1)
    }
    .accentColor(.black)
}

I want to use an image from assets instead of Image(systemName: "message"). When I write Image("myImage"), it does load the image from the assets, but it’s not the same size, it’s way too large. So I tried Image("myImage").resizable().frame(width: 20, height: 20). But the resizing just does not work here, the size stays the same, I don’t know why. So the next thing I tried is just scaling down the asset image. This does work, but the image displayed is very pixelated with this approach. So not an option either.

How can I do this?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I had to adjust NexusUA's answer a little to make it work:

    struct CustomTabBar: View {
    @Binding var selection: Int
    
    var body: some View {
        HStack {
            Button(action: {
                self.selection = 0
            }) {
                Image(systemName: "rectangle.grid.1x2.fill")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 0 ? .black : .gray)
            }
            
            Button(action: {
                self.selection = 1
            }) {
                Image(systemName: "message")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 1 ? .black : .gray)
            }
        }
        .padding()
    }
}

struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        VStack {
            TabView(selection: self.$selection) {
                HomeView()
                    .tag(0)
                ChatsView()
                    .tag(1)
            }
            // add this
            .tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
            .navigationBarHidden(true)

            CustomTabBar(selection: self.$selection)
        }
    }
}

  2. 0

    Try this:

    struct CustomTabBar: View {
    @Binding var selection: Int
    
    var body: some View {
        HStack {
            Button(action: {
                self.selection = 0
            }) {
                Image(systemName: "rectangle.grid.1x2.fill")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 0 ? .black : .gray)
            }
            
            Button(action: {
                self.selection = 1
            }) {
                Image(systemName: "message")
                    .font(.system(size: 60))
                    .foregroundColor(self.selection == 1 ? .black : .gray)
            }
        }
        .padding()
    }
}

struct ContentView: View {
    @State private var selection = 0
    
    var body: some View {
        VStack {
            TabView(selection: self.$selection) {
                HomeView()
                    .tag(0)
                ChatsView()
                    .tag(1)
            }
            CustomTabBar(selection: self.$selection)
        }
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search