-
Notifications
You must be signed in to change notification settings - Fork 64
RoundedGradientActivityIndicatorView added #19
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Conversation
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 👍
@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?
@ftp27 Okay, got your point 👍 I'll try to review your PR this weekend :)
GradientLoadingBar/Classes/Views/GradientActivityIndicatorView.swift
Outdated
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Outdated
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Outdated
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Show resolved
Hide resolved
GradientLoadingBar/Classes/Views/RoundedGradientActivityIndicatorView.swift
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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().
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you tried it? It's a shape mask. I don't think it will work
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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 } } }
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]
@fxm90 Please show me an example of the code with the glitch.
@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
Just simple improvement to make an indicator stick to borders of a superview.
Example