将 UIStackView 动态调整为内部 UIView 的宽度答案

【问题标题】：Dynamically size UIStackView to the width of the UIViews inside将 UIStackView 动态调整为内部 UIView 的宽度
【发布时间】：2018-07-25 14:09:34
【问题描述】：

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

我不想将 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 版本。

【问题讨论】：

您可以让您的堆栈视图根据其内容元素大小来工作。所以不需要固定堆栈视图的大小，但你必须为其内部元素提供适当的框架，即堆栈视图内的视图。
那么将UIView的高度设置为UIView的宽度？如果这就是你的意思，那是有道理的，我正在尝试这样做，但 leftui.bounds.width 返回 0.0 而不是实际大小。
你在哪里设置leftui的框架？
你知道你希望圆圈有多大吗？
@DroiDev - 首先，您应该使用约束和自动布局。其次，展示您希望它的外观的图像 - 纵向和横向方向。

标签： ios swift xcode

【解决方案1】：

我认为为了让UIStackView 工作，它的arrangedSubviews 必须使用自动布局 - 在此处查看第一个答案：Is it necessary to use autolayout to use 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 的圆圈。然后，您可以使用这些值来获得所需的结果。

【讨论】：

谢谢...在较小的设备上会发生什么？ iphone se ... 因为您将宽度设置为 100。
这只是一个例子，100 是一个虚构的数字，只是为了展示它是如何完成的，由您决定每个元素的正确宽度应该是多少.. .
对于同一个例子，你将如何在圆圈中添加标签，我添加了一个新的 uilabel，然后 leftui.addsubview 并没有工作。另外，圆圈上方的标签。我想我需要另一个 stackview？

【解决方案2】：

要设计它，请按照以下步骤操作。

创建自定义视图。在自定义视图中放置所有子视图成本标题标签、价格标签和颜色UIImageView
现在使用适当的数据创建自定义视图的三个对象。
获取设备屏幕宽度除以 3 给出每个自定义视图宽度，还可以根据您的要求设置视图高度并提供创建的自定义视图的框架
现在将三个视图添加到StackView。

希望这对设计有所帮助，如果您需要更多帮助，请发表评论。

【讨论】：