Question

我在水平 UIStackView中嵌入了两个标签。其中一个标签可能会变得太大，因此，其中一个标签会被截断。

或者，它们的大小在一定比例分开，并且它们会垂直生长。

如果标签不合适，我想要实现的是UIStackView将axis更改为垂直。

请参考下面的两个数字：

图1 ：标签适合一行，使用水平轴。
图2 ：其中一个标签是多行的。使用垂直轴。

使用 UICollectionViewFlowLayout 时，行为类似。

Answer 1

放手一搏。您只需要测量文本，您必须使用另一个堆栈视图包装堆栈视图。

<p class="click">click here</p>

<script>
	p = document.querySelector(".click");
	p.addEventListener("click", function(){ alert("click sucess") } );
  
  // Or, reference a pre-existing function:
  function secondHandler(){
    alert("Even more success!");
  }
  
	p.addEventListener("click", secondHandler);  
</script>

Answer 2

如果您正在寻找更通用的解决方案，那么这对我有用：

//
//  UIStackView+.swift
//

import UIKit

extension UIStackView {

    // Check if a given set of views and subviews fit into their desired frame
    private func checkSubviews(views: [UIView], includeSubviews: Bool = false) -> Bool {

        for view in views {
            let idealSize = view.sizeThatFits(CGSize(width: CGFloat.greatestFiniteMagnitude, height: view.bounds.height))
            if idealSize.width > view.bounds.width {
                axis = .vertical
                return false
            }
            if includeSubviews {
                if checkSubviews(views: view.subviews, includeSubviews: true) == false {
                    return false
                }
            }
        }
        return true
    }

    @discardableResult
    func updateAxisToBestFit(views: [UIView], includeSubviews: Bool = false) -> UILayoutConstraintAxis {
        self.axis = .horizontal
        setNeedsLayout()
        layoutIfNeeded()
        let subviewsFit = checkSubviews(views: views, includeSubviews: includeSubviews)
        guard subviewsFit == false else { return .horizontal }
        self.axis = .vertical
        setNeedsLayout()
        layoutIfNeeded()
        return .vertical
    }

    @discardableResult
    func updateAxisToBestFit() -> UILayoutConstraintAxis {
        return updateAxisToBestFit(views: self.arrangedSubviews, includeSubviews: true)
    }

}

用法如下：

class MyCellView: UITableCellView {
    @IBOutlet weak var myStackView: UIStackView!

    public func configure(with model: MyCellViewModel) {
        // update cell content according to model
        myStackView?.updateAxisToBestFit()
    }
}

UIStackView，2个标签：根据大小更改轴

2 个答案: