In this video we will create a progressive circuit fitness dashboard with SwiftUI
Subscribe: https://www.youtube.com/c/Cairocoders/featured
Source Code
ContentView.swift
//
// ContentView.swift
// Test
//
// Created by Cairocoders
//
import SwiftUI
struct ContentView: View {
var body: some View {
Home()
}
}
struct Home : View {
var columns = Array(repeating: GridItem(.flexible(), spacing: 20), count: 2)
var body: some View{
GeometryReader { geometry in
ZStack {
Image("bg2")
.resizable()
.aspectRatio(geometry.size, contentMode: .fill)
.edgesIgnoringSafeArea(.all)
ScrollView(.vertical, showsIndicators: false) {
VStack{
HStack{
Text("Hello Cairocoders")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
Spacer(minLength: 0)
Button(action: {}) {
Image(systemName: "slider.horizontal.3")
.renderingMode(.template)
.foregroundColor(.white)
}
}//End HStack
.padding()
HStack{
Text("Stats Today")
.font(.title)
.fontWeight(.bold)
.foregroundColor(.white)
Spacer(minLength: 0)
Text(Date(), style: .date)
.foregroundColor(.white)
}//End HStack
.padding()
LazyVGrid(columns: columns,spacing: 30){
ForEach(stats_Data){stat in
VStack(spacing: 32){
HStack{
Text(stat.title)
.font(.system(size: 22))
.fontWeight(.bold)
.foregroundColor(.white)
Spacer(minLength: 0)
}
ZStack{
Circle()
.trim(from: 0, to: 1)
.stroke(Color.gray, lineWidth: 10)
.frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)
Circle()
.trim(from: 0, to: (stat.currentData / stat.goal))
.stroke(stat.color, style: StrokeStyle(lineWidth: 10, lineCap: .round))
.frame(width: (UIScreen.main.bounds.width - 150) / 2, height: (UIScreen.main.bounds.width - 150) / 2)
Text(getPercent(current: stat.currentData, Goal: stat.goal) + " %")
.font(.system(size: 22))
.fontWeight(.bold)
.foregroundColor(Color.white)
.rotationEffect(.init(degrees: 90))
}
.rotationEffect(.init(degrees: -90))
Text(getDec(val: stat.currentData) + " " + getType(val: stat.title))
.font(.system(size: 22))
.foregroundColor(.white)
.fontWeight(.bold)
}
.padding()
.background(Color.white.opacity(0.19))
.cornerRadius(15)
.shadow(color: Color.white.opacity(0.2), radius: 10, x: 0, y: 0)
}
}
.padding()
}
}//End Scrollview
}//End ZStack
}//End GeometryReader
}
}
// calculating Type...
func getType(val: String)->String{
switch val {
case "Water": return "L"
case "Pushups": return "Pu"
case "Running": return "Km"
case "Cycling": return "Km"
case "Steps": return "stp"
default: return "Kcal"
}
}
// converting Number to decimal...
func getDec(val: CGFloat)->String{
let format = NumberFormatter()
format.numberStyle = .decimal
return format.string(from: NSNumber.init(value: Float(val)))!
}
// calculating percent...
func getPercent(current : CGFloat,Goal : CGFloat)->String{
let per = (current / Goal) * 100
return String(format: "%.1f", per)
}
struct Stats : Identifiable {
var id : Int
var title : String
var currentData : CGFloat
var goal : CGFloat
var color : Color
}
var stats_Data = [
Stats(id: 0, title: "Running", currentData: 7.5, goal: 15, color: Color.blue),
Stats(id: 1, title: "Water", currentData: 3.5, goal: 5, color: Color.green),
Stats(id: 2, title: "Calories", currentData: 1230, goal: 2000, color: Color.orange),
Stats(id: 3, title: "Pushups", currentData: 45, goal: 100, color: Color.red),
Stats(id: 4, title: "Cycling", currentData: 12.5, goal: 25, color: Color.blue),
Stats(id: 5, title: "Steps", currentData: 6423, goal: 10000, color: Color.orange),
]
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
#swiftui #mobile-apps