在多个UIViews上添加Facebook Shimmer

时间:2018-03-13 08:04:12

标签: ios swift uicollectionviewcell loading

我正在尝试在具有多个UIViews的UICollectionViewCell上添加Facebook Shimmer。

对于一个UIView ,它可以正常使用以下代码:

let shimmeringView = FBShimmeringView(frame: imageView.frame)
shimmeringView.contentView = imageView
backgroundView.addSubview(shimmeringView)
shimmeringView.isShimmering = true

其中backgroundView是我拥有所有子视图的视图,例如imageViewlabelView等。

当我尝试添加多个视图时,第一个视图正在获得正确的帧,但其他视图的宽度变为零。我在collectionView(_:cellForItemAt:)内添加了此代码。

let shimmeringView = FBShimmeringView(frame: imageView.frame)
shimmeringView.contentView = imageView
backgroundView.addSubview(shimmeringView)
shimmeringView.isShimmering = true

let shimmeringView = FBShimmeringView(frame: labelView.frame)
shimmeringView.contentView = labelView
backgroundView.addSubview(shimmeringView)
shimmeringView.isShimmering = true

任何人都可以告诉我,对于多个UIView 实施Facebook Shimmer的正确方法,还是我做错了?

2 个答案:

答案 0 :(得分:1)

我认为有很多方法可以实现FBShimmeringView,这是一个偏好问题。所以在我的情况下,我更喜欢最简单的方式(据我所知)。

我的tableViewCell当然有多个观点,例如imageViewlabels,就像你的一样,我有多种UIView灰色,放在我单元格中每个视图的顶部。

然后我只在我的单元格中添加了一个FBShimmeringView实例。

以下是我使用FBShimmeringView练习的更多细节。

*请注意,我使用SnapKit以编程方式布置我的观看次数。

  1. 我的单元格中有一个名为isLoading的属性,它决定了是应该显示灰色视图还是现在显示。如果显示,当然打开闪烁:

    public var serviceIsLoading: Bool = false {
        didSet {
            _ = self.view_Placeholders.map { $0.isHidden = !self.serviceIsLoading }
            self.view_Shimmering.isHidden = !self.serviceIsLoading
            self.view_Shimmering.isShimmering = self.serviceIsLoading
        }
    } 
    
  2. 然后,在将所有子视图添加到单元格后,我向单元格添加了一个白色视图:

    // Place the FBShimmeringView
    // Try to add a dummy view
    let dummyView = UIView()
    dummyView.backgroundColor = .white
    self.addSubview(dummyView)
    dummyView.snp.makeConstraints { (make) in
        make.edges.equalToSuperview()
    }
    
  3. 也将ShimerringView添加到单元格中:

    self.addSubview(self.view_Shimmering)
    self.view_Shimmering.snp.makeConstraints { (make) in
        make.height.width.equalToSuperview()
        make.center.equalToSuperview()
    }
    
  4. 最后,将dummyView作为单元格的contentView:

    self.view_Shimmering.contentView = dummyView
    
  5. 我的屏幕看起来像这样。另请记住禁用tableView中的互动。

    当它闪烁时,这看起来很酷,只有一个简洁的观点。

    enter image description here

    希望它有所帮助!

答案 1 :(得分:0)

以下扩展名正常运行。

extension UIView {
    func startShimmeringViewAnimation() {
        let gradientLayer = CAGradientLayer()
        gradientLayer.frame = self.bounds
        gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
        gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
        let gradientColorOne = UIColor(white: 0.90, alpha: 1.0).cgColor
        let gradientColorTwo = UIColor(white: 0.95, alpha: 1.0).cgColor
        gradientLayer.colors = [gradientColorOne, gradientColorTwo, gradientColorOne]
        gradientLayer.locations = [0.0, 0.5, 1.0]
        self.layer.addSublayer(gradientLayer)

        let animation = CABasicAnimation(keyPath: "locations")
        animation.fromValue = [-1.0, -0.5, 0.0]
        animation.toValue = [1.0, 1.5, 2.0]
        animation.repeatCount = .infinity
        animation.duration = 1.25
        gradientLayer.add(animation, forKey: animation.keyPath)
    }
}

在UITableViewCell类中,我们需要为每个视图添加Shimmer。

class UAShimmerCell: UITableViewCell {
    @IBOutlet weak var thumbNailView: UIView!
    @IBOutlet weak var label1View: UIView!
    @IBOutlet weak var label2View: UIView!

    override func awakeFromNib() {
        super.awakeFromNib()
        thumbNailView.startShimmeringViewAnimation()
        label1View.startShimmeringViewAnimation()
        label2View.startShimmeringViewAnimation()
    }
}