时间戳

首页 > 解决方案 > UIstackview如何确保两个子视图具有不同的比例大小

ios - UIstackview如何确保两个子视图具有不同的比例大小

问题描述

我有一个 UIStackview 有两个视图。当轴垂直时，我希望 view1 拥有 70% 的父级，而当轴水平时，我希望 view2 拥有 70% 的父级。

我试图通过玩横向拥抱和抵抗两种观点来实现这一点。但没有任何效果。

仅供参考：视图 1 内部有一个图像，水平和垂直居中于视图，而宽度和高度均为 50 视图 2 实际上是一个标签。这不是视图。

更新：

如果我激活和停用相等的宽度/高度约束，它会起作用。但我得到以下错误

2021-02-04 20:07:15.262465+0530 test[10094:159481] [LayoutConstraints] Unable to simultaneously satisfy constraints.
    Probably at least one of the constraints in the following list is one you don't want. 
    Try this: 
        (1) look at each constraint and try to figure out which you don't expect; 
        (2) find the code that added the unwanted constraint or constraints and fix it. 
(
    "<NSLayoutConstraint:0x600003ccedf0 UILabel:0x7fc42ae0b1d0.width == 0.8*UIStackView:0x7fc42ae0d290.width   (active)>",
    "<NSLayoutConstraint:0x600003cce8a0 UILayoutGuide:0x6000026cc540'UIViewSafeAreaLayoutGuide'.trailing == UIStackView:0x7fc42ac0cca0.trailing   (active)>",
    "<NSLayoutConstraint:0x600003cce800 UIStackView:0x7fc42ac0cca0.leading == UILayoutGuide:0x6000026cc540'UIViewSafeAreaLayoutGuide'.leading   (active)>",
    "<NSLayoutConstraint:0x600003cc91d0 'UISV-alignment' UIView:0x7fc42ae05790.leading == UILabel:0x7fc42ae0b1d0.leading   (active)>",
    "<NSLayoutConstraint:0x600003cc9270 'UISV-alignment' UIView:0x7fc42ae05790.trailing == UILabel:0x7fc42ae0b1d0.trailing   (active)>",
    "<NSLayoutConstraint:0x600003cc9130 'UISV-canvas-connection' UIStackView:0x7fc42ae0d290.leading == UIView:0x7fc42ae05790.leading   (active)>",
    "<NSLayoutConstraint:0x600003cc9180 'UISV-canvas-connection' H:[UIView:0x7fc42ae05790]-(0)-|   (active, names: '|':UIStackView:0x7fc42ae0d290 )>",
    "<NSLayoutConstraint:0x600003cc92c0 'UISV-canvas-connection' UIStackView:0x7fc42ac0cca0.leading == UIStackView:0x7fc42ac0a850.leading   (active)>",
    "<NSLayoutConstraint:0x600003cc9310 'UISV-canvas-connection' H:[UIStackView:0x7fc42ae0d290]-(0)-|   (active, names: '|':UIStackView:0x7fc42ac0cca0 )>",
    "<NSLayoutConstraint:0x600003cc93b0 'UISV-fill-equally' UIStackView:0x7fc42ae0d290.width == UIStackView:0x7fc42ac0a850.width   (active)>",
    "<NSLayoutConstraint:0x600003cc9360 'UISV-spacing' H:[UIStackView:0x7fc42ac0a850]-(0)-[UIStackView:0x7fc42ae0d290]   (active)>",
    "<NSLayoutConstraint:0x600003cc96d0 'UIView-Encapsulated-Layout-Width' UIView:0x7fc42ac0d030.width == 414   (active)>",
    "<NSLayoutConstraint:0x600003cce990 'UIViewSafeAreaLayoutGuide-left' H:|-(0)-[UILayoutGuide:0x6000026cc540'UIViewSafeAreaLayoutGuide'](LTR)   (active, names: '|':UIView:0x7fc42ac0d030 )>",
    "<NSLayoutConstraint:0x600003cce8f0 'UIViewSafeAreaLayoutGuide-right' H:[UILayoutGuide:0x6000026cc540'UIViewSafeAreaLayoutGuide']-(0)-|(LTR)   (active, names: '|':UIView:0x7fc42ac0d030 )>"
)

Will attempt to recover by breaking constraint 
<NSLayoutConstraint:0x600003cc9270 'UISV-alignment' UIView:0x7fc42ae05790.trailing == UILabel:0x7fc42ae0b1d0.trailing   (active)>

Make a symbolic breakpoint at UIViewAlertForUnsatisfiableConstraints to catch this in the debugger.
The methods in the UIConstraintBasedLayoutDebugging category on UIView listed in <UIKitCore/UIView.h> may also be helpful.

标签： iosswiftuistackview

解决方案

没有一组约束可以满足您的要求，因此您需要为两种状态设置约束并设置这些约束isActive状态true，或者false取决于您的堆栈是处于水平状态还是垂直状态。

通过故事板

你需要：

  • 垂直情况的一种比例高度约束。请注意如何Installed为isActive选定的约束检查属性框。当Installed/isActive设置为 false 时，另一个约束变暗。

在此处输入图像描述

  • 水平情况的一种比例宽度约束。

在此处输入图像描述

当您希望翻转时，请isActive在这些约束上切换标志。

class ViewController: UIViewController {

    @IBOutlet weak var stack: UIStackView!
    @IBOutlet weak var viewOne: UIView!
    @IBOutlet weak var viewTwo: UIView!
    
    @IBOutlet weak var vModeHeightConstraint: NSLayoutConstraint!
    @IBOutlet weak var hModeWidthContraint: NSLayoutConstraint!
    
    var isVertical = true {
        didSet {
            UIView.animate(withDuration: 1.0) {
                self.toggle()
            }
        }
    }
    
    func toggle() {
        vModeHeightConstraint.isActive = false
        hModeWidthContraint.isActive = false
        stack.axis = isVertical ? .vertical:.horizontal
        stack.layoutIfNeeded()
        
        vModeHeightConstraint.isActive = isVertical
        hModeWidthContraint.isActive = !isVertical
        stack.layoutIfNeeded()
    }
    
    @IBAction func toggleModeAction(_ sender: Any) {
        isVertical.toggle()
    }

}

您可以以编程方式设置约束。如何做到这一点很容易在 SO 上找到。

在更改过程中，您会看到一堆自动布局错误。这些错误可以在“UIKit 并不完美”下提交。

通常，此类更改是由设备轮换触发的，func traitCollectionDidChange(_ previousTraitCollection: UITraitCollection?)但您尚未说明希望更改发生的时间。

推荐阅读