From 40009c4a859654625978338fb407845a73df6229 Mon Sep 17 00:00:00 2001 From: Sami Samhuri Date: Mon, 12 Feb 2024 22:12:17 -0800 Subject: [PATCH] Improve slider example a bit --- AccessibilityTalk.xcodeproj/project.pbxproj | 12 ++-- .../{CustomSlider.swift => BadSlider.swift} | 20 ++++-- AccessibilityTalk/ExampleSliderView.swift | 11 ++-- AccessibilityTalk/GoodSlider.swift | 66 +++++++++++++++++++ 4 files changed, 94 insertions(+), 15 deletions(-) rename AccessibilityTalk/{CustomSlider.swift => BadSlider.swift} (72%) create mode 100644 AccessibilityTalk/GoodSlider.swift diff --git a/AccessibilityTalk.xcodeproj/project.pbxproj b/AccessibilityTalk.xcodeproj/project.pbxproj index d8627e9..90683eb 100644 --- a/AccessibilityTalk.xcodeproj/project.pbxproj +++ b/AccessibilityTalk.xcodeproj/project.pbxproj @@ -26,8 +26,9 @@ 96088D922B7B220200E062FB /* GoodDayView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D912B7B220200E062FB /* GoodDayView.swift */; }; 96088D942B7B286E00E062FB /* CalendarBadView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D932B7B286E00E062FB /* CalendarBadView.swift */; }; 96088D962B7B300C00E062FB /* CalendarGoodView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D952B7B300C00E062FB /* CalendarGoodView.swift */; }; - 96088D982B7B37B400E062FB /* CustomSlider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D972B7B37B400E062FB /* CustomSlider.swift */; }; + 96088D982B7B37B400E062FB /* BadSlider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D972B7B37B400E062FB /* BadSlider.swift */; }; 96088D9A2B7B39C300E062FB /* ExampleSliderView.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D992B7B39C300E062FB /* ExampleSliderView.swift */; }; + 96088D9C2B7B3D6800E062FB /* GoodSlider.swift in Sources */ = {isa = PBXBuildFile; fileRef = 96088D9B2B7B3D6800E062FB /* GoodSlider.swift */; }; /* End PBXBuildFile section */ /* Begin PBXFileReference section */ @@ -51,8 +52,9 @@ 96088D912B7B220200E062FB /* GoodDayView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GoodDayView.swift; sourceTree = ""; }; 96088D932B7B286E00E062FB /* CalendarBadView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarBadView.swift; sourceTree = ""; }; 96088D952B7B300C00E062FB /* CalendarGoodView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CalendarGoodView.swift; sourceTree = ""; }; - 96088D972B7B37B400E062FB /* CustomSlider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = CustomSlider.swift; sourceTree = ""; }; + 96088D972B7B37B400E062FB /* BadSlider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = BadSlider.swift; sourceTree = ""; }; 96088D992B7B39C300E062FB /* ExampleSliderView.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = ExampleSliderView.swift; sourceTree = ""; }; + 96088D9B2B7B3D6800E062FB /* GoodSlider.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = GoodSlider.swift; sourceTree = ""; }; /* End PBXFileReference section */ /* Begin PBXFrameworksBuildPhase section */ @@ -89,10 +91,10 @@ 96088D652B797B7900E062FB /* Assets.xcassets */, 96088D8D2B7B1BF300E062FB /* BadDayView.swift */, 96088D872B7AFE7D00E062FB /* BadGoodView.swift */, + 96088D972B7B37B400E062FB /* BadSlider.swift */, 96088D932B7B286E00E062FB /* CalendarBadView.swift */, 96088D952B7B300C00E062FB /* CalendarGoodView.swift */, 96088D632B797B7700E062FB /* ContentView.swift */, - 96088D972B7B37B400E062FB /* CustomSlider.swift */, 96088D8F2B7B20FE00E062FB /* DayState.swift */, 96088D732B7980D700E062FB /* DynamicTypeAdaptiveView.swift */, 96088D792B79827D00E062FB /* ExampleFormBadView.swift */, @@ -104,6 +106,7 @@ 96088D752B7981DC00E062FB /* FlexibleSizingView.swift */, 96088D712B797FBA00E062FB /* FlipLayoutAxisView.swift */, 96088D912B7B220200E062FB /* GoodDayView.swift */, + 96088D9B2B7B3D6800E062FB /* GoodSlider.swift */, 96088D672B797B7900E062FB /* Preview Content */, 96088D852B799B1400E062FB /* TextSizingView.swift */, ); @@ -190,11 +193,12 @@ files = ( 96088D9A2B7B39C300E062FB /* ExampleSliderView.swift in Sources */, 96088D762B7981DC00E062FB /* FlexibleSizingView.swift in Sources */, - 96088D982B7B37B400E062FB /* CustomSlider.swift in Sources */, + 96088D982B7B37B400E062FB /* BadSlider.swift in Sources */, 96088D962B7B300C00E062FB /* CalendarGoodView.swift in Sources */, 96088D742B7980D700E062FB /* DynamicTypeAdaptiveView.swift in Sources */, 96088D642B797B7700E062FB /* ContentView.swift in Sources */, 96088D622B797B7700E062FB /* AccessibilityTalkApp.swift in Sources */, + 96088D9C2B7B3D6800E062FB /* GoodSlider.swift in Sources */, 96088D722B797FBA00E062FB /* FlipLayoutAxisView.swift in Sources */, 96088D822B79925200E062FB /* FlexibleSizingGoodUIView.swift in Sources */, 96088D8E2B7B1BF300E062FB /* BadDayView.swift in Sources */, diff --git a/AccessibilityTalk/CustomSlider.swift b/AccessibilityTalk/BadSlider.swift similarity index 72% rename from AccessibilityTalk/CustomSlider.swift rename to AccessibilityTalk/BadSlider.swift index b0d0192..7c026f9 100644 --- a/AccessibilityTalk/CustomSlider.swift +++ b/AccessibilityTalk/BadSlider.swift @@ -1,5 +1,5 @@ // -// CustomSlider.swift +// BadSlider.swift // AccessibilityTalk // // Created by Work on 2024-02-12. @@ -7,13 +7,23 @@ import SwiftUI -struct CustomSlider: View { +struct BadSlider: View { @Binding var value: Double + var range: ClosedRange + + var step: Double + + init(value: Binding, in range: ClosedRange? = nil, step: Double? = nil) { + _value = value + self.range = range ?? 0...1 + self.step = step ?? 0.02 + } + var body: some View { HStack(spacing: 0) { Button { - value = max(0, value - 0.05) + value = max(range.lowerBound, value - step) } label: { Image(systemName: "minus.circle") .padding(8) @@ -36,7 +46,7 @@ struct CustomSlider: View { } Button { - value = min(1, value + 0.05) + value = min(range.upperBound, value + step) } label: { Image(systemName: "plus.circle") .padding(8) @@ -47,5 +57,5 @@ struct CustomSlider: View { } #Preview { - CustomSlider(value: .constant(0.42)) + BadSlider(value: .constant(0.42)) } diff --git a/AccessibilityTalk/ExampleSliderView.swift b/AccessibilityTalk/ExampleSliderView.swift index b7b4b4b..b6b504e 100644 --- a/AccessibilityTalk/ExampleSliderView.swift +++ b/AccessibilityTalk/ExampleSliderView.swift @@ -14,17 +14,16 @@ struct ExampleSliderView: View { var body: some View { BadGoodView("Custom Slider") { - CustomSlider(value: $badValue) + BadSlider(value: $badValue) } good: { - CustomSlider(value: $goodValue) - .accessibilityRepresentation { - Slider(value: $goodValue) - } + GoodSlider(value: $goodValue) } } } #Preview { - ExampleSliderView() + NavigationStack { + ExampleSliderView() + } } diff --git a/AccessibilityTalk/GoodSlider.swift b/AccessibilityTalk/GoodSlider.swift new file mode 100644 index 0000000..fdf4d04 --- /dev/null +++ b/AccessibilityTalk/GoodSlider.swift @@ -0,0 +1,66 @@ +// +// GoodSlider.swift +// AccessibilityTalk +// +// Created by Work on 2024-02-12. +// + +import SwiftUI + +struct GoodSlider: View { + @Binding var value: Double + + var range: ClosedRange + + var step: Double + + init(value: Binding, in range: ClosedRange? = nil, step: Double? = nil) { + _value = value + self.range = range ?? 0...1 + self.step = step ?? 0.02 + } + + var body: some View { + HStack(spacing: 0) { + Button { + value = max(range.lowerBound, value - step) + } label: { + Image(systemName: "minus.circle") + .padding(8) + .contentShape(Rectangle()) + } + .accessibilityHidden(true) + + Rectangle() + .fill(Color(.systemGray3)) + .clipShape(RoundedRectangle(cornerRadius: 4)) + .frame(height: 8) + .frame(minWidth: 60) + .overlay { + GeometryReader { geometry in + Rectangle() + .fill(Color.accentColor) + .clipShape(RoundedRectangle(cornerRadius: 4)) + .frame(width: value * geometry.size.width, height: 8) + .frame(maxWidth: .infinity, alignment: .leading) + } + } + .accessibilityRepresentation { + Slider(value: $value, in: range, step: step) + } + + Button { + value = min(range.upperBound, value + step) + } label: { + Image(systemName: "plus.circle") + .padding(8) + .contentShape(Rectangle()) + } + .accessibilityHidden(true) + } + } +} + +#Preview { + GoodSlider(value: .constant(0.42)) +}