How would I make a simple spinning dash in Swift? that spins on its center like a loader in terminal

Question

I'm trying to create a simple spinning loading dash. I know how to do the loop but I can't seem to make it on a single line. Any ideas?

let loop = 1

while loop > 0 {
    // spinning dash
}

Answer 1

I will not provide you with all the code to your question but rather a guideline of what to do. In general, its a two step algorithm.

1. Draw a line
2. Perform a 360° rotation of it for a desired time, t

The code posted below implements the first portion. I have added comments and I believe it should be self explanatory. After reviewing it, I'd recommend you read about UIBezierPath.

As for the second part, there are two ways of going about this.

1. Rotate the line itself (recommended)

Should you choose this method, here's a tutorial from Ray Wenderlich which covers it extensively along with the Math behind it. Follow through both portions of the tutorial if possible.

2. Rotate the view encompassing the line

Changing the outer view's background color to clear then rotating itself will give the illusion that the line inside is the one rotated. Here's a video guide for view rotations.

import UIKit

class ViewController: UIViewController
{
    override func viewDidLoad()
    {
        super.viewDidLoad()

        // This is the black subview in which the line will be drawn into
        let lineView: GeneralDraw = GeneralDraw(frame: CGRect(origin: CGPoint(x: 20, y: 30), size: CGSize(width: 300, height: 300)))

        // uncomment this to remove the black colour
//        lineView.backgroundColor = .clear

        // add this lineView to the mainView
        self.view.addSubview(lineView)
    }
}

// This handles the drawing inside a given view
class GeneralDraw: UIView
{
    override init(frame: CGRect)
    {
        super.init(frame: frame)
    }

    required init?(coder aDecoder: NSCoder)
    {
        fatalError("init(coder:) has not been implemented")
    }

    override func draw(_ rect: CGRect)
    {
        let linePath = UIBezierPath()

        // start point of the line
        linePath.move(to: CGPoint(x:50, y:10))
        // end point of the line
        linePath.addLine(to: CGPoint(x:200, y:10))

        linePath.close()

        // cosmetic settings for the line
        UIColor.red.set()
        linePath.stroke()
        linePath.fill()
    }
}

Answer 2

I would use a CAReplicatorLayer for this. You start with a layer that draws a horizontal bar and combine it with transforms that show the bar in the other positions. Then you animate the fading out of the bar, with an offset coordinated to the fading.

In this gif, I've deliberately slowed down the animation. (There is a mild glitch at the point where the gif repeats, but ignore that; the real project doesn't have that glitch.)

Answer 3

1. Solution: rotate Images

create a set of images which shows the dash rotating.

set the images to an array. then animate that `UIImageView.startAnimating()

see section "Animating a Sequence of Images" of UIImageView.

2. Solution: standard iOS activity indicator

But better go with the standard UIActivityIndicatorView

see also:

• iOS Human Interface Guidelines: Progress Indicators

• Reference for UIActivityIndicatorView