How to put image to Progress View and make it moving with it

Question

I'm working on the air application and there I have a progress view. How it looks now

So, I need to know, how it possible to add image to progress view and it will move together. Here is how it should look like: result

I've tried something like this: progressView.trackImage = UIImage(named: "smallPlane")

Update:

*

func setupProgressView() {
    middleView.insertSubview(planeView, aboveSubview: progressView)
    let leadingConstraint = planeView.leadingAnchor.constraint(equalTo: progressView.leadingAnchor)
    NSLayoutConstraint.activate(
        leadingConstraint,
        planeView.widthAnchor(equalToConstant: ),
        planeView.heightAnchor(equalToConstant: ),
        planeView.centerYAnchor(equalTo: progressView.centerYAnchor)
    )
    leadingConstraint.isActive = true
    leadingConstraint.constant = progressView.frame.width * CGFloat(progressView.progress)
    progressView.transform = progressView.transform.scaledBy(x: 1, y: 0.5)
}

Answer 1

You need to create an UIImageView and change it’s position according to the progress. Let's say you have someView, which contains your progress view:

let planeView = UIImageView(image: UIImage(named: "smallPlane"))
someView.insertSubview(planeView, aboveSubview: progressView)

// Don’t forget to store `leadingConstraint` somewhere.
let leadingConstraint = planeView.centerXAnchor.constraint(equalTo: progressView.leadingAnchor)

NSLayoutConstraint.activate([
    leadingConstraint,
    planeView.widthAnchor(equalToConstant: <your_value>),
    planeView.heightAnchor(equalToConstant: <your_value>),
    planeView.centerYAnchor(equalTo: progressView.centerYAnchor)
])

Now you can change the constant of the leadingConstraint when you change the progress of progressView like that:

leadingConstraint.constant = progressView.frame.width * progress

Answer 2

Try the below solution, It'll definitely work for you

Step 1: Replace the ProcessView with UISlider

Step 2: UISlider provider the handle where you can set your desired image

slider.setThumbImage(UIImage(named: "Image_Name"), for: .normal)

Step 3: If you want that user not able to move handle then put the below line

slider.isUserInteractionEnabled = false