ios - 将 UIStackView 动态调整为内部 UIView 的宽度

问题描述

我正在尝试创建一个内部包含三个 UIView 的 UIStackView。UIViews 将有一个圆圈，其中包含文本。

我不想将 StackView 设置为静态数字，我希望它能够根据用户使用的设备变得更小/增长。

现在，StackView 正在添加到视图中，并且 UIViews 正在添加到其中。正在显示颜色，但不显示圆角，并且 StackView 高度不等于 leftui 的宽度。

基本上，我需要三个高度和宽度相等的圆圈......有没有更好的方法？

这是我的代码。

    @IBOutlet var stack: UIStackView!

    override func viewWillLayoutSubviews() {
        //let stack = UIStackView()
        let leftui = UIView()
        let middleui = UIView()
        let rightui = UIView()

        stack.addArrangedSubview(leftui)
        stack.addArrangedSubview(middleui)
        stack.addArrangedSubview(rightui)

        leftui.backgroundColor = UIColor.red
        middleui.backgroundColor = UIColor.blue
        rightui.backgroundColor = UIColor.brown

        leftui.bounds.size.height = leftui.bounds.width //needs these to new equal
        middleui.bounds.size.height = middleui.bounds.width //needs these to new equal
        rightui.bounds.size.height = rightui.bounds.width //needs these to new equal

        leftui.layer.cornerRadius = leftui.bounds.size.width / 2
        middleui.layer.cornerRadius = middleui.bounds.size.width / 2
        rightui.layer.cornerRadius = rightui.bounds.size.width / 2

        print(leftui.bounds.size.width) //prints 0.0

        leftui.clipsToBounds = true
        middleui.clipsToBounds = true
        rightui.clipsToBounds = true

        stack.sizeToFit()
        stack.layoutIfNeeded()

        view.addSubview(stack)
    }

这是我一直在寻找的。这是来自应用程序的 android 版本。

标签： iosswiftxcode

解决方案

我认为为了UIStackView工作，它arrangedSubviews必须使用自动布局-在这里检查第一个答案：是否有必要使用自动布局来使用 stackview

这就是你可以解决这个问题的方法：

为您的圆形视图添加一个新类，除了将其设置为宽度的一半之外，它们并没有做太多的事情layer.cornerRadius，因此如果高度和宽度相同，它们将是圆形的。

class CircularView: UIView {
    override func layoutSubviews() {
        super.layoutSubviews()

        clipsToBounds = true
        layer.cornerRadius = bounds.midX
    }
}

您添加一个widthConstraint您将能够在堆栈视图中调整元素大小的

var widthConstraint: NSLayoutConstraint!

然后您可以创建UIStackView，我主要使用您的代码来执行此操作：

override func viewDidLoad() {
    super.viewDidLoad()

    let leftui = CircularView()
    let middleui = CircularView()
    let rightui = CircularView()

    leftui.translatesAutoresizingMaskIntoConstraints = false
    middleui.translatesAutoresizingMaskIntoConstraints = false
    rightui.translatesAutoresizingMaskIntoConstraints = false

    leftui.backgroundColor = UIColor.red
    middleui.backgroundColor = UIColor.blue
    rightui.backgroundColor = UIColor.brown

    let stack = UIStackView(arrangedSubviews: [leftui, middleui, rightui])
    stack.translatesAutoresizingMaskIntoConstraints = false

    view.addSubview(stack)

    widthConstraint = leftui.widthAnchor.constraint(equalToConstant: 100)

    NSLayoutConstraint.activate([
        widthConstraint,
        stack.centerXAnchor.constraint(equalTo: view.centerXAnchor),
        stack.centerYAnchor.constraint(equalTo: view.centerYAnchor),
        leftui.heightAnchor.constraint(equalTo: leftui.widthAnchor, multiplier: 1.0),
        middleui.widthAnchor.constraint(equalTo: leftui.widthAnchor, multiplier: 1.0),
        middleui.heightAnchor.constraint(equalTo: leftui.widthAnchor, multiplier: 1.0),
        rightui.widthAnchor.constraint(equalTo: leftui.widthAnchor, multiplier: 1.0),
        rightui.heightAnchor.constraint(equalTo: leftui.widthAnchor, multiplier: 1.0)
        ])
}

鉴于此处设置的约束，圆圈的宽度/高度将为 100，并且堆栈视图在视图中居中。

接下来，如果您想在视图旋转时做某事，您可以在您的viewController

override func viewWillTransition(to size: CGSize, with coordinator:         UIViewControllerTransitionCoordinator) {
    coordinator.animate(alongsideTransition: { _ in
        if size.width > size.height {
            self.widthConstraint.constant = 150
        } else {
            self.widthConstraint.constant = 100
        }
    }, completion: nil)
}

它会在横向上动画成宽度/高度为 150 的圆圈。然后，您可以使用这些值来获得所需的结果。

ios - 将 UIStackView 动态调整为内部 UIView 的宽度

问题描述

解决方案

推荐阅读