使用多行 UILabel 自动调整自定义视图的大小
Auto-Resizing Custom Views with Multi-Line UILabels
我想创建一些可重复使用的自定义 UI 组件以供我使用，例如以下包含两个标签的 UIView。根据内容的不同，标签可能是多行的，我为上边距和下边距提供了一些限制。这些视图主要使用 Interface Builder 或以编程方式添加到我的布局中 UIStackViews 内。这里的问题是，运行时视图的高度计算不正确，在每个视图的底部切掉了一部分，特别是当有多行时。
显然还有一些我还没有弄清楚的概念性问题，正确理解这个双标签示例可能会帮助我更好地理解。
我注释掉了整体高度限制，我认为这是必要的，但由于未注释，我只看到第二个标签的顶行。
import UIKit
@IBDesignable class TwoLabelView: UIView {
var topMargin: CGFloat = 11.0
var verticalSpacing: CGFloat = 3.0
var bottomMargin: CGFloat = 8.0
@IBInspectable var firstLabelText: String = "" { didSet { updateView() } }
@IBInspectable var secondLabelText: String = "" { didSet { updateView() } }
var viewHeight: CGFloat = 0.0
var firstLabel: UILabel!
var secondLabel: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
}
required public init?(coder: NSCoder) {
super.init(coder:coder)
setUpView()
}
func setUpView() {
firstLabel = UILabel()
firstLabel.font = UIFont.systemFont(ofSize: 18.0, weight: UIFontWeightBold)
firstLabel.numberOfLines = 3
firstLabel.lineBreakMode = NSLineBreakMode.byWordWrapping
secondLabel = UILabel()
secondLabel.font = UIFont.systemFont(ofSize: 13.0, weight: UIFontWeightRegular)
secondLabel.numberOfLines = 20
secondLabel.lineBreakMode = NSLineBreakMode.byWordWrapping
addSubview(firstLabel)
addSubview(secondLabel)
updateView()
}
func updateView() {
firstLabel.text = firstLabelText
secondLabel.text = secondLabelText
firstLabel.sizeToFit()
secondLabel.sizeToFit()
viewHeight = getHeight()
setNeedsUpdateConstraints()
}
override func updateConstraints() {
translatesAutoresizingMaskIntoConstraints = false
firstLabel .translatesAutoresizingMaskIntoConstraints = false
secondLabel.translatesAutoresizingMaskIntoConstraints = false
removeConstraints(constraints)
if self.isHidden == false {
self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1, constant: topMargin))
self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .top, relatedBy: .equal, toItem: firstLabel, attribute: .bottom, multiplier: 1, constant: verticalSpacing))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: bottomMargin))
//self.addConstraint(NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: viewHeight))
}
super.updateConstraints()
}
func getHeight() -> CGFloat {
return topMargin
+ firstLabel.frame.height
+ verticalSpacing
+ secondLabel.frame.height
+ bottomMargin
}
override open var intrinsicContentSize : CGSize {
return CGSize(width: UIViewNoIntrinsicMetric, height: getHeight())
}
}
两件事...
首先，您不需要不断地重新创建约束。设置标签时创建一次。
其次，您想使用约束让自动布局控制大小 - 这就是它们的用途。
第三，自动调整多行标签的大小可能很棘手。好吧，一个更好的词可能是 confounding！对于自动布局以呈现和调整标签中文本的大小，它必须 start 具有宽度。不幸的是，常见的情况是标签的宽度由其他东西控制 - 它的超级视图，堆栈视图等。但是......你还希望标签的宽度可以控制或 "push out the sides" 它的超级视图。
因此，您需要确保标签具有 preferredMaxLayoutWidth。当然，您不想对其进行硬编码 - 违背了创建灵活控件的目的。
无论如何，根据我的经验，诀窍是 force 自动布局到 运行 几次通过.. . 并设置进程的 preferredMaxLayoutWidth 排序 "in the middle"。
试试这个，看看你是否得到你想要的：
//
// TwoLabelView.swift
//
// Created by Don Mag on 8/2/17.
//
class FixAutoLabel: UILabel {
override func layoutSubviews() {
super.layoutSubviews()
if(self.preferredMaxLayoutWidth != self.bounds.size.width) {
self.preferredMaxLayoutWidth = self.bounds.size.width
}
}
}
@IBDesignable class TwoLabelView: UIView {
var topMargin: CGFloat = 11.0
var verticalSpacing: CGFloat = 3.0
var bottomMargin: CGFloat = 8.0
@IBInspectable var firstLabelText: String = "" { didSet { updateView() } }
@IBInspectable var secondLabelText: String = "" { didSet { updateView() } }
var firstLabel: FixAutoLabel!
var secondLabel: FixAutoLabel!
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
}
required public init?(coder: NSCoder) {
super.init(coder:coder)
setUpView()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
setUpView()
}
func setUpView() {
firstLabel = FixAutoLabel()
firstLabel.font = UIFont.systemFont(ofSize: 18.0, weight: UIFontWeightBold)
firstLabel.numberOfLines = 3
firstLabel.lineBreakMode = NSLineBreakMode.byTruncatingTail
secondLabel = FixAutoLabel()
secondLabel.font = UIFont.systemFont(ofSize: 13.0, weight: UIFontWeightRegular)
secondLabel.numberOfLines = 20
secondLabel.lineBreakMode = NSLineBreakMode.byTruncatingTail
addSubview(firstLabel)
addSubview(secondLabel)
// we're going to set the constraints
firstLabel .translatesAutoresizingMaskIntoConstraints = false
secondLabel.translatesAutoresizingMaskIntoConstraints = false
// pin both labels' left-edges to left-edge of self
firstLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
secondLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
// pin both labels' right-edges to right-edge of self
firstLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
secondLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
// pin firstLabel to the top of self + topMargin (padding)
firstLabel.topAnchor.constraint(equalTo: topAnchor, constant: topMargin).isActive = true
// pin top of secondLabel to bottom of firstLabel + verticalSpacing
secondLabel.topAnchor.constraint(equalTo: firstLabel.bottomAnchor, constant: verticalSpacing).isActive = true
// pin bottom of self to bottom of secondLabel + bottomMargin (padding)
bottomAnchor.constraint(equalTo: secondLabel.bottomAnchor, constant: bottomMargin).isActive = true
// colors are just for debugging so we can see the frames of the labels
firstLabel.backgroundColor = .cyan
secondLabel.backgroundColor = .green
// call common "refresh" func
updateView()
}
func updateView() {
firstLabel.preferredMaxLayoutWidth = self.bounds.width
secondLabel.preferredMaxLayoutWidth = self.bounds.width
firstLabel.text = firstLabelText
secondLabel.text = secondLabelText
firstLabel.sizeToFit()
secondLabel.sizeToFit()
setNeedsUpdateConstraints()
}
override open var intrinsicContentSize : CGSize {
// just has to have SOME intrinsic content size defined
// this will be overridden by the constraints
return CGSize(width: 1, height: 1)
}
}
我想创建一些可重复使用的自定义 UI 组件以供我使用，例如以下包含两个标签的 UIView。根据内容的不同，标签可能是多行的，我为上边距和下边距提供了一些限制。这些视图主要使用 Interface Builder 或以编程方式添加到我的布局中 UIStackViews 内。这里的问题是，运行时视图的高度计算不正确，在每个视图的底部切掉了一部分，特别是当有多行时。
显然还有一些我还没有弄清楚的概念性问题，正确理解这个双标签示例可能会帮助我更好地理解。
我注释掉了整体高度限制，我认为这是必要的，但由于未注释，我只看到第二个标签的顶行。
import UIKit
@IBDesignable class TwoLabelView: UIView {
var topMargin: CGFloat = 11.0
var verticalSpacing: CGFloat = 3.0
var bottomMargin: CGFloat = 8.0
@IBInspectable var firstLabelText: String = "" { didSet { updateView() } }
@IBInspectable var secondLabelText: String = "" { didSet { updateView() } }
var viewHeight: CGFloat = 0.0
var firstLabel: UILabel!
var secondLabel: UILabel!
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
}
required public init?(coder: NSCoder) {
super.init(coder:coder)
setUpView()
}
func setUpView() {
firstLabel = UILabel()
firstLabel.font = UIFont.systemFont(ofSize: 18.0, weight: UIFontWeightBold)
firstLabel.numberOfLines = 3
firstLabel.lineBreakMode = NSLineBreakMode.byWordWrapping
secondLabel = UILabel()
secondLabel.font = UIFont.systemFont(ofSize: 13.0, weight: UIFontWeightRegular)
secondLabel.numberOfLines = 20
secondLabel.lineBreakMode = NSLineBreakMode.byWordWrapping
addSubview(firstLabel)
addSubview(secondLabel)
updateView()
}
func updateView() {
firstLabel.text = firstLabelText
secondLabel.text = secondLabelText
firstLabel.sizeToFit()
secondLabel.sizeToFit()
viewHeight = getHeight()
setNeedsUpdateConstraints()
}
override func updateConstraints() {
translatesAutoresizingMaskIntoConstraints = false
firstLabel .translatesAutoresizingMaskIntoConstraints = false
secondLabel.translatesAutoresizingMaskIntoConstraints = false
removeConstraints(constraints)
if self.isHidden == false {
self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .top, relatedBy: .equal, toItem: self, attribute: .top, multiplier: 1, constant: topMargin))
self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: firstLabel, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .top, relatedBy: .equal, toItem: firstLabel, attribute: .bottom, multiplier: 1, constant: verticalSpacing))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .left, relatedBy: .equal, toItem: self, attribute: .left, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .right, relatedBy: .equal, toItem: self, attribute: .right, multiplier: 1, constant: 0.0))
self.addConstraint(NSLayoutConstraint(item: secondLabel, attribute: .bottom, relatedBy: .equal, toItem: self, attribute: .bottom, multiplier: 1, constant: bottomMargin))
//self.addConstraint(NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: viewHeight))
}
super.updateConstraints()
}
func getHeight() -> CGFloat {
return topMargin
+ firstLabel.frame.height
+ verticalSpacing
+ secondLabel.frame.height
+ bottomMargin
}
override open var intrinsicContentSize : CGSize {
return CGSize(width: UIViewNoIntrinsicMetric, height: getHeight())
}
}
两件事...
首先，您不需要不断地重新创建约束。设置标签时创建一次。
其次，您想使用约束让自动布局控制大小 - 这就是它们的用途。
第三，自动调整多行标签的大小可能很棘手。好吧，一个更好的词可能是 confounding！对于自动布局以呈现和调整标签中文本的大小，它必须 start 具有宽度。不幸的是，常见的情况是标签的宽度由其他东西控制 - 它的超级视图，堆栈视图等。但是......你还希望标签的宽度可以控制或 "push out the sides" 它的超级视图。
因此，您需要确保标签具有 preferredMaxLayoutWidth。当然，您不想对其进行硬编码 - 违背了创建灵活控件的目的。
无论如何，根据我的经验，诀窍是 force 自动布局到 运行 几次通过.. . 并设置进程的 preferredMaxLayoutWidth 排序 "in the middle"。
试试这个，看看你是否得到你想要的：
//
// TwoLabelView.swift
//
// Created by Don Mag on 8/2/17.
//
class FixAutoLabel: UILabel {
override func layoutSubviews() {
super.layoutSubviews()
if(self.preferredMaxLayoutWidth != self.bounds.size.width) {
self.preferredMaxLayoutWidth = self.bounds.size.width
}
}
}
@IBDesignable class TwoLabelView: UIView {
var topMargin: CGFloat = 11.0
var verticalSpacing: CGFloat = 3.0
var bottomMargin: CGFloat = 8.0
@IBInspectable var firstLabelText: String = "" { didSet { updateView() } }
@IBInspectable var secondLabelText: String = "" { didSet { updateView() } }
var firstLabel: FixAutoLabel!
var secondLabel: FixAutoLabel!
override init(frame: CGRect) {
super.init(frame: frame)
setUpView()
}
required public init?(coder: NSCoder) {
super.init(coder:coder)
setUpView()
}
override func prepareForInterfaceBuilder() {
super.prepareForInterfaceBuilder()
setUpView()
}
func setUpView() {
firstLabel = FixAutoLabel()
firstLabel.font = UIFont.systemFont(ofSize: 18.0, weight: UIFontWeightBold)
firstLabel.numberOfLines = 3
firstLabel.lineBreakMode = NSLineBreakMode.byTruncatingTail
secondLabel = FixAutoLabel()
secondLabel.font = UIFont.systemFont(ofSize: 13.0, weight: UIFontWeightRegular)
secondLabel.numberOfLines = 20
secondLabel.lineBreakMode = NSLineBreakMode.byTruncatingTail
addSubview(firstLabel)
addSubview(secondLabel)
// we're going to set the constraints
firstLabel .translatesAutoresizingMaskIntoConstraints = false
secondLabel.translatesAutoresizingMaskIntoConstraints = false
// pin both labels' left-edges to left-edge of self
firstLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
secondLabel.leftAnchor.constraint(equalTo: leftAnchor, constant: 0.0).isActive = true
// pin both labels' right-edges to right-edge of self
firstLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
secondLabel.rightAnchor.constraint(equalTo: rightAnchor, constant: 0.0).isActive = true
// pin firstLabel to the top of self + topMargin (padding)
firstLabel.topAnchor.constraint(equalTo: topAnchor, constant: topMargin).isActive = true
// pin top of secondLabel to bottom of firstLabel + verticalSpacing
secondLabel.topAnchor.constraint(equalTo: firstLabel.bottomAnchor, constant: verticalSpacing).isActive = true
// pin bottom of self to bottom of secondLabel + bottomMargin (padding)
bottomAnchor.constraint(equalTo: secondLabel.bottomAnchor, constant: bottomMargin).isActive = true
// colors are just for debugging so we can see the frames of the labels
firstLabel.backgroundColor = .cyan
secondLabel.backgroundColor = .green
// call common "refresh" func
updateView()
}
func updateView() {
firstLabel.preferredMaxLayoutWidth = self.bounds.width
secondLabel.preferredMaxLayoutWidth = self.bounds.width
firstLabel.text = firstLabelText
secondLabel.text = secondLabelText
firstLabel.sizeToFit()
secondLabel.sizeToFit()
setNeedsUpdateConstraints()
}
override open var intrinsicContentSize : CGSize {
// just has to have SOME intrinsic content size defined
// this will be overridden by the constraints
return CGSize(width: 1, height: 1)
}
}