swift UILabel框架在堆栈视图中时不显示

xeufq47z  于 2022-12-10  发布在  Swift
关注(0)|答案(1)|浏览(153)

简单地说,我试图显示两个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

rdlzhqv9

rdlzhqv91#

首先,您需要将标签添加为堆栈视图的***排列的***子视图。
所以,这个:

stackView.addArrangedSubview(titleLabel)
stackView.addArrangedSubview(abstractLabel)

而不是:

stackView.addSubview(titleLabel)
stackView.addSubview(abstractLabel)

接下来,由于您希望标签垂直排列,因此请相应地设置堆栈视图轴(和间距):

stack.axis = .vertical
stack.spacing = 10

并且,因为我们希望堆栈视图***排列***标签,所以不要对标签设置任何约束:

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

最后,添加注解是一个非常好的主意,这样您就可以了解代码要做什么:

// Setting up the constraints
thumbnailImageView.snp.makeConstraints {
    // image view leading is 10-points from superview (contentView) leading
    $0.leading.equalToSuperview().inset(10)
    // 100 x 100
    $0.width.height.equalTo(100)
    // top and bottom constrained to top and bottom of superview (contenView)
    $0.top.bottom.equalToSuperview()
}
    
stackView.snp.makeConstraints {
    // stackView leading is 10=points from image view trailing
    $0.leading.equalTo(thumbnailImageView.snp.trailing).offset(10)
    // 10-points from superview (contentView) trailing
    $0.trailing.equalToSuperview().inset(10)
    // stackView centered vertically to image view
    $0.centerY.equalTo(thumbnailImageView)
}

下面是单元类的完整修改版本:

class ArticleCellView: UITableViewCell {
    // MARK: - *** Properties ***
    static let cellIdentifier = "ArticleTableViewCell"
    
    override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
        super.init(style: style, reuseIdentifier: reuseIdentifier)
        
        // from the SkeletonView docs:
        //  SkeletonView is recursive, so if you want show the skeleton in all skeletonable views,
        //  you only need to call the show method in the main container view. For example, with UIViewControllers.
        // So, we only need to set it on self
        self.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)
        
        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)
        
        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
        
        return imageView
    }()
    
    lazy var stackView: UIStackView = {
        let stack = UIStackView()
        stack.distribution = .fillEqually
        
        // we want Vertical Stack View
        stack.axis = .vertical
        stack.spacing = 10
        
        return stack
    }()
    
    // MARK: - *** Methods ***
    override func prepareForReuse() {
        super.prepareForReuse()
        thumbnailImageView.kf.cancelDownloadTask()
        thumbnailImageView.image = nil
    }

    func configure() {
        
        // Adding subviews
        contentView.addSubview(thumbnailImageView)
        contentView.addSubview(stackView)
        stackView.addArrangedSubview(titleLabel)
        stackView.addArrangedSubview(abstractLabel)
        
        // Setting up the constraints
        thumbnailImageView.snp.makeConstraints {
            // leading is 10-points from superview (contentView) leading
            $0.leading.equalToSuperview().inset(10)
            // 100 x 100
            $0.width.height.equalTo(100)
            // top and bottom constrained to top and bottom of superview (contenView)
            $0.top.bottom.equalToSuperview()
        }
        
        stackView.snp.makeConstraints {
            // stackView leading is 10=points from image view trailing
            $0.leading.equalTo(thumbnailImageView.snp.trailing).offset(10)
            // 10-points from superview (contentView) trailing
            $0.trailing.equalToSuperview().inset(10)
            // stackView centered vertically to image view
            $0.centerY.equalTo(thumbnailImageView)
        }
        
    }
}

相关问题