Как программно выровнять элементы в стековом представлении с помощью SnapKit?

#ios #swift #uistackview #snapkit

Вопрос:

Я пытаюсь создать определенный дизайн внутри пользовательского многоразового представления.

(Что-то вроде этого: )

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

Поэтому я передаю URL-адрес для повторного просмотра изображения и передаю строку для добавления ниже.

Во-первых, я хочу, чтобы весь вид был шириной элементов (если текст длинный, то весь вид будет шире), я не знаю, как это сделать, вид кажется на всю ширину экрана.

Во-вторых, я хочу, чтобы элементы были центрированы по горизонтали и вертикали, то, что я пробовал, не работает.

Вот мой текущий код :

 func initLayout() {
        stackView.axis  = NSLayoutConstraint.Axis.vertical
        stackView.distribution  = UIStackView.Distribution.fillEqually
        stackView.alignment = UIStackView.Alignment.center
        stackView.spacing   = 10.0

        stackView.addArrangedSubview(imageView)
        stackView.addArrangedSubview(textContainer)
        stackView.translatesAutoresizingMaskIntoConstraints = false

        self.addSubview(stackView)
        self.snp.makeConstraints { (make) -> Void in
            make.height.equalTo(70)
        }
        self.stackView.snp.makeConstraints{ (make) -> Void in
            make.edges.equalTo(self)
        }
    }
 

И это приводит к чему-то вроде этого:
введите описание изображения здесь

Как вы можете (или не можете) видеть, изображение расположено по центру в середине экрана, а это не то, что я хочу. Вид должен быть шириной текста и все, что сосредоточено внутри этой конкретной ширины, затем я добавляю его в свой VC и размещаю так, чтобы он был ведущим.

Ответ №1:

если я хорошо понимаю, это ваше ограничение без Snapkit:

Установите свои объекты в соответствии с объявлением контроллера класса:

 let myImageView: UIImageView = {
    let iv = UIImageView()
    iv.contentMode = .scaleToFill
    iv.clipsToBounds = true
    iv.backgroundColor = .red
    iv.translatesAutoresizingMaskIntoConstraints = false
    
    return iv
}()

let myLabel: UILabel = {
    let label = UILabel()
    label.text = "Débats"
    label.textColor = .white
    label.textAlignment = .center
    label.font = .systemFont(ofSize: 30, weight: .semibold) // set your font size here
    label.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}()
 

Теперь в viewDidLoad заданы параметры и ограничения:

 myImageView.image = UIImage(named: "profilo") // set here your image
    
    let myWidth = myLabel.intrinsicContentSize.width // This reveal only text width in label
    
    view.addSubview(myLabel)
    myLabel.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5).isActive = true
    myLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
    myLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 25).isActive = true
    myLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    view.addSubview(myImageView)
    myImageView.widthAnchor.constraint(equalToConstant: myWidth).isActive = true
    myImageView.heightAnchor.constraint(equalTo: myImageView.widthAnchor).isActive = true
    myImageView.bottomAnchor.constraint(equalTo: myLabel.topAnchor).isActive = true
    myImageView.centerXAnchor.constraint(equalTo: myLabel.centerXAnchor).isActive = true
 

Это и есть результат:

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

Внутренний код:

 class Aiutotipo: UIViewController {

let myImageView: UIImageView = {
    
    let iv = UIImageView()
    iv.contentMode = .scaleToFill
    iv.clipsToBounds = true
    iv.backgroundColor = .red
    iv.translatesAutoresizingMaskIntoConstraints = false
    
    return iv
}()

let myLabel: UILabel = {
    let label = UILabel()
    label.text = "Débats"
    label.textColor = .white
    label.textAlignment = .center
    label.font = .systemFont(ofSize: 30, weight: .semibold)
    label.translatesAutoresizingMaskIntoConstraints = false
    
    return label
}()

override func viewDidLoad() {
    super.viewDidLoad()
    
    myImageView.image = UIImage(named: "profilo") // set here your image
    
    let myWidth = myLabel.intrinsicContentSize.width // This reveal only text width in label
    
    view.addSubview(myLabel)
    myLabel.widthAnchor.constraint(equalTo: view.widthAnchor, multiplier: 0.5).isActive = true
    myLabel.heightAnchor.constraint(equalToConstant: 50).isActive = true
    myLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor, constant: 25).isActive = true
    myLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    
    view.addSubview(myImageView)
    myImageView.widthAnchor.constraint(equalToConstant: myWidth).isActive = true
    myImageView.heightAnchor.constraint(equalTo: myImageView.widthAnchor).isActive = true
    myImageView.bottomAnchor.constraint(equalTo: myLabel.topAnchor).isActive = true
    myImageView.centerXAnchor.constraint(equalTo: myLabel.centerXAnchor).isActive = true
 }
}