RoundedGradientActivityIndicatorView added

[ftp27]

Just simple improvement to make an indicator stick to borders of a superview.

[fxm90]

Hey @ftp27 , thanks a lot for the PR :)

I had a look at the example application, and somehow the animation looks a bit weird. The gradient doesn't look like it's rotating along the path. If you need help with this, just let me know 👍

[ftp27]

@fxm90 It does look weird indeed but there is a reason: the centre of the circle gradient is in the top left corner of View. I tried putting it into the centre but due to the abrupt change of colour (purple to green), it looks strange. So I decided to make it unfold like a fan not to meddle with how gradient forms, that's why it might look weird to you. Any thoughts about that?

[fxm90]

@ftp27 Okay, got your point 👍 I'll try to review your PR this weekend :)

[fxm90]

Could this also be achieved with a single UIBezierPath by applying a lineWidth to the CAShapeLayer?
E.g. something like this:

let roundedRect = bounds.insetBy(dx: borderWidth / 2, dy: borderWidth / 2)
let shapeLayer = CAShapeLayer()
shapeLayer.path = UIBezierPath(roundedRect: roundedRect, cornerRadius: superview?.layer.cornerRadius ?? 0).cgPath
shapeLayer.lineWidth = lineWidth
shapeLayer.fillColor = UIColor.clear.cgColor
shapeLayer.strokeColor = UIColor.black.cgColor

gradientLayer?.mask = shapeLayer

[fxm90]

Furthermore it might be easier to set this up once in commonInit(), so we don't need the guard statement above. We could then keep a reference to the shape-layer, so we update only the path in layoutSubviews().

[ftp27]

Have you tried it? It's a shape mask. I don't think it will work

[fxm90]

Needs a bit of cleanup, but this is what I basically thought of:

open class RoundedGradientActivityIndicatorView: GradientActivityIndicatorView {
    // MARK: - Public properties

    var lineWidth: CGFloat = 8

    // MARK: - Private properties

    private let shapeLayer = CAShapeLayer()

    // MARK: - Initializer

    override public init(frame: CGRect) {
        super.init(frame: frame)

        commonInit()
    }

    public required init?(coder: NSCoder) {
        super.init(coder: coder)

        commonInit()
    }

    // MARK: - Public methods

    override open func layoutSubviews() {
        super.layoutSubviews()

        let offset = lineWidth / 2
        let roundedRect = bounds.inset(by: UIEdgeInsets(top: offset, left: offset, bottom: offset, right: offset))
        shapeLayer.path = UIBezierPath(roundedRect: roundedRect, cornerRadius: superview?.layer.cornerRadius ?? 0).cgPath
    }

    // MARK: - Private methods

    private func commonInit() {
        shapeLayer.lineWidth = lineWidth
        shapeLayer.fillColor = UIColor.clear.cgColor
        shapeLayer.strokeColor = UIColor.black.cgColor

        gradientLayer?.mask = shapeLayer

        if #available(iOS 12.0, *) {
            gradientLayer?.type = .conic
        }
    }
}

[fxm90]

There is a small animation glitch in case you remove the border from the button. You can see a separate color on the top of the circle. E.g. with gradientColors = [UIColor.red, .yellow, .green]

[ftp27]

@fxm90 Please show me an example of the code with the glitch.

[fxm90]

@fxm90 Please show me an example of the code with the glitch.

I commented out these lines in CircleBorderedButton:

//        layer.borderColor = UIColor.CustomColors.blue.cgColor
//        layer.borderWidth = 1.0

I applied some "easer to see" colors in AdvancedExampleViewController:

cirlceGradientActivityIndicatorView.gradientColors = [.red, .yellow, .green]

And finally increased the border width inside RoundedGradientActivityIndicatorView, so it's also easier to see:

public var borderWidth: CGFloat = 10