说明
实现UIStackView中添加可以自动换行的Label
思路分析:
- view中添加UIStackView,UIStackView添加Label;
- UIStackView的constraint为上,左,右;
- Label的constraint为左,右;Label的
numberOfLine = 0
Demo 代码如下:
//
// ViewController.swift
// StackViewLabelDemo
//
// Created by zgpeace on 2021/3/23.
//
import UIKit
class ViewController: UIViewController {
private lazy var stackView: UIStackView = {
let stackView = UIStackView()
stackView.translatesAutoresizingMaskIntoConstraints = false
// stackView.alignment = .center
stackView.axis = .horizontal
stackView.distribution = .fill
return stackView
}()
private lazy var label: UILabel = {
let label = UILabel()
label.translatesAutoresizingMaskIntoConstraints = false
label.numberOfLines = 0
label.lineBreakMode = .byWordWrapping
label.font = UIFont.systemFont(ofSize: 16)
label.textColor = .orange
return label
}()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
setupViews()
}
private func setupViews() {
self.view.translatesAutoresizingMaskIntoConstraints = false
self.view.addSubview(stackView)
stackView.addArrangedSubview(label)
label.text = """
For a horizontal stack view that has a UILabel as one of its views, in Interface Builder firstly set label.numberOfLines = 0. This should allow the label to have more than 1 line. This initially failed to work for me when the stack view had stackView.alignment = .fill. To make it work simply set stackView.alignment = .center. The label can now expand to multiple lines within the UIStackView.
The Apple documentation says
For all alignments except the fill alignment, the stack view uses each arranged view’s intrinsicContentSize property when calculating its size perpendicular to the stack’s axis
Note the word except here. When .fill is used, the horizontal UIStackView does NOT resize itself vertically using the arranged subviews' sizes.
"""
NSLayoutConstraint.activate([
stackView.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor),
stackView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 8.0),
stackView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -8.0),
label.leadingAnchor.constraint(equalTo: stackView.leadingAnchor),
label.trailingAnchor.constraint(equalTo: stackView.trailingAnchor)
// label.topAnchor.constraint(equalTo: stackView.topAnchor),
// label.bottomAnchor.constraint(equalTo: stackView.bottomAnchor)
])
}
}
参考
https://stackoverflow.com/questions/34386528/multiline-label-in-uistackview