ios - 在多个 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 是我拥有所有 subview 的 View ，例如 imageView、labelView 等。

当我尝试添加多个 View 时，第一个 View 获得正确的框架，但其他 View 的宽度变为零。我在 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 的正确方法还是我在哪里做错了？

Answer 1

我相信有很多方法可以实现 FBShimmeringView，这是一个偏好问题。因此，就我而言，我更喜欢最简单的方法(据我所知)。

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

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

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

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

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

   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. 然后在将所有 subview 添加到单元格后，我向我的单元格添加一个白色 View :

   // 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成为cell的contentView:

   self.view_Shimmering.contentView = dummyView
   

我的屏幕看起来像这样。还请记住在您的 tableView 中禁用交互。

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

希望对您有所帮助!