时间戳

首页 > 解决方案 > 带有动态内容的 IOS Stackview 自动布局问题

ios - 带有动态内容的 IOS Stackview 自动布局问题

问题描述

我正在尝试在我的项目中使用 UIStackView 和动态内容。stackview 被固定到容器视图的前导和尾随。为什么我把它钉住了？因为 Xcode 否则会抱怨我必须指定宽度或 X 位置。但也许这不是正确的方法 - 让我知道。堆栈视图当前配置为：

无论如何，stackview 本身的内容是从一个 XIB 文件创建的，该文件被扩展为一个自定义 UIView。这种作品，但我在布局上有几个问题：

  1. 当堆栈视图中只有少数项目时，它们是稀疏分布的。理想情况下，我希望 UIView（带有绿色区域的橙色按钮）尽可能大地调整大小以填补这些空白 问题1 - uiview之间的很多差距

  2. 当 stackview 中有很多项目时，它们当前堆叠在一起。这是一个问题。应将单个 UIView 调整为最大尺寸，使其水平适合 UIStackview。 问题 2 - uiviews 之间没有足够的空间

我为将 UIView(s) 添加到 stackview 所做的工作如下：

labelStackView.arrangedSubviews.forEach { (view) in
 view.removeFromSuperview()
}

for (index, character) in model.modelName.enumerated() {
     // CharacterPlaceholder extends UIView
     let characterPlaceHolder = CharacterPlaceholder()
     ...
     labelStackView.addArrangedSubview(characterPlaceHolder)
}

而 CharacterPlaceholder 大致如下所示

class CharacterPlaceholder: UIView {
    override init(frame: CGRect) {
        super.init(frame: frame)
        customInit()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        customInit()
    }

    private func customInit(){           
        let nib = UINib(nibName: "CharacterPlaceholder", bundle: nil)
       
               if let view = nib.instantiate(withOwner: self, options: nil).first as? UIView {
                   addSubview(view)
                   
                   view.frame = self.bounds
               }
    }

我已将项目上传到我的 github 帐户： https ://github.com/alexwibowo/Flipcard

知道我做错了什么吗？我应该在开始时（或在屏幕旋转期间）获取屏幕尺寸，然后手动计算按钮所需的宽度吗？这似乎很痛苦并且非常手动。我希望我可以在这里使用一些自动布局魔法。

预先感谢您的帮助！

编辑：我认为我需要使用“平均填充”进行分配，以便各个字母块具有相同的大小。而且，这样它们就被限制在可用的 stackview 空间中。但是，现在它们仍然可以重叠。

标签： iosswiftautolayoutstackview

解决方案

好的..我想出了一个方法来做到这一点。首先，正如我所提到的，我需要将分布设置为“平均填充”，以便堆栈视图中的每个视图的大小都相同。但仅仅这样做是不够的。我需要获取屏幕尺寸。即通过

view.frame.width

然后，当我展开 xib 文件时，我需要使用简单的数学手动调整它的大小。例如：

let viewWidth = view.frame.width
let numberOfCharacters = model.modelName.count
let widthOfEach = Int(viewWidth) / numberOfCharacters

然后是调整大小部分：

characterPlaceHolder.widthConstraint.constant = widthOfEachIncludingMargin

那个 widthConstraint 是我在 characterPlaceHolder 视图上设置的一个出口。

推荐阅读