Блог

Главная - Вопросы по программированию - Добавление ограничения программно быстро

Добавление ограничения программно быстро

#ios #swift #constraints

#iOS #swift #ограничения

Вопрос:

Пожалуйста, мне нужна помощь со следующим, я только начинаю изучать, как программно разрабатывать интерфейс, после нескольких уроков я хотел что-то попробовать, а потом я застрял

Я пытаюсь добиться приведенного ниже изображения

Желаемый результат

но это то, что я получил

не то, что я хочу

это мой код ниже

 class FeedsCell: UICollectionViewCell{

override init(frame: CGRect){
    super.init(frame: frame)
    setupViews()
}

let thumNailImageView : UIImageView = {
    let imageView = UIImageView()
    imageView.backgroundColor = UIColor.blue
    return imageView
}()

let sourceName:UILabel = {
  let srcLabel = UILabel()
    srcLabel.backgroundColor = UIColor.purple
    srcLabel.translatesAutoresizingMaskIntoConstraints = false
    return srcLabel
}()

let separatorView: UIView = {
   let view = UIView()
    view.backgroundColor = UIColor.black
    return view
}()

func setupViews(){
    addSubview(thumNailImageView)
    addSubview(separatorView)
    addSubview(sourceName)

    addConstraintsWithFormat(format: "H:|-16-[v0(194)]", views: thumNailImageView)

    addConstraintsWithFormat(format: "V:|-16-[v0]-16-[v1(1)]|", views: thumNailImageView, separatorView)

    addConstraintsWithFormat(format: "H:|[v0]|", views: separatorView)



    //left Constriants
    addConstraint(NSLayoutConstraint(item: sourceName, attribute: .left, relatedBy: .equal, toItem: thumNailImageView, attribute: .right, multiplier: 1, constant: 8))

    //Right constraints
    addConstraint(NSLayoutConstraint(item: sourceName, attribute: .right, relatedBy: .equal, toItem: thumNailImageView, attribute: .right, multiplier: 1, constant: 0))

    addConstraintsWithFormat(format: "H:|-8-[v0]-8-|", views: sourceName)
    addConstraintsWithFormat(format: "V:|-8-[v0(20)]", views: sourceName)

}

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

}


extension UIView{
    func addConstraintsWithFormat(format: String, views: UIView...){

        var viewDictionary = [String: UIView]()
        for(index, view) in views.enumerated(){
            let key = "v(index)"
            view.translatesAutoresizingMaskIntoConstraints = false
            viewDictionary[key] = view
        }


    addConstraints(NSLayoutConstraint.constraints(withVisualFormat: format, options: NSLayoutFormatOptions(), metrics: nil, views: viewDictionary))
    }
}

Комментарии:

1. Немного OT, но рассматривали ли вы возможность использования более нового API anchors? Мне гораздо проще делать такие вещи. Может быть, простая ошибка (которую я не вижу на первый взгляд) в приведенном выше примере исчезнет. Например. sourceName.leftAnchor.constrainEqualToAnchor(thumNailImageView.rightAnchor).isActive = true

2. @TravisGriggs Гораздо лучшим решением является использование xibs и раскадровки.

3. @Sulthan я могу использовать xibs и раскадровку для достижения этой цели, но я пытаюсь сделать это программно, потому что я буду выполнять некоторые функции

4. @TravisGriggs я изучаю anchor api, спасибо.

Ответ №1:

Я смог решить проблему с помощью SnapKit, для достижения изображения сделал что-то вроде этого

 let screenFrame = UIScreen.main.bounds

    thumNailImageView.snp.makeConstraints { (make) in
        make.width.equalTo(194)
        make.top.equalTo(contentView).offset(20)
        make.left.equalTo(contentView).offset(20)
        make.bottom.equalTo(contentView).offset(-20)
    }

    sourceName.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(20)
        make.top.equalTo(contentView).offset(20)
        make.left.equalTo(contentView).offset(screenFrame.width/2   20 )
    }

    postTitle.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(30)
        make.top.equalTo(sourceName).offset(30)
        make.left.equalTo(contentView).offset(screenFrame.width/2   20 )
    }

    timeStamp.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(10)
        make.top.equalTo(postTitle).offset(40)
        make.left.equalTo(contentView).offset(screenFrame.width/2   20 )
    }

    postContent.snp.makeConstraints { (make) in
        make.width.equalTo(screenFrame.width/2 - 40 )
        make.height.equalTo(60)
        make.top.equalTo(timeStamp).offset(20)
        make.left.equalTo(contentView).offset(screenFrame.width/2   20 )
    }