Горизонтальные виды по центру в виде стека iOS - PullRequest
Новая
       43

Горизонтальные виды по центру в виде стека iOS

1 голос
/ 31 марта 2020

Я пытаюсь получить следующий макет (представления по центру по горизонтали):

enter image description here

Поэтому я настроил вид стека следующим образом: 

let quickPromptsView: UIStackView = {
    let sv = UIStackView()
    sv.axis = .horizontal
    sv.alignment = .center
    sv.distribution = .equalSpacing
    sv.spacing = 10
    sv.translatesAutoresizingMaskIntoConstraints = false
    return sv
}()

Добавление кнопок в представления стека: 

func addOptions(options: [DialogNodeOutputOptionsElement]) {
    DispatchQueue.main.async {
        // clear all subviews
        self.quickPromptsView.subviews.forEach { (view) in
            view.removeFromSuperview()
        }
        for option in options {
            let button = QuickPromptButton()
            button.setTitle(option.label, for: .normal)
            button.addTarget(self, action: #selector(self.didTapQuickPrompt), for: .touchUpInside)
            self.quickPromptsView.addArrangedSubview(button)
        }
    }
}

Класс кнопок: 

class QuickPromptButton: UIButton {

    var userFacingValue: String?
    var answerValue: String?

    override init(frame: CGRect) {
        super.init(frame: frame)
        layer.borderColor = UIColor.primaryColor.cgColor
        layer.borderWidth = 1
        layer.cornerRadius = 15
        setTitleColor(.primaryColor, for: .normal)
    }

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

Так я добавляю представление стека, добавляя его в другой стек часть MessageKit 

func configureQuickPromptsView() {
    view.addSubview(quickPromptsView)
    quickPromptsView.heightAnchor.constraint(equalToConstant: 40).isActive = true

    // this stack view belongs to the MessageKit library
    messageInputBar.topStackView.axis = .horizontal
    messageInputBar.topStackView.distribution = .fill
    messageInputBar.topStackView.addArrangedSubview(quickPromptsView)
}

Однако вот что я получаю:

enter image description here

Стек вид имеет 100% ширину экрана. Я пробовал каждый тип distribution, но это не сработало. Я также пытался вставить прозрачные UIView s в крайних случаях, чтобы вызвать центрирование, но это похоже на хак. Есть идеи?

1 Ответ

1 голос
/ 31 марта 2020

Просто отцентрируйте представление стека по горизонтали в его суперпредставлении.

Примеры ниже используют библиотеку UIKitPlus (это чистый UIKit, но декларативный и поддерживающий LivePreview, iOS9 +) 

UView {
    UHStack {
        UView {
            UText("Yes")
                .color(.green)
                .edgesToSuperview(h: 8, v: 4)
        }
        .border(1, .green)
        .circle()
        UView {
            UText("No")
                .color(.red)
                .edgesToSuperview(h: 8, v: 4)
        }
        .border(1, .red)
        .circle()
        UView {
            UText("I don't know")
                .color(.darkGray)
                .edgesToSuperview(h: 8, v: 4)
        }
        .border(1, .darkGray)
        .circle()
    }
    .alignment(.center)
    .distribution(.equalSpacing)
    .spacing(10)
    .edgesToSuperview(v: 0)
    .centerXInSuperview() // this will center your stack view
}
.edgesToSuperview(h: 0)
.centerYInSuperview()

First solution

Или используйте небольшой хак, добавив два вида с одинаковой шириной, один в начале стека и один как последний вид в stack. 

let v1 = UView()
UHStack {
    v1
    UView {
        UText("Yes")
            .color(.green)
            .edgesToSuperview(h: 8, v: 4)
    }
    .border(1, .green)
    .circle()
    UView {
        UText("No")
            .color(.red)
            .edgesToSuperview(h: 8, v: 4)
    }
    .border(1, .red)
    .circle()
    UView {
        UText("I don't know")
            .color(.darkGray)
            .edgesToSuperview(h: 8, v: 4)
    }
    .border(1, .darkGray)
    .circle()
    UView().width(to: v1)
}
.alignment(.center)
.spacing(10)
.edgesToSuperview(h: 0)
.centerYInSuperview()

Second solution

Вид стека сам по себе, к сожалению, не может автоматически центрировать внутренние виды, поэтому вы должны помочь ему сделать это.

...