ios 如何排列配置文件图像视图,使其固定在排列的堆栈视图顶部的用户名旁边?

kcwpcxri  于 2022-11-26  发布在  iOS
关注(0)|答案(2)|浏览(105)

所以我有一个堆栈视图,个人资料图片需要放在用户名旁边,并保持在那里。我如何在这个排列好的堆栈视图中做到这一点,而不发生冲突,因为我已经尝试将其锚定到顶部。像这样,但没有结果:
Image of what I am trying to achieve
但目前它一直在这样做:What is currently happening

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)

    contentView.addSubview(profileImageView)
    contentView.addSubview(profileNameLabel)
    contentView.addSubview(userHandel)

    profileImageView.setContentHuggingPriority(.defaultHigh, for: .horizontal)
    let innerPostStackView = UIStackView(arrangedSubviews: [profileNameLabel, userHandel, postTextLabel])
    innerPostStackView.axis = .vertical

    let postStackView = UIStackView(arrangedSubviews: [profileImageView, innerPostStackView])
    postStackView.translatesAutoresizingMaskIntoConstraints =  false
    postStackView.alignment =  .center
    postStackView.spacing = 10
    contentView.addSubview(postStackView)

    NSLayoutConstraint.activate([
        
        postStackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10),
        postStackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -15),
        postStackView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10),
        postTextLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -15)
    ])

这就是我用堆栈视图尝试过的。我不能让它按照我想要的方式工作。

p8h8hvxi

p8h8hvxi1#

这是您的单元格的外观:

class MyCell: UITableViewCell {

let profileNameLabel: UILabel = {
    let label = UILabel()
    label.numberOfLines = 0
    label.textColor = .black
    label.backgroundColor = .clear
    label.font = .systemFont(ofSize: 20, weight: .bold)
    label.text = "Minions"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let userHandel: UILabel = {
    let label = UILabel()
    label.numberOfLines = 0
    label.textColor = .systemBlue
    label.backgroundColor = .clear
    label.font = .systemFont(ofSize: 14, weight: .semibold)
    label.text = "@Minions"
    label.translatesAutoresizingMaskIntoConstraints = false
    return label
}()

let postTextLabel: UILabel = {
    let label = UILabel()
    label.numberOfLines = 0
    label.textColor = .black
    label.backgroundColor = .clear
    label.text = "Every Mac comes with a one-year limited warranty(opens in a new window) and up to 90 days of complimentary technical support(opens in a new window). AppleCare+ for Mac extends your coverage from your AppleCare+ purchase date and adds unlimited incidents of accidental damage protection, each subject to a service fee of $99 for screen damage or external enclosure damage, or $299 for other accidental damage, plus applicable tax. In addition, you’ll get 24/7 priority access to Apple experts via chat or phone. For complete details, see the terms(opens in a new window)."
    return label
}()

let costant: CGFloat = 60

let profileImageView: UIImageView = {
    let iv = UIImageView()
    iv.backgroundColor = .darkGray.withAlphaComponent(0.2)
    iv.contentMode = .scaleAspectFill
    iv.clipsToBounds = true
    iv.translatesAutoresizingMaskIntoConstraints = false
    return iv
}()

let containerView: UIView = {
    let v = UIView()
    v.backgroundColor = .clear
    return v
}()

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    backgroundColor = .white
    let image = UIImage(named: "minions")?.withRenderingMode(.alwaysOriginal)
    profileImageView.image = image
    profileImageView.widthAnchor.constraint(equalToConstant: costant).isActive = true // set here profileImageView wudth
    profileImageView.layer.cornerRadius = costant / 2
    
    contentView.backgroundColor = .white
    
    containerView.addSubview(profileNameLabel)
    profileNameLabel.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
    profileNameLabel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
    profileNameLabel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
    profileNameLabel.heightAnchor.constraint(equalToConstant: 20).isActive = true
    
    containerView.addSubview(userHandel)
    userHandel.topAnchor.constraint(equalTo: profileNameLabel.bottomAnchor).isActive = true
    userHandel.leadingAnchor.constraint(equalTo: containerView.leadingAnchor).isActive = true
    userHandel.trailingAnchor.constraint(equalTo: containerView.trailingAnchor).isActive = true
    userHandel.heightAnchor.constraint(equalToConstant: 20).isActive = true
    
    let totalUpStack = UIStackView(arrangedSubviews: [profileImageView, containerView])
    totalUpStack.axis = .horizontal
    totalUpStack.spacing = 6
    totalUpStack.distribution = .fill
    totalUpStack.translatesAutoresizingMaskIntoConstraints = false
    totalUpStack.heightAnchor.constraint(equalToConstant: costant).isActive = true
    
    let completeStack = UIStackView(arrangedSubviews: [totalUpStack, postTextLabel])
    completeStack.axis = .vertical
    completeStack.spacing = 6
    completeStack.distribution = .fill
    completeStack.translatesAutoresizingMaskIntoConstraints = false
    
    contentView.addSubview(completeStack)
    completeStack.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 10).isActive = true
    completeStack.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -10).isActive = true
    completeStack.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 10).isActive = true
    completeStack.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -10).isActive = true
}

required init?(coder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
 }
}

这就是结果:

camsedfj

camsedfj2#

我不确定它是否对您有帮助。您可以忽略UIStackView并使用自动布局,如下所示:

override init(style: UITableViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    
    contentView.addSubview(profileImageView)
    contentView.addSubview(profileNameLabel)
    contentView.addSubview(userHandel)
    contentView.addSubview(postTextLabel)
    
    // activate autolayout constraints:
    NSLayoutConstraint.activate([
        // profileImageView:
        profileImageView.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
        profileImageView.leftAnchor.constraint(equalTo: contentView.leftAnchor, constant: 16),
        profileImageView.heightAnchor.constraint(equalToConstant: 52),
        profileImageView.widthAnchor.constraint(equalToConstant: 52),
        
        // profileNameLabel:
        profileNameLabel.topAnchor.constraint(equalTo: contentView.topAnchor, constant: 16),
        profileNameLabel.leftAnchor.constraint(equalTo: profileImageView.rightAnchor, constant: 8),
        profileNameLabel.rightAnchor.constraint(equalTo: contentView.rightAnchor, constant: -16),
        
        // userHandel:
        userHandel.topAnchor.constraint(equalTo: profileNameLabel.bottomAnchor, constant: 8),
        userHandel.leftAnchor.constraint(equalTo: profileNameLabel.leftAnchor),
        userHandel.rightAnchor.constraint(equalTo: profileNameLabel.rightAnchor),
        
        // postTextLabel:
        postTextLabel.topAnchor.constraint(equalTo: userHandel.bottomAnchor, constant: 8),
        postTextLabel.leftAnchor.constraint(equalTo: userHandel.leftAnchor),
        postTextLabel.rightAnchor.constraint(equalTo: userHandel.rightAnchor),
        postTextLabel.bottomAnchor.constraint(equalTo: contentView.bottomAnchor, constant: -16)
    ])
}

相关问题