Created
March 31, 2021 20:16
-
-
Save balazserd/3b10b4492832d860c614c007434a002e to your computer and use it in GitHub Desktop.
For reddit iOS recreating this view: https://apps.apple.com/app/apple-store/id1548949037?mt=8
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// | |
// PlaygroundView.swift | |
// | |
// Created by Balazs Erdesz on 2021. 03. 31.. | |
// | |
import SwiftUI | |
struct PlaygroundView: View { | |
var body: some View { | |
VStack(alignment: .leading, spacing: 6) { | |
Spacer() | |
Text("CURRENT STREAKS") | |
.font(.system(size: 14)) | |
.foregroundColor(.gray) | |
LazyVGrid(columns: Array(repeating: GridItem(.flexible()), count: 4)) { | |
moveColumn | |
excerciseColumn | |
standColumn | |
allColumn | |
} | |
.padding(.horizontal, 10).padding(.vertical, 20) | |
.background( | |
RoundedRectangle(cornerRadius: 8) | |
.fill(Color.white) | |
) | |
Spacer() | |
.frame(height: 20) | |
VStack { | |
Text("\(Image(systemName: "calendar")) Last Week vs. This Week") | |
.foregroundColor(.black) | |
Text("Weeks start on Monday") | |
.foregroundColor(.gray) | |
horizontalBar(text: "1781 kcals") | |
.foregroundColor(.gray.opacity(0.5)) | |
horizontalBar(percentage: 1780 / 1781, text: "1780 kcals") | |
.foregroundColor(.red) | |
Spacer() | |
.frame(height: 30) | |
horizontalBar(text: "1h 9m") | |
.foregroundColor(.gray.opacity(0.5)) | |
horizontalBar(percentage: 54 / 69, text: "54m") | |
.foregroundColor(.green) | |
} | |
.padding() | |
.background( | |
RoundedRectangle(cornerRadius: 8) | |
.fill(Color.white) | |
) | |
Spacer() | |
} | |
.padding() | |
} | |
private func horizontalBar(percentage: CGFloat = 1.0, text: String) -> some View { | |
GeometryReader { proxy in | |
RoundedRectangle(cornerRadius: 4) | |
.frame(width: proxy.size.width * percentage, height: 30) | |
.overlay( | |
HStack { | |
Text(text) | |
.foregroundColor(.black) | |
.bold() | |
Spacer() | |
} | |
.padding(.horizontal, 5) | |
) | |
} | |
.frame(height: 30) //You need a separate GeometryReader for all bars because GR expands as much as possible. | |
} | |
private var moveColumn: some View { | |
VStack(spacing: 10) { | |
Text("Move") | |
.font(.system(size: 12)) | |
.foregroundColor(.gray) | |
Text("1") | |
.font(.system(size: 25, weight: .bold)) | |
.foregroundColor(.red) | |
Text("Day") | |
.font(.system(size: 13)) | |
.foregroundColor(.black.opacity(0.6)) | |
} | |
} | |
private var excerciseColumn: some View { | |
VStack(spacing: 10) { | |
Text("Excercise") | |
.font(.system(size: 12)) | |
.foregroundColor(.gray) | |
Text("1") | |
.font(.system(size: 25, weight: .bold)) | |
.foregroundColor(.green) | |
Text("Day") | |
.font(.system(size: 13)) | |
.foregroundColor(.black.opacity(0.6)) | |
} | |
} | |
private var standColumn: some View { | |
VStack(spacing: 10) { | |
Text("Stand") | |
.font(.system(size: 12)) | |
.foregroundColor(.gray) | |
Text("30") | |
.font(.system(size: 25, weight: .bold)) | |
.foregroundColor(.blue) | |
Text("Day") | |
.font(.system(size: 13)) | |
.foregroundColor(.black.opacity(0.6)) | |
} | |
} | |
private var allColumn: some View { | |
VStack(spacing: 10) { | |
Text("All") | |
.font(.system(size: 12)) | |
.foregroundColor(.gray) | |
Text("1") | |
.font(.system(size: 25, weight: .bold)) | |
.foregroundColor(.gray) | |
Text("Day") | |
.font(.system(size: 13)) | |
.foregroundColor(.black.opacity(0.6)) | |
} | |
} | |
} | |
struct PlaygroundView_Previews: PreviewProvider { | |
static var previews: some View { | |
PlaygroundView() | |
.preferredColorScheme(.dark) | |
} | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment