79746190

Date: 2025-08-25 21:00:55
Score: 1.5
Natty:
Report link

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)
    }
}
Reasons:
  • Long answer (-1):
  • Has code block (-0.5):
  • Ends in question mark (2):
  • Low reputation (1):
Posted by: Cactusss