Блог

Как бы вы нарисовали узел / пузырь на дорожке слайдера в SwiftUI / Swift? Требуется 10 узлов для 10 значений. Я воспользовался помощью png (если это поможет), и он отлично перемещается (переходит с одного узла на другой), однако мне также нужен цвет фона дорожки вместе с этими узлами. Не уверен, как это сделать.

Гиперссылка на демо для того, что я искал

Это то, что я сделал.

 let trackingImage = UIImage(named:"bubbles")!

func makeUIView(context: Context) -> UISlider {
let slider = UISlider(frame: .zero)
slider.thumbTintColor = thumbColor
slider.minimumTrackTintColor = minTrackColor
slider.maximumTrackTintColor = maxTrackColor
slider.value = Float(value)
slider.minimumValue = 0
slider.maximumValue = 9    
slider.setMinimumTrackImage(trackingImage, for:.normal)
slider.setMaximumTrackImage(trackingImage, for:.normal)
slider.minimumTrackTintColor = .systemBlue

slider.addTarget(
  context.coordinator,
  action: #selector(Coordinator.valueChanged(_:)),
  for: .valueChanged
)

return slider
  

}

Это может показаться очень наивным, но чтобы ответить на мой собственный вопрос, я просто добавил изображение этого типа (штрих и круг / узел вместе), установив для изображения значения setMinimumTrackImage и setMaximumTrackImage image .

 let trackingImage = UIImage(named:"slider_unselected")!
let trackedImage = UIImage(named:"selectedTracl82")!  
@Binding var value: Int

func makeUIView(context: Context) -> UISlider {

let slider = UISlider(frame: .zero)
slider.thumbTintColor = thumbColor
slider.minimumTrackTintColor = minTrackColor
slider.value = Float(value)
slider.minimumValue = 0
slider.maximumValue = 9    
slider.setMinimumTrackImage(trackedImage, for:.normal)
slider.setMaximumTrackImage(trackingImage, for:.normal)
  

Опубликовано на случай, если кто-то может столкнуться с такой же проблемой.