繁体   English   中英

如何为垂直stackview中的不同元素制作动态宽度?

[英]How to make dynamic width for different elements in vertical stackview?

我制作了一个名为 infoView 的自定义视图,其中包含三个标签和一个 UIControl 类型的元素。 所有这些元素都打包在一个 vstackview 中:

var sender = UIControl()

private let label = UILabel()

private let secondaryLabel = UILabel()

private let senderTextLabel = UILabel()

private var stackView: UIStackView = {
   let stackView = UIStackView()
    stackView.translatesAutoresizingMaskIntoConstraints = false
    stackView.axis = .vertical
    stackView.distribution = .equalSpacing
    stackView.spacing = 10 
    stackView.alignment = .leading
    return stackView 
}()

private func configureSubviews() {
    self.addSubview(stackView)
    [label, secondaryLabel, sender, senderTextLabel].forEach({ view in
        view.translatesAutoresizingMaskIntoConstraints = false
        stackView.addArrangedSubview(view)
        (view as? UILabel)?.numberOfLines = 0
    })
    label.font = UIFont(name: "Courier", size: 20)!
    secondaryLabel.font = UIFont(name: "HelveticaNeue", size: 14)!
    senderTextLabel.font = UIFont(name: "HelveticaNeue-italic", size: 14)!
}

private func addConstraints() {
    NSLayoutConstraint.activate([
        stackView.topAnchor.constraint(equalTo: self.topAnchor),
        stackView.leadingAnchor.constraint(equalTo: self.leadingAnchor),
        stackView.trailingAnchor.constraint(equalTo: self.trailingAnchor),
        stackView.bottomAnchor.constraint(equalTo: self.bottomAnchor)
    ])
}

required init(frame: CGRect, senderType: UIControl) {
    super.init(frame: frame)
    self.translatesAutoresizingMaskIntoConstraints = false
    self.sender = senderType
    self.configureSubviews()
    self.addConstraints()
}

这是它在模拟器中的外观。 您可以看到屏幕上排列的多个 infoView

您还可以看到按钮和 UISwitch 具有其自然大小,但 UISlider 缩小了因此无法使用。

如果我切换 stackView 的 alignment 来填充,slider 看起来很正常,但是按钮变得非常宽。 在这里你可以看到它

我的任务是根据其类型制作 UIControl 元素的动态宽度。 我设法解决了这样的问题:

  private func configureSubviews() {
    self.addSubview(stackView)
    **stackView.alignment = sender is UISlider ? .fill : .leading**
    [label, secondaryLabel, sender, senderTextLabel].forEach({ view in
        view.translatesAutoresizingMaskIntoConstraints = false
        stackView.addArrangedSubview(view)
        (view as? UILabel)?.numberOfLines = 0
    })

现在看起来很正常。 每个元素都有其适当的宽度

我根据初始化 infoView 的 UIControl 类型更改 stackView 的对齐方式。 不要因为我写一个关于已解决问题的问题而生气,但我想知道这是否是一种好的做法,是否有更好的解决方案。 也许有一个好主意可以与新手开发人员分享。

我知道一些 stackoverflowers 对缺乏细节是明智的。 请不要拒绝我的问题,我会在第一次请求时提供更多信息。

祝你有美好的一天!

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM