Code the pages in each tab

App Development
1

Hi! So i’ve been able to code an working tabBar for my app, and now i really want to go in to each section at the tabBar to add content to the pages. Is it possible to start a new file ”contentview” and then code for let’s say for example ”home” or does the code have to share with my current TabCode? And how can i make them separate?

import SwiftUI

       struct TabBarView: View {
       @Binding var selection: Int
       @Namespace private var currentTab

var body: some View {
    HStack(alignment: .bottom)  {
        ForEach(tabs.indices) { index in
            GeometryReader { geometry in
               VStack(spacing: 4) {
            if selection == index {
                Color(.label)
                    .frame(height: 2)
                    .offset(y: -8)
                    .matchedGeometryEffect(id: "currentTab", in: currentTab)
                
                if tabs[selection].label == "Sparade Recept" && tabs[index].label == "Sparade Recept" {
                    Image(systemName: tabs[index].image)
                        .frame(height: 20)
                        .rotationEffect(.degrees(25))
                } else {
                    Image(systemName:tabs[index].image)
                        .frame(height: 20)
                }
                
                Text(tabs[index].label)
                    .font(.caption2)
                    .fixedSize()
            }
            .fixedSize(horizontal: false, vertical: true)
            .frame(width: geometry.size.width / 2, height: 44, alignment: .bottom)
               .padding(.horizontal)
            .foregroundColor(selection == index ? Color(.label) : .secondary)
               .onTapGesture {
                withAnimation {
                    selection = index
              }
           }
        }
            .frame(height: 44, alignment: .bottom) 
           
             struct TabBarView_Previews: PreviewProvider {
            static var previews: some View {
           TabBarView(selection: Binding.constant(0))
           .previewLayout(.sizeThatFits)

            struct Tab {
            let image: String
            let label: String
       } 

            let tabs = [
           Tab(image: "house", label: "Startsida"),
           Tab(image: "hare", label: "Animaliskt"),
           Tab(image: "magnifyingglass", label: "Sök Recept"),
           Tab(image: "leaf", label: "Vegetariskt"),
          Tab(image: "books.vertical.fill", label: "Mina Recept")
       ]
1 Like
2

You mean you’ve created the tabs but now you want to add content to each tab? Like the actual screen you see when clicking on the different tabs?

Or you want to customize the tab bar itself?

3

Oh sorry haha, yeah the tabBar is done. Now i want to change whats going to be displayed on each screen

image
image1512×2016 1.43 MB

Like what’s going to be displayed in each section within those tabs

Like for example if i wanna edit ”hem” which is “home” not the tab but the layout of the page itself, can i then create a new content.swift so i dont erase the tabbar by accident? Lol

4

Can you show me your code for creating the tab bars?

8

I’d highly suggest you make tabs similar to this post

In the second code snippet it’s just two different text views one for hello and one for world, but those can be completely replaced by a custom SwiftUI view that looks however you want it to

9

Thank you! Although im sorry but do i need to rewrite my code to be able to code a page selected to that specific tab?

Then how do i go on and create that code if i still want the same layout as my current tabbar?

10

You should crate a project similar to the example.

You then need to figure out with all the modifiers you used, how you apply those to the tabs in the example

1 Like