Вертикальный центр UIStackView выравнивает две метки U внутри

#ios #swift #uikit

Вопрос:

Существует корневой UIStackView с представлением изображений и информационный UIStackView с двумя UILabels. Я пытаюсь центрировать две метки в UIStackView. Я попытался добавить ограничение центра в представление стека в центр изображения. Топ-лейбл растет и не обнимает свой контент.

 private let stack: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .horizontal
    stackView.alignment = .leading
    stackView.spacing = 8
    return stackView
}()
private let informationStack: UIStackView = {
    let stackView = UIStackView()
    stackView.axis = .vertical
    stackView.alignment = .leading
    return stackView
}()
 

Выходной ток:
введите описание изображения здесь

Желаемый Результат: введите описание изображения здесь

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

1. Выравнивание на вашем горизонтальном виде стека должно быть stackView.alignment = .center

2. Можете ли вы привести полный пример кода, возможно, игровую площадку, которая показывает все представления и неожиданные результаты, которые вы видите? Ваше изображение показывает ожидаемый результат, но не то, что дает неудачный случай, и ваш пример кода не включает изображение в метки.

3. @ScottThompson да, в будущем я добавлю игровую площадку. Спасибо за предложение. Это мой первый быстрый вопрос.

Ответ №1:

 //: A UIKit based Playground for presenting user interface

    import UIKit
    import PlaygroundSupport

    let stack: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .horizontal
        stackView.alignment = .center
        stackView.spacing = 8
        return stackView
    }()

    let informationStack: UIStackView = {
        let stackView = UIStackView()
        stackView.axis = .vertical
        stackView.alignment = .leading
        return stackView
    }()

    let timeLabel = UILabel()
    timeLabel.text = "9:30 AM"
    timeLabel.textColor = .white
    informationStack.addArrangedSubview(timeLabel)

    let eventLabel = UILabel()
    eventLabel.textColor = .white
    eventLabel.font = eventLabel.font.withSize(24)
    eventLabel.text = "Faith, Hope amp; Love"
    informationStack.addArrangedSubview(eventLabel)

    let drizzle = UIImage(systemName: "cloud.drizzle.fill")
    let drizzleView = UIImageView(image: drizzle)
    drizzleView.translatesAutoresizingMaskIntoConstraints
    drizzleView.contentMode = .scaleAspectFit
    drizzleView.backgroundColor = .white
    drizzleView.layer.cornerRadius = 16
    drizzleView.widthAnchor.constraint(equalToConstant: 175).isActive = true
    drizzleView.heightAnchor.constraint(equalToConstant: 100).isActive = true

    stack.addArrangedSubview(drizzleView)
    stack.addArrangedSubview(informationStack)
    debugPrint(stack.arrangedSubviews)

    stack.bounds = CGRect(x: 0,y: 0,width: 512,height: 125)
    stack.backgroundColor = .black

    PlaygroundSupport.PlaygroundPage.current.liveView = stack
 

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

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

2. Я должен отметить, что ДонМаг сделал это предложение в комментариях к исходному вопросу задолго до того, как у меня появилась возможность поиграть с кодом. Слава Донмагу!