add centerThumbOnTrackEnd (close yonat#93)

maparoni · Mar 12, 2023 · 4b892ee · 4b892ee
1 parent e11e574
commit 4b892ee
Show file tree

Hide file tree

Showing 6 changed files with 39 additions and 18 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 ### Added
 - add `snapValues` to allow snapping to any series of values.
 - add optional `snapImage` to mark snap values over slider track.
+- add `centerThumbOnTrackEnd`.
 
 ## [1.13.2] - 2022-11-07
 

diff --git a/Example/MultiSliderDemo/MultiValueSliderDemo.swift b/Example/MultiSliderDemo/MultiValueSliderDemo.swift
@@ -24,17 +24,17 @@ struct MultiValueSliderDemo: View {
                 orientation: .horizontal,
                 outerTrackColor: .lightGray
             )
-                .snapImage(.init(systemName: "line.diagonal"))
-                .frame(width: 320)
-                .scaledToFit()
+            .snapImage(.init(systemName: "line.diagonal"))
+            .frame(width: 320)
+            .scaledToFit()
 
             MultiValueSlider(
                 value: $tripleValue,
                 maximumValue: 5,
                 valueLabelPosition: .top,
                 orientation: .horizontal
             )
-                .accentColor(.purple)
+            .accentColor(.purple)
 
             HStack {
                 MultiValueSlider(
@@ -46,7 +46,9 @@ struct MultiValueSliderDemo: View {
                     valueLabelFont: .boldSystemFont(ofSize: 20),
                     trackWidth: 12
                 )
-                    .accentColor(.green)
+                .snapValues([0.5, 1, 2, 3, 0.2])
+                .snapImage(snapImage)
+                .accentColor(.green)
 
                 MultiValueSlider(
                     value: $tripleValue,
@@ -55,11 +57,18 @@ struct MultiValueSliderDemo: View {
                     outerTrackColor: .lightGray,
                     trackWidth: 12
                 )
-                    .thumbTintColor(.blue)
+                .thumbTintColor(.blue)
             }
         }
-            .padding()
+        .padding()
     }
+
+    let snapImage = UIImage(
+        systemName: "minus",
+        withConfiguration: UIImage.SymbolConfiguration(pointSize: 30)
+            .applying(UIImage.SymbolConfiguration(weight: .black))
+    )?
+        .withTintColor(.darkGray, renderingMode: .alwaysOriginal)
 }
 
 #endif
diff --git a/README.md b/README.md
@@ -110,6 +110,7 @@ slider.thumbTintColor = .blue // color of thumbs
 slider.trackWidth = 32
 slider.hasRoundTrackEnds = true
 slider.showsThumbImageShadow = false // wide tracks look better without thumb shadow
+slider.centerThumbOnTrackEnd = true // when thumb value is minimum or maximum, align it's center with the track end instead of its edge
 ```
 
 ### Images

diff --git a/Sources/MultiSlider+Internal.swift b/Sources/MultiSlider+Internal.swift
@@ -78,12 +78,15 @@ extension MultiSlider {
     func setupTrackLayoutMargins() {
         let thumbSize = (thumbImage ?? defaultThumbImage)?.size ?? CGSize(width: 2, height: 2)
         let thumbDiameter = orientation == .vertical ? thumbSize.height : thumbSize.width
-        let halfThumb = thumbDiameter / 2 - 1 // 1 pixel for semi-transparent boundary
+        let margin = (centerThumbOnTrackEnd || nil != snapImage)
+            ? 0
+            : thumbDiameter / 2 - 1 // 1 pixel for semi-transparent boundary
         if orientation == .vertical {
-            trackView.layoutMargins = UIEdgeInsets(top: halfThumb, left: 0, bottom: halfThumb, right: 0)
+            trackView.layoutMargins = UIEdgeInsets(top: margin, left: 0, bottom: margin, right: 0)
+            constrainVerticalTrackViewToLayoutMargins()
             constrain(.width, to: max(thumbSize.width, trackWidth), relation: .greaterThanOrEqual)
         } else {
-            trackView.layoutMargins = UIEdgeInsets(top: 0, left: halfThumb, bottom: 0, right: halfThumb)
+            trackView.layoutMargins = UIEdgeInsets(top: 0, left: margin, bottom: 0, right: margin)
             constrainHorizontalTrackViewToLayoutMargins()
             constrain(.height, to: max(thumbSize.height, trackWidth), relation: .greaterThanOrEqual)
         }

diff --git a/Sources/MultiSlider.swift b/Sources/MultiSlider.swift
@@ -98,21 +98,15 @@ open class MultiSlider: UIControl {
     /// image to show at each snap value
     @IBInspectable open dynamic var snapImage: UIImage? {
         didSet {
+            setupTrackLayoutMargins()
+
             guard snapValues.count > 2 else { return }
             if let snapImage = snapImage {
                 if nil != oldValue {
                     snapViews.forEach { $0.image = snapImage }
                 } else {
                     snapValues.forEach { addSnapView(at: $0) }
                 }
-
-                // move first and last view past trackView.layoutMargins
-                let trackMargin = max(trackView.layoutMargins.left, trackView.layoutMargins.top)
-                let snapImageDiameter = orientation == .vertical ? snapImage.size.height : snapImage.size.width
-                let halfSnapImage = snapImageDiameter / 2 - 1 // 1 pixel for semi-transparent boundary
-                let positionOutsideMargin = halfSnapImage - trackMargin
-                changePositionConstraint(for: snapViews.first, to: positionOutsideMargin)
-                changePositionConstraint(for: snapViews.last, to: positionOutsideMargin)
             } else {
                 snapViews.removeAllViews()
             }
@@ -304,6 +298,13 @@ open class MultiSlider: UIControl {
         }
     }
 
+    /// when thumb value is minimum or maximum, align it's center with the track end instead of its edge.
+    @IBInspectable public dynamic var centerThumbOnTrackEnd: Bool = false {
+        didSet {
+            setupTrackLayoutMargins()
+        }
+    }
+
     // MARK: - Subviews
 
     @objc open var thumbViews: [UIImageView] = []

diff --git a/Sources/MultiValueSlider.swift b/Sources/MultiValueSlider.swift
@@ -193,6 +193,12 @@ import SwiftUI
         return self
     }
 
+    /// when thumb value is minimum or maximum, align it's center with the track end instead of its edge.
+    func centerThumbOnTrackEnd(_ value: Bool) -> Self {
+        uiView.centerThumbOnTrackEnd = value
+        return self
+    }
+
     /// minimal distance to keep between thumbs (half a thumb by default)
     func distanceBetweenThumbs(_ value: CGFloat) -> Self {
         uiView.distanceBetweenThumbs = value