The calendar app is just .toolbar
nothing too complicated. Using the new Toolbar stuff its build in a couple of minutes.
Calendar App:
private let days = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15 ,16, 17, 18, 19, 20, 22, 23, 24, 25] //Just example dont implement like this
private let columns = [GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible()), GridItem(.flexible())] // 7 days
var body: some View {
NavigationView {
VStack {
ScrollView {
Text("May")
.font(.largeTitle.bold())
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
LazyVGrid(columns: columns) {
ForEach(days, id: \.self) { day in
Text("\(day)")
.font(.title3)
.padding(5)
.padding(.vertical, 10)
}
}
.padding()
Text("June")
.font(.largeTitle.bold())
.frame(maxWidth: .infinity, alignment: .leading)
.padding()
LazyVGrid(columns: columns) {
ForEach(days, id: \.self) { day in
Text("\(day)")
.font(.title3)
.padding(5)
.padding(.vertical, 10)
}
}
.padding()
}
}
.toolbar {
ToolbarItem(placement: .topBarLeading) {
Label("2025", systemImage: "chevron.left")
.labelStyle(.titleAndIcon)
.frame(width: 75) // Have to set it for the ToolbarItem or only icon is visible
}
ToolbarItem(placement: .topBarTrailing) {
Image(systemName: "server.rack") //or whatever
}
ToolbarItem(placement: .topBarTrailing) {
Image(systemName: "magnifyingglass")
}
ToolbarItem(placement: .topBarTrailing) {
Image(systemName: "plus")
}
ToolbarItem(placement: .bottomBar) {
Image(systemName: "pencil")
}
ToolbarSpacer(placement: .bottomBar)
ToolbarItem(placement: .bottomBar) {
Image(systemName: "exclamationmark.circle")
}
ToolbarItem(placement: .bottomBar) {
Image(systemName: "tray")
}
}
}
}
Now the Fitness app is a little bit more challenging. I didn't come up with a perfect solution, but it the basics works. I chose the .navigationTitle()
and just a plain VStack
with the chips as you can see. It doesn't have a blur, but the basics are there. TabView
is with just the basic Tab
. It could be refactored into the .toolbar
too with a custom title?
Fitness App:
struct FitnessAppView: View {
var body: some View {
TabView {
//Different views
Tab("Fitness+", systemImage: "ring") {
FitnessRunningView()
}
Tab("Summary", systemImage: "figure.run.circle") {
FitnessRunningView()
}
Tab("Sharing", systemImage: "person.2") {
FitnessRunningView()
}
}
}
}
struct FitnessRunningView: View {
var body: some View {
NavigationView {
ZStack {
VStack {
// Horizontal chips
ScrollView(.horizontal) {
HStack {
ChipView(text: "For you")
ChipView(text: "Explore")
ChipView(text: "Plans")
ChipView(text: "Library")
}
}
.scrollIndicators(.hidden)
// Main content
ScrollView {
VStack(spacing: 20) {
Text("Hello world!")
ForEach(0..<20) { i in
Text("Item \(i)")
.frame(maxWidth: .infinity)
.padding()
.background(.thinMaterial)
.cornerRadius(10)
}
}
.padding()
}
}
}
.navigationTitle("Fitness+")
}
}
}
struct ChipView: View {
var text: String
var body: some View {
Text(text)
.font(.title3)
.padding()
.glassEffect(.regular.interactive())
.padding(10)
}
}