使用自动布局调整标签大小

Question

问题描述

我在 iOS 应用程序的绘图视图左侧有一个标签。 我已成功将标签旋转 90 度，如下图所示，使用以下部分中复制的代码：

但是，一旦我将文本更改为“速度（公里/小时）：”，标签就会变宽，如下所示：

布局

界面生成器中没有设置相关的约束。这里设置的唯一约束是： - 标签的垂直居中 - 绘图视图的右侧、顶部和底部边缘粘在视图的右侧、顶部和底部边缘

其余的在代码中设置

代码

func setup(speedArray: [Float32]) {

    //Convert speed to Km/h from m/s
    let speedArrayKMH = speedArray.map({$0*3.6})

    //Draw Chart
    //This only styles the chart (colors, user interaction, etc...
    //no code in this fuction that affects layout)
    setupSpeedChart(speedArray: speedArrayKMH)

    //
    //  Customise speed label
    //
    //Label text
    chartTitleLabel.textAlignment = .center
    //Text color
    self.chartTitleLabel.textColor = BoxTextColor
    //Rotate
    chartTitleLabel.transform = CGAffineTransform(rotationAngle: CGFloat(-Double.pi/2))
    //Constrain
    let C1 = NSLayoutConstraint(item: chartTitleLabel, attribute: .leadingMargin, relatedBy: .equal, toItem: self, attribute: .leading, multiplier: 1, constant: 0)
    let C2 = NSLayoutConstraint(item: chartTitleLabel, attribute: .trailingMargin, relatedBy: .equal, toItem: speedLineChart, attribute: .leading, multiplier: 1, constant: 0)

    NSLayoutConstraint.activate([C1, C2])

}

我的尝试

我尝试了多种结构和尺寸组合，包括：

• 修复标签的框架属性（高度和宽度）
• 为标签的宽度和高度添加约束

似乎没有任何效果

例如为标签宽度添加以下约束会产生这样的结果：

let C3 = NSLayoutConstraint(item: chartTitleLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 45)

Answer 1

缺少一些关键的东西 首先你忘了使用 translateAutoReaizingMaskIntoConstraints

转到情节提要选择您的标签转到标签下的检查器有自动收缩将其设置为最小字体大小将大小设置为 11

然后在视图didload中执行以下操作

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view.
    myLabel.text = "speed in km"
    myLabel.textAlignment = .center
    myLabel.transform = CGAffineTransform(rotationAngle: CGFloat(-Double.pi/2))
    myLabel.translatesAutoresizingMaskIntoConstraints = false
    let c1 = NSLayoutConstraint(item: myLabel, attribute: .width, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 200)
    let c2 = NSLayoutConstraint(item: myLabel, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .notAnAttribute, multiplier: 1, constant: 60)

    let c3 = NSLayoutConstraint(item: myLabel, attribute: .leading, relatedBy: .equal, toItem: view, attribute: .leading, multiplier: 1, constant: -60)
    let c4 = NSLayoutConstraint(item: myLabel, attribute: .centerY, relatedBy: .equal, toItem: myImageView, attribute: .centerY, multiplier: 1, constant: 0)

    NSLayoutConstraint.activate([c1, c2, c3, c4])

}

我尝试将文本更新为字符数比以前更多的新文本，我工作得很好

Answer 2

问题在于苹果文档中transform 的这部分描述：https://developer.apple.com/documentation/uikit/uiview/1622459-transform

在 iOS 8.0 及更高版本中，transform 属性不会影响自动布局。自动布局根据其未转换的框架计算视图的对齐矩形。

因此，当您更改标签的文本时，您的约束与未转换的框架有关。

解决方法是将标签嵌入“容器”UIView 并将容器的 width 限制为 height标签的，以及标签的高度到宽度。

像这样设置你的 xib（我使用对比色的背景颜色，以便于查看框架）：

请注意，我已将容器视图的宽度和高度约束设为 80。编辑每个约束并将它们设置为“占位符”：

我们将在代码中设置新的约束，因此这些约束将在构建时删除，但会满足 IB 的布局检查。

在自定义类的awakeFromNib() 中，添加新的宽度和高度约束并应用旋转变换：

override func awakeFromNib() {
    super.awakeFromNib()

    // set HUGGING priority on title label to REQUIRED for both axis
    chartTitleLabel.setContentHuggingPriority(.required, for: .horizontal)
    chartTitleLabel.setContentHuggingPriority(.required, for: .vertical)

    NSLayoutConstraint.activate([

        // constrain title container view WIDTH equal to title label HEIGHT
        // set the constant to add padding on left and right of rotated title label
        // here it is set to 12, which gives 6-pts padding on each side
        chartTitleContainerView.widthAnchor.constraint(equalTo: chartTitleLabel.heightAnchor, constant: 12.0),

        // constrain title container view HEIGHT equal to title label WIDTH
        chartTitleContainerView.heightAnchor.constraint(equalTo: chartTitleLabel.widthAnchor, constant: 0.0),

        ])

    // rotate the title label
    chartTitleLabel.transform = CGAffineTransform(rotationAngle: CGFloat(-Double.pi/2))

    // un-comment after development
    //      chartTitleLabel.backgroundColor = .clear
    //      chartTitleContainerView.backgroundColor = .clear

}

现在，在您的 setup() 函数中（我假设您将“绘图视图”添加为子视图），为绘图视图添加约束：

func setup(speedArray: [Float32]) {

    //Convert speed to Km/h from m/s
    let speedArrayKMH = speedArray.map({$0*3.6})

    // assuming setupSpeedChart() creates speedLineChart view and adds it to self

    //Draw Chart
    //This only styles the chart (colors, user interaction, etc...
    //no code in this fuction that affects layout)
    setupSpeedChart(speedArray: speedArrayKMH)

    NSLayoutConstraint.activate([

        // constrain chart view LEADING to title container view TRAILING
        speedLineChart.leadingAnchor.constraint(equalTo: chartTitleContainerView.trailingAnchor, constant: 0.0),

        // constrain chart view top, bottom and trailing to self
        speedLineChart.topAnchor.constraint(equalTo: topAnchor, constant: 0.0),
        speedLineChart.bottomAnchor.constraint(equalTo: bottomAnchor, constant: 0.0),
        speedLineChart.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 0.0),

        ])

}

这是结果：

并关闭“开发”颜色：

您现在可以更改标题标签的文本，它将保持垂直和水平居中，而无需更改水平大小/间距。