根据百分比划分两个视图的 space

Question

所以我有一个看法：

我使用故事板在堆栈视图中有两个视图。

我在 viewController 中得到了两个值，我希望每个视图大小都对应于它们所代表的两者之和的百分比。

例如：stackview 的大小是 100，如果我得到 700 和 300，视图大小将是 70 和 30

谢谢

Answer 1

这些视图是 UIStackView 吗？如果是这样，您只需要限制他们的身高。

制作view1.height = *multiplier* x view2.height.

您可以轻松计算出您的百分比乘数，如 multiplier = percentage2 / percentage1。

因此在您的示例中 multiplier = 50 / 50 = 1。如果你想要，比方说，30%/70% 使 multiplier = 70 / 30 = 2.333.

Answer 2

在情节提要中：

将两个视图放在堆栈视图中
将堆栈视图设置为
- 轴：垂直
- 对齐：填充
- 分配：填充
- 间距：0（或您想要的任何间距）
给出堆栈视图：
- 顶部/底部/前导/尾随约束
- 或宽度、高度和位置限制
按住 Ctrl 从底部视图拖动到顶部视图
Select 等高，乘数为 1（无所谓，因为它会在代码中更改）

在您的视图控制器中，为该约束创建一个 @IBOutlet，例如：

@IBOutlet var proportionalHeightConstraint: NSLayoutConstraint!

这是它在 Storyboard 中的样子：

我们无法直接更改乘数，因此请将此扩展添加到您的项目中：

extension NSLayoutConstraint {

    static func setMultiplier(_ multiplier: CGFloat, of constraint: inout NSLayoutConstraint) {
        NSLayoutConstraint.deactivate([constraint])

        let newConstraint = NSLayoutConstraint(item: constraint.firstItem as Any, attribute: constraint.firstAttribute, relatedBy: constraint.relation, toItem: constraint.secondItem, attribute: constraint.secondAttribute, multiplier: multiplier, constant: constraint.constant)

        newConstraint.priority = constraint.priority
        newConstraint.shouldBeArchived = constraint.shouldBeArchived
        newConstraint.identifier = constraint.identifier

        NSLayoutConstraint.activate([newConstraint])
        constraint = newConstraint
    }

}

在 viewDidLoad() 中（或每当您获得两个值时）：

class CubiaxViewController: UIViewController {

    @IBOutlet var proportionalHeightConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()

        let top: CGFloat = 3600
        let bottom: CGFloat = 2500

        NSLayoutConstraint.setMultiplier(bottom / top, of: &proportionalHeightConstraint)

    }

}

以下是它在运行时的样子：

    let top: CGFloat = 3600
    let bottom: CGFloat = 2500

下面是它的样子：

    let top: CGFloat = 700
    let bottom: CGFloat = 300

下面是它的样子：

    let top: CGFloat = 200
    let bottom: CGFloat = 1500

Answer 3

把你的两个UIViews放在你的UIStackView（纵轴）
为您的 UIStackView

IBOutlet

为您的顶级 UIView

IBOutlet

在 Storyboard 中将 UIStackView 分布设置为 fillEqually 以消除警告。
在你的代码中计算顶视图的比例
设置 UIStackView 分配以填充
设置顶视图相对于UIStackView

代码：

class ViewController: UIViewController {

    @IBOutlet var stackView: UIStackView!
    @IBOutlet var topView: UIView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let topHeight: CGFloat = 700.0
        let bottomHeight: CGFloat = 300.0

        let topViewRatio = topHeight / (topHeight + bottomHeight)

        stackView.distribution = .fill
        topView.heightAnchor.constraint(equalTo: stackView.heightAnchor, multiplier: topViewRatio).isActive = true
    }
}

根据百分比划分两个视图的 space

Divide the space for two views depending on Percentage

dynamic

uiview

ios

autolayout

swift