代码之家 › 专栏 › 技术社区 › letsCode

根据内部UIViews的宽度动态调整UIStackView的大小

xcode swift ios

-1

letsCode · 技术社区 · 6 年前

我试图创建一个包含三个uiview的UIStackView。ui视图将有一个圆圈,上面/里面有文本。

我不想将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版本的应用程序。

2 回复 | 直到 6 年前

Ladislav 6 年前

我想是为了 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宽/高的圆圈。然后,您可以使用这些值来获得所需的结果。

vivekDas 6 年前

要设计它,请遵循以下步骤。

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

希望这将有助于设计,如果你需要更多的帮助,请评论。