Get slider closer to design

This commit is contained in:
Jackson Harper
2023-04-06 23:35:55 +08:00
parent 14d5676979
commit da90b53057
2 changed files with 32 additions and 13 deletions

View File

@ -12,6 +12,15 @@
}
}
class CustomSliderView: UISlider {
@IBInspectable var trackLineHeight: CGFloat = 2
override func trackRect(forBounds bound: CGRect) -> CGRect {
CGRect(origin: CGPoint(x: bound.origin.x, y: bound.midY),
size: CGSize(width: bound.width, height: trackLineHeight))
}
}
struct CustomSlider: UIViewRepresentable {
typealias UIViewType = UISlider
@ -33,11 +42,12 @@
}
func makeUIView(context: Context) -> UISlider {
let slider = UISlider(frame: .zero)
let slider = CustomSliderView(frame: .zero)
slider.trackLineHeight = 2
slider.minimumValue = asFloat(minValue)
slider.maximumValue = asFloat(maxValue)
let tintColor = UIColor(Color.appCtaYellow)
let tintColor = UIColor(Color(hex: "#969594") ?? Color.appGrayBorder)
let thumbImage = UIImage(systemName: "circle.fill",
withConfiguration: UIImage.SymbolConfiguration(scale: .medium))?
.withTintColor(tintColor)
@ -46,7 +56,7 @@
slider.setThumbImage(thumbImage, for: .selected)
slider.setThumbImage(thumbImage, for: .normal)
slider.minimumTrackTintColor = tintColor
// slider.minimumTrackTintColor = tintColor
slider.addTarget(context.coordinator,
action: #selector(Coordinator.valueChanged(_:)),
for: .valueChanged)
@ -75,8 +85,11 @@
}
@objc func valueChanged(_ sender: UISlider) {
value.wrappedValue = Int(sender.value)
onEditingChanged(sender.isTracking)
let oldValue = value.wrappedValue
value.wrappedValue = Int(round(sender.value))
if oldValue != value.wrappedValue {
onEditingChanged(sender.isTracking)
}
}
}
}

View File

@ -192,15 +192,19 @@ public enum WebFont: String, CaseIterable {
Button(action: {
storedFontSize = min(storedFontSize + 2, 28)
}, label: { Image(systemName: "textformat.size.smaller") })
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { changed in
print("changed font size: ", changed)
updateReaderPreferences()
.frame(width: 25, height: 25, alignment: .center)
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { _ in
if storedFontSize % 2 == 0 {
updateReaderPreferences()
}
}
.padding(.horizontal, 10)
.tint(Color(hex: "#D9D9D9"))
Button(action: {
storedFontSize = max(storedFontSize - 2, 10)
}, label: { Image(systemName: "textformat.size.larger") })
.frame(width: 25, height: 25, alignment: .center)
}
}
@ -210,10 +214,10 @@ public enum WebFont: String, CaseIterable {
storedMaxWidthPercentage = min(storedMaxWidthPercentage + 10, 100)
}, label: { Image("margin-smaller", bundle: .module) })
.frame(width: 25, height: 25, alignment: .center)
CustomSlider(value: $storedMaxWidthPercentage, minValue: 40, maxValue: 100) { changed in
print("changed storedMaxWidthPercentage: ", changed)
CustomSlider(value: $storedMaxWidthPercentage, minValue: 40, maxValue: 100) { _ in
updateReaderPreferences()
}
.padding(.horizontal, 10)
.tint(Color(hex: "#D9D9D9"))
Button(action: {
@ -232,11 +236,12 @@ public enum WebFont: String, CaseIterable {
CustomSlider(value: $storedLineSpacing, minValue: 100, maxValue: 300) { _ in
updateReaderPreferences()
}
.padding(.horizontal, 10)
.tint(Color(hex: "#D9D9D9"))
Button(action: {
storedLineSpacing = max(storedLineSpacing - 25, 100)
}, label: { Image("lineheight-smaller", bundle: .module) })
}, label: { Image("lineheight-larger", bundle: .module) })
.frame(width: 25, height: 25, alignment: .center)
}
}
@ -247,10 +252,11 @@ public enum WebFont: String, CaseIterable {
storedFontSize = min(storedFontSize + 2, 28)
}, label: { Image("brightness-lower", bundle: .module) })
.frame(width: 25, height: 25, alignment: .center)
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { changed in
print("changed font size: ", changed)
CustomSlider(value: $storedFontSize, minValue: 10, maxValue: 28) { _ in
updateReaderPreferences()
}
.padding(.horizontal, 10)
Button(action: {
storedFontSize = max(storedFontSize - 2, 10)
}, label: { Image("brightness-higher", bundle: .module) })