如何使用UIImageView和单元格中的多个标签正确设置约束?

时间:2019-07-08 02:29:34

标签: ios swift uitableview nslayoutconstraint

我目前正在尝试实现动态单元功能。我实际上已经实现了,但是仅使用了dateLabel,nameLabel和detailLabel。我想在左侧添加图片(authorProfileImg)。我已经尝试了4个元素的多次迭代和约束组合,但尚未成功。我已经尝试了2天了!我们将不胜感激,在此先感谢您的帮助!

class BookTableViewCell: UITableViewCell {

    let nameLabel = UILabel(frame: .zero)
    let detailLabel = UILabel(frame: .zero)

    let dateLabel = UILabel(frame: .zero)
    let authorProfileImg = UIImageView(frame: .zero)

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

        let marginGuide = contentView.layoutMarginsGuide

        // configure titleLabel //the upper element
        contentView.addSubview(nameLabel)
        nameLabel.translatesAutoresizingMaskIntoConstraints = false

        nameLabel.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 60).isActive = true
        nameLabel.topAnchor.constraint(equalTo: marginGuide.topAnchor).isActive = true
        nameLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor).isActive = true

        nameLabel.numberOfLines = 0
        nameLabel.font = UIFont(name: "Arial", size: 16)

        // configure authorLabel //the lower element
        contentView.addSubview(detailLabel)
        detailLabel.translatesAutoresizingMaskIntoConstraints = false

        detailLabel.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 60).isActive = true
        //        detailLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
        detailLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor, constant: -20).isActive = true
        detailLabel.topAnchor.constraint(equalTo: nameLabel.bottomAnchor, constant: 5).isActive = true

        detailLabel.numberOfLines = 0
        detailLabel.font = UIFont(name: "Arial", size: 13)
        detailLabel.textColor = UIColor.lightGray

        // configure dateLabel
        contentView.addSubview(dateLabel)
        dateLabel.translatesAutoresizingMaskIntoConstraints = false

        dateLabel.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor, constant: 60).isActive = true
        dateLabel.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
        dateLabel.trailingAnchor.constraint(equalTo: marginGuide.trailingAnchor).isActive = true
        dateLabel.topAnchor.constraint(equalTo: detailLabel.bottomAnchor, constant: 5).isActive = true

        dateLabel.numberOfLines = 0
        dateLabel.font = UIFont(name: "Arial", size: 12)
        dateLabel.textColor = UIColor.red
        dateLabel.text = "Jun 5"

        // configure author image
        contentView.addSubview(authorProfileImg)
        authorProfileImg.translatesAutoresizingMaskIntoConstraints = false

        authorProfileImg.widthAnchor.constraint(equalToConstant: 50).isActive = true
        authorProfileImg.heightAnchor.constraint(equalToConstant: 50).isActive = true
        authorProfileImg.layer.cornerRadius = 50

        authorProfileImg.leadingAnchor.constraint(equalTo: marginGuide.leadingAnchor).isActive = true
        authorProfileImg.topAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true

        authorProfileImg.bottomAnchor.constraint(equalTo: marginGuide.bottomAnchor).isActive = true
//        authorProfileImg.trailingAnchor.constraint(equalTo: detailLabel.leadingAnchor).isActive = true
    }

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

}

我在这里做什么错了?

2 个答案:

答案 0 :(得分:0)

这应该对您有用:

class monster1{}

const handler1 = {
    construct(target, args) {
        console.log('monster constructor called');

        return new target(...args);
    }
};

const proxy1 = new Proxy(monster1, handler1);

class monster2 extends proxy1 {}

new proxy1;
new monster2;

答案 1 :(得分:0)

离你不太远。

我发现将相关的代码行分组非常有帮助-特别是在定义约束时。对我来说,跟踪正在发生的事情要容易得多。

因此,在以下代码中,我进行了分组:

  • 添加子视图
  • 设置元素属性
  • 定义约束

您会在注释中看到,我有一个约束double Signal::Param_RE_Tterm_approx(double Tterm, double *par) { double value = 0.; // time after Che angle peak if (Tterm > 0.) { if ( fabs(Tterm/ *par) >= 1.e-2) { value += -1./(*par)*exp(-1.*Tterm/(*par)); } else { value += -1./par[0]*(1. - Tterm/par[0] + Tterm*Tterm/(par[0]*par[0]*2.) - Tterm*Tterm*Tterm/(par[0]*par[0]*par[0]*6.) ); } if ( fabs(Tterm* *(par+1)) >= 1.e-2) { value += *(par+2)* *(par+1)*pow( 1.+*(par+1)*Tterm, *(par+2)-1. ); } else { value += par[2]*par[1]*( 1.+(par[2]-1.)*par[1]*Tterm + (par[2]-1.)*(par[2]-1.-1.)/2.*par[1]*par[1]*Tterm*Tterm + (par[2]-1.)*(par[2]-1.-1.)*(par[2]-1.-2.)/6.*par[1]*par[1]*par[1]*Tterm*Tterm*Tterm ); } } // time before Che angle peak else { if ( fabs(Tterm/ *(par+3)) >= 1.e-2 ) { value += -1./ *(par+3) *exp(-1.*Tterm/ *(par+3)); } else { value += -1./par[3]*(1. - Tterm/par[3] + Tterm*Tterm/(par[3]*par[3]*2.) - Tterm*Tterm*Tterm/(par[3]*par[3]*par[3]*6.) ); } if ( fabs(Tterm* *(par+4) >= 1.e-2 ) { value += *(par+5)* *(par+4) *pow( 1.+ *(par+4)*Tterm, *(par+5)-1. ); } else { value += par[5]*par[4]*( 1.+(par[5]-1.)*par[4]*Tterm + (par[5]-1.)*(par[5]-1.-1.)/2.*par[4]*par[4]*Tterm*Tterm + (par[5]-1.)*(par[5]-1.-1.)*(par[5]-1.-2.)/6.*par[4]*par[4]*par[4]*Tterm*Tterm*Tterm ); } } return value * 1.e9; } 垂直居中,另一个约束是使其顶部对齐。

authorProfileImg

结果是(垂直居中的imageView):

enter image description here

enter image description here

顶部对齐的imageView:

enter image description here