在多个UIView上添加Facebook Shimmer [英] Add Facebook Shimmer on multiple UIViews

问题描述

我试图在具有多个UIViews的UICollectionViewCell上添加Facebook Shimmer.

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

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

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

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

backgroundView是其中所有子视图(例如imageView，labelView等)的视图.

Where backgroundView is the view in which I have all the subviews such as imageView, labelView and others.

当我尝试添加多个视图时，第一个视图将获得正确的帧，但其他视图的宽度将变为零.我将此代码添加到collectionView(_:cellForItemAt:)中.

While I am trying to add multiple views then first view is getting correct frame but other views' widths are becoming zero. I'm adding this code inside 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的正确方法还是我做错的地方?

Can anyone tell me if it's the correct way to implement Facebook Shimmer for multiple UIViews or Where I am doing it wrong?

推荐答案

我相信有很多实现FBShimmeringView的方法，这是首选项的问题.因此，就我而言，我更喜欢最简单的方法(根据我的想法).

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).

我在tableViewCell中所做的当然具有与您一样的多个视图(例如imageView和labels)的是，我有多个UIView灰色，放置在我每个视图的顶部单元格.

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.

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

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

以下是有关我使用FBShimmeringView的实践的更多详细信息.

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

*请注意，我使用SnapKit以编程方式布置视图.

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

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

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

然后在将所有子视图添加到单元格后，向单元格添加白色视图:

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

将ShimerringView也添加到单元格中:

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

最后，将dummyView用作单元格的contentView:

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

self.view_Shimmering.contentView = dummyView

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

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.

希望有帮助！

这篇关于在多个UIView上添加Facebook Shimmer的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！