简单地说,我试图显示两个UILabel的框架,这两个UILabel是一个stack视图的子视图。当我说label.isSkeletonable = true
时,它根本不起作用。但是,当我把stack视图设为isSkeletonable = true
时,它就起作用了,就像下面的图片
一样
class ArticleCellView: UITableViewCell {
// MARK: - *** Properties ***
static let cellIdentifier = "ArticleTableViewCell"
override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
super.init(style: style, reuseIdentifier: reuseIdentifier)
self.isSkeletonable = true
contentView.isSkeletonable = true
configure()
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
// MARK: - *** UI Elements ***
lazy var titleLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 0
label.textAlignment = .natural
label.textColor = UIColor(named: "AccentColor")
label.font = UIFont.systemFont(ofSize: 13.0, weight: .medium)
label.isSkeletonable = true
return label
}()
lazy var abstractLabel: UILabel = {
let label = UILabel()
label.numberOfLines = 2
label.textAlignment = .natural
label.textColor = UIColor(named: "AccentColor")
label.font = UIFont.systemFont(ofSize: 12.0)
label.isSkeletonable = true
return label
}()
lazy var thumbnailImageView: UIImageView = {
let imageView = UIImageView()
imageView.contentMode = .scaleAspectFill
imageView.frame.size.width = 100
imageView.layer.cornerRadius = imageView.frame.size.width / 2
imageView.clipsToBounds = true
imageView.isSkeletonable = true
return imageView
}()
lazy var stackView: UIStackView = {
let stack = UIStackView()
stack.contentMode = .scaleToFill
stack.distribution = .fillEqually
stack.spacing = 20
stack.isSkeletonable = true
return stack
}()
func configure() {
// Adding subviews
contentView.addSubview(thumbnailImageView)
contentView.addSubview(stackView)
stackView.addSubview(titleLabel)
stackView.addSubview(abstractLabel)
// Setting up the constraints
thumbnailImageView.snp.makeConstraints {
$0.leading.equalToSuperview().inset(10)
$0.width.height.equalTo(100)
$0.centerY.equalToSuperview()
}
stackView.snp.makeConstraints {
$0.leading.equalTo(thumbnailImageView.snp.trailing).offset(10)
$0.trailing.equalToSuperview().inset(10)
$0.top.bottom.equalTo(thumbnailImageView)
}
titleLabel.snp.makeConstraints {
$0.leading.equalToSuperview().inset(10)
$0.trailing.equalToSuperview().inset(2)
$0.top.equalToSuperview().inset(10)
}
abstractLabel.snp.makeConstraints {
$0.leading.equalToSuperview().inset(10)
$0.trailing.equalToSuperview().inset(2)
$0.top.equalTo(titleLabel.snp.bottom).offset(10)
$0.bottom.equalToSuperview().offset(2)
}
}
}
就你所知,没有其他的解决方案对我有效,即使clipsToBounds也没有任何作用。我使用的SkeletonView如下:https://github.com/Juanpe/SkeletonView
1条答案
按热度按时间rdlzhqv91#
首先,您需要将标签添加为堆栈视图的***排列的***子视图。
所以,这个:
而不是:
接下来,由于您希望标签垂直排列,因此请相应地设置堆栈视图轴(和间距):
并且,因为我们希望堆栈视图***排列***标签,所以不要对标签设置任何约束:
最后,添加注解是一个非常好的主意,这样您就可以了解代码要做什么:
下面是单元类的完整修改版本: