Alright so, i’m making a recipes app.
In this recipes app i have a navigation in form of a tabBar. In the different categories on the tabBar, etc “home, meat, vegetables, recipes”
I want different coding in these pages. So i notice when i edit the contentview.swift code it changes the app.
Here’s the code for the contentview.swift
import SwiftUI
struct ContentView: View {
@State private var selection = 0
var body: some View {
VStack {
TabView(selection: $selection) {
Text("Hem")
.tag(0)
Text("Animaliskt")
.tag(1)
Text("Sök Recept")
.tag(2)
Text("Vegetariskt")
.tag(3)
Text("Mina Recept")
.tag(4)
}
.tabViewStyle(PageTabViewStyle(indexDisplayMode: .never))
Divider()
TabBarView(selection: $selection)
}
}
struct ContentView_Previews:
PreviewProvider {
static var previews: some View {
ContentView()
}
}
So i don’t really wanna change anything here cause i wanna create different file for each different tabBar option. How do
I go from there?
Also, here is my code for the TabBar itself.
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")
]