From 02dd7683665a97391ac260d201697f79107079cc Mon Sep 17 00:00:00 2001 From: Junwei Zhao Date: Sat, 1 Mar 2025 22:49:45 +1100 Subject: [PATCH] Update flip clock --- image-flow/ClockPreviewView.swift | 74 ++++++++++------------------- image-flow/FlipClockViewModel.swift | 4 +- image-flow/SingleFlipView.swift | 12 ++--- image-flow/SlideshowView.swift | 20 +++----- 4 files changed, 40 insertions(+), 70 deletions(-) diff --git a/image-flow/ClockPreviewView.swift b/image-flow/ClockPreviewView.swift index ca1ce7e..481beb8 100644 --- a/image-flow/ClockPreviewView.swift +++ b/image-flow/ClockPreviewView.swift @@ -46,63 +46,39 @@ struct ClockPreviewView: View { } private var flipPreview: some View { - HStack(spacing: 8) { + HStack(spacing: 4) { // Hours - VStack { - ZStack { - RoundedRectangle(cornerRadius: 4) - .fill(Color.black) - .frame(width: 30, height: 30) - - Text("\(String(format: "%02d", calendar.component(.hour, from: currentTime)))") - .font(.system(size: 22, weight: .bold)) - .foregroundColor(.white) - } - - Rectangle() - .fill(Color.gray.opacity(0.5)) - .frame(height: 1) - - ZStack { - RoundedRectangle(cornerRadius: 4) - .fill(Color.black) - .frame(width: 30, height: 30) - - Text("\(String(format: "%02d", calendar.component(.hour, from: currentTime)))") - .font(.system(size: 22, weight: .bold)) - .foregroundColor(.white) - } + HStack(spacing: 2) { + digitView(value: calendar.component(.hour, from: currentTime) / 10) + digitView(value: calendar.component(.hour, from: currentTime) % 10) } + // Separator + Text(":") + .font(.system(size: 26, weight: .bold)) + .foregroundColor(.primary) + .offset(y: -2) + // Minutes - VStack { - ZStack { - RoundedRectangle(cornerRadius: 4) - .fill(Color.black) - .frame(width: 30, height: 30) - - Text("\(String(format: "%02d", calendar.component(.minute, from: currentTime)))") - .font(.system(size: 22, weight: .bold)) - .foregroundColor(.white) - } - - Rectangle() - .fill(Color.gray.opacity(0.5)) - .frame(height: 1) - - ZStack { - RoundedRectangle(cornerRadius: 4) - .fill(Color.black) - .frame(width: 30, height: 30) - - Text("\(String(format: "%02d", calendar.component(.minute, from: currentTime)))") - .font(.system(size: 22, weight: .bold)) - .foregroundColor(.white) - } + HStack(spacing: 2) { + digitView(value: calendar.component(.minute, from: currentTime) / 10) + digitView(value: calendar.component(.minute, from: currentTime) % 10) } } } + private func digitView(value: Int) -> some View { + ZStack { + RoundedRectangle(cornerRadius: 4) + .fill(Color.black) + .frame(width: 30, height: 40) + + Text("\(value)") + .font(.system(size: 26, weight: .bold)) + .foregroundColor(.white) + } + } + private var minimalPreview: some View { Text(minimalTimeFormatter.string(from: currentTime)) .font(.system(size: 36, weight: .thin, design: .rounded)) diff --git a/image-flow/FlipClockViewModel.swift b/image-flow/FlipClockViewModel.swift index 9106eba..d1438e1 100644 --- a/image-flow/FlipClockViewModel.swift +++ b/image-flow/FlipClockViewModel.swift @@ -6,7 +6,7 @@ class FlipClockViewModel: ObservableObject { setupTimer() } - private(set) lazy var flipViewModels = { (0...5).map { _ in FlipViewModel() } }() + private(set) lazy var flipViewModels = { (0...3).map { _ in FlipViewModel() } }() // MARK: - Private @@ -29,7 +29,7 @@ class FlipClockViewModel: ObservableObject { private var timeFormatter: DateFormatter { let formatter = DateFormatter() - formatter.dateFormat = "HHmmss" + formatter.dateFormat = "HHmm" return formatter } } diff --git a/image-flow/SingleFlipView.swift b/image-flow/SingleFlipView.swift index ce04639..2a99cd8 100644 --- a/image-flow/SingleFlipView.swift +++ b/image-flow/SingleFlipView.swift @@ -8,17 +8,17 @@ struct SingleFlipView: View { var body: some View { Text(text) - .font(.system(size: 40)) + .font(.system(size: 60)) .fontWeight(.heavy) .foregroundColor(.white) .fixedSize() - .padding(type.padding, -20) - .frame(width: 15, height: 20, alignment: type.alignment) - .padding(type.paddingEdges, 10) + .padding(type.padding, -30) + .frame(width: 25, height: 30, alignment: type.alignment) + .padding(type.paddingEdges, 15) .clipped() .background(Color.black) - .cornerRadius(4) - .padding(type.padding, -4.5) + .cornerRadius(6) + .padding(type.padding, -6) .clipped() } diff --git a/image-flow/SlideshowView.swift b/image-flow/SlideshowView.swift index 8738ad5..ea03356 100644 --- a/image-flow/SlideshowView.swift +++ b/image-flow/SlideshowView.swift @@ -187,37 +187,31 @@ struct FlipClockView: View { var body: some View { GeometryReader { geometry in let isPortrait = geometry.size.width < geometry.size.height - let scale: CGFloat = isPortrait ? 1.0 : 0.7 + let scale: CGFloat = isPortrait ? 1.2 : 1.0 VStack { - HStack(spacing: 15) { + HStack(spacing: 25) { // Hours - HStack(spacing: 5) { + HStack(spacing: 8) { FlipView(viewModel: viewModel.flipViewModels[0]) FlipView(viewModel: viewModel.flipViewModels[1]) } // Minutes - HStack(spacing: 5) { + HStack(spacing: 8) { FlipView(viewModel: viewModel.flipViewModels[2]) FlipView(viewModel: viewModel.flipViewModels[3]) } - - // Seconds - HStack(spacing: 5) { - FlipView(viewModel: viewModel.flipViewModels[4]) - FlipView(viewModel: viewModel.flipViewModels[5]) - } } .scaleEffect(scale) // AM/PM indicator Text(Calendar.current.component(.hour, from: currentTime) >= 12 ? "PM" : "AM") - .font(.system(size: 24 * scale, weight: .bold, design: .rounded)) + .font(.system(size: 32 * scale, weight: .bold, design: .rounded)) .foregroundColor(.white) - .padding(.top, 10 * scale) + .padding(.top, 15 * scale) } - .shadow(color: .black.opacity(0.5), radius: 5, x: 0, y: 2) + .shadow(color: .black.opacity(0.6), radius: 8, x: 0, y: 3) .frame(maxWidth: .infinity, maxHeight: .infinity) } }