Add Facebook Shimmer on multiple UIViews

Question

I am trying to add Facebook Shimmer on UICollectionViewCell which has multiple UIViews.

For one UIView, it\'s working fine with below code:

<

Answer 1

I believe there are many ways to implement FBShimmeringView, it's a matter of preferences. So in my case, I prefer the easiest way (according to me).

What I do in my tableViewCell that has of course multiple views such as imageView and labels, just like yours, is that I have multiple UIView gray color, placed on top of each views in my cell.

Then I only have ONE instance of FBShimmeringView added to my cell.

Here are some more details about what I practice for using FBShimmeringView.

*Take note that I use SnapKit to layout my views programmatically.

1. I have a property in my cell called isLoading like so, which determines if the gray colored views should be shown or now. If shown, of course turn on shimmering:

   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. Then I add a white view to my cell after adding all the subviews to the cell:

   // 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. Add the ShimerringView to the cell as well:

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

4. Finally, make the dummyView as the contentView of the cell:

   self.view_Shimmering.contentView = dummyView
   

My screen would look like this. Also remember to disable interaction in your tableView.

This looks cool to me when it shimmers, just one shimerring view.

Hope it helps!