我正在尝试在具有多个UIViews的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
任何人都可以告诉我,对于多个UIView
实施Facebook Shimmer的正确方法,还是我做错了?
答案 0 :(得分:1)
我认为有很多方法可以实现FBShimmeringView
,这是一个偏好问题。所以在我的情况下,我更喜欢最简单的方式(据我所知)。
我的tableViewCell
当然有多个观点,例如imageView
和labels
,就像你的一样,我有多种UIView
灰色,放在我单元格中每个视图的顶部。
然后我只在我的单元格中添加了一个FBShimmeringView
实例。
以下是我使用FBShimmeringView
练习的更多细节。
*请注意,我使用SnapKit
以编程方式布置我的观看次数。
我的单元格中有一个名为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
}
}
然后,在将所有子视图添加到单元格后,我向单元格添加了一个白色视图:
// 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作为单元格的contentView:
self.view_Shimmering.contentView = dummyView
我的屏幕看起来像这样。另请记住禁用tableView
中的互动。
当它闪烁时,这看起来很酷,只有一个简洁的观点。
希望它有所帮助!
答案 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()
}
}