Custom Indicator is not centred like default indicator type

ahmed-rafiullah commented 7 years ago

Check List

Thanks for considering to open an issue. Before you submit your issue, please confirm these boxes are checked.

[✓ ] I have read the wiki page and cheat sheet, but there is no information I need.
[✓] I have searched in existing issues, but did not find a same one.
[✓] I want to reoprt a problem instead of asking a question. It'd better to use kingfisher tag in Stack Overflow to ask a question.

Issue Description

Custom Indicator is not centred like default indicator type

What

The custom indicator UIView shows up on top left side of the corner always

Reproduce

Make a custom indicator using UIView subclass
Conform UIView Class to Indicator Protocol
Initialise UIView using CGRect(x: 99 , y: 99, width: 30, height: 30)
And set the image view indicator to .custom(indicator: bounceLoader)

Here is the relevant code

BounceLoader.swift

import UIKit
import Kingfisher

class BounceLoader: UIView {

    var outerCirlce: UIView = UIView()
    var innerCircle: UIView = UIView()

    let transformOne = CGAffineTransform(scaleX: 0.01, y: 0.01)
    let transformTwo = CGAffineTransform(scaleX: 1.6, y: 1.6)

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    func commonInit() {

        self.backgroundColor = UIColor.clear

        outerCirlce.frame = bounds
        innerCircle.frame = bounds

        makeUIViewCircle(view: outerCirlce)
        makeUIViewCircle(view: innerCircle)

        makeUIViewTranslucent(view: outerCirlce, blurStyle: .dark)
        makeUIViewTranslucent(view: innerCircle, blurStyle: .light)

        addSubview(outerCirlce)
        addSubview(innerCircle)

        startAnimation()
    }

    private func makeUIViewCircle(view: UIView) {
        view.layer.cornerRadius = view.frame.width/2
    }

    private func makeUIViewTranslucent(view: UIView, blurStyle: UIBlurEffectStyle) {
        view.backgroundColor = UIColor.clear
        let blurEffect = UIBlurEffect(style: blurStyle)
        let uiVisualEffect = UIVisualEffectView(effect: blurEffect)
        uiVisualEffect.frame = view.bounds
        uiVisualEffect.autoresizingMask = [.flexibleWidth, .flexibleHeight]
        view.clipsToBounds = true
        view.addSubview(uiVisualEffect)
    }

    func startAnimation() {
        self.isHidden = false
        UIView.animate(withDuration: 0.6, delay: 0.0, options: [.autoreverse,.repeat,.curveEaseOut,.beginFromCurrentState,.preferredFramesPerSecond60], animations: { [weak self] in

            guard let `self` = self else {
                return
            }

            self.innerCircle.transform = self.transformOne
            self.outerCirlce.transform = self.transformTwo

            }, completion: nil)
    }

    func stopAnimation(){
        self.isHidden = true

    }

}

MyIndicator.swift

struct MyIndicator: Indicator {

    let loader = BounceLoader(frame: CGRect(x: 0.0, y: 0.0, width: 30.0, height: 30.0))
    var view: IndicatorView {
        return loader
    }

    func startAnimatingView() { loader.startAnimation()() }
    func stopAnimatingView() { loader.stopAnimation() }

}

ViewController.swift

let cell = collectionView.dequeueReusableCell(withReuseIdentifier: photoViewCellIdentifier, for: indexPath) as! PhotoCollectionViewCell

let url = URL(string: photo.urls.regular)
cell.photoImageView.backgroundColor = UIColor.hexStringToUIColor(hex: photo.color)

cell.photoImageView.kf.indicatorType = .custom(indicator: MyIndicator())

cell.photoImageView.kf.setImage(with: url , options: [.transition(.fade(0.4))])

return cell

onevcat commented 7 years ago

I think I found an issue in setting indicator frame. I pushed a fix on it. could you try whether it could work for you? See here: https://github.com/onevcat/Kingfisher/pull/798

Reelevant commented 6 years ago

This issue is not solved in current version 4.7.0

onevcat / Kingfisher