在多个 UIView 上添加 Facebook Shimmer

Question

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

对于一个 UIView，使用以下代码可以正常工作：

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

其中 backgroundView 是我拥有所有子视图的视图，例如 imageView、labelView 和其他。

当我尝试添加多个视图时，第一个视图获得正确的框架，但其他视图的宽度变为零。我在 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

任何人都可以告诉我这是为多个 UIViews 实施 Facebook Shimmer 的 正确方法还是我哪里做错了？

Answer 1

我相信有很多方法可以实现 FBShimmeringView，这是一个偏好问题。所以就我而言，我更喜欢最简单的方法（根据我的说法）。

我在 tableViewCell 中所做的当然有多个视图，例如 imageView 和 labels，就像你的一样，我有多个 UIView 灰色颜色，放置在我的单元格中每个视图的顶部。

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

这里有一些关于我练习使用 FBShimmeringView 的更多细节。

*请注意，我使用 SnapKit 以编程方式布局我的视图。

我的单元格中有一个名为 isLoading 的属性，它决定是否应该显示灰色视图或现在显示。如果显示，当然要打开闪烁：

public var serviceIsLoading: Bool = false {
    didSet {
        _ = self.view_Placeholders.map { [=10=].isHidden = !self.serviceIsLoading }
        self.view_Shimmering.isHidden = !self.serviceIsLoading
        self.view_Shimmering.isShimmering = self.serviceIsLoading
    }
}

然后我在将所有子视图添加到单元格后向我的单元格添加一个白色视图：

// 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()
}

也将 ShimerringView 添加到单元格中：

self.addSubview(self.view_Shimmering)
self.view_Shimmering.snp.makeConstraints { (make) in
    make.height.width.equalToSuperview()
    make.center.equalToSuperview()
}

最后将dummyView作为cell的contentView:

self.view_Shimmering.contentView = dummyView

我的屏幕看起来像这样。还记得在 tableView.

中禁用交互

它闪闪发光时我觉得很酷，只有一个闪闪发光的景色。

希望对您有所帮助！

Answer 2

下面的扩展工作正常。

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 class 中，我们需要为每个视图添加微光。

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()
    }
}

在多个 UIView 上添加 Facebook Shimmer

Add Facebook Shimmer on multiple UIViews

loading

ios

uicollectionviewcell

swift