ios - CGAffineTransform 旋转导致定义 SnapKit 值时宽度和高度之间的切换

Question

我已经很习惯使用 SnapKit，但我不确定如何解决这个问题。

这是我当前的 UI 的样子:

为了实现这一目标，我这样做:

 override func viewDidLoad() {
        super.viewDidLoad()

 regionsPicker.snp.makeConstraints { (make) in
            make.centerX.equalToSuperview()
            make.height.equalToSuperview() // since we rotate (this is the width)
            make.top.equalTo(regionsLabel.snp.bottom).offset(15)
            make.width.equalTo(100)
        }
 rotationAngle = -90 * (.pi/180)
        regionsPicker.transform = CGAffineTransform(rotationAngle: rotationAngle)
}

如上图所示，我试图将标签的底部与选择器 View 的顶部对齐。但是由于我正在旋转我的 View ，使高度等于 superview，它反而创建了这个巨大的空间。

我看过this answer这建议针对这种特定情况使用自动布局，或者，我也可以使用 Collection View ，但我很想知道是否有针对这种情况的 SnapKit 解决方案

感谢您的帮助。

Answer 1

问题出在Apple文档中transform描述的这一部分:https://developer.apple.com/documentation/uikit/uiview/1622459-transform

In iOS 8.0 and later, the transform property does not affect Auto Layout. Auto layout calculates a view’s alignment rectangle based on its untransformed frame. So, when you change the text of the label, your constraints are related to the untransformed frame.

因此，您将 pickerView 的高度设置为 View 的高度。然后旋转它，它就会出现，变成您想要的样子。

如果您使用调试 View 层次结构，您会发现 pickerView 现在远远超出了其 superView 的前缘和后缘。

您还会看到 pickerView 的 bounds 的宽度和高度 - 100 x 667(在 iPhone 8 上)-不是你所期望的。

这也会在 View 大小发生变化时出现问题(例如在设备旋转时)。

这是一个示例方法:

import UIKit

class ViewController: UIViewController {

    let regionsLabel: UILabel = {
        let v = UILabel()
        v.backgroundColor = .red
        v.text = "Testing"
        return v
    }()

    let regionsPicker: UIPickerView = {
        let v = UIPickerView()
        v.backgroundColor = .green
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        view.backgroundColor = .cyan

        // add the label
        view.addSubview(regionsLabel)

        // center label horizontally, 10-pts from view top (safe area)
        regionsLabel.snp.makeConstraints { (make) in
            make.centerX.equalToSuperview()
            make.top.equalTo(self.view.safeAreaLayoutGuide.snp.top).offset(10)
        }

        // add the picker view
        view.addSubview(regionsPicker)

        // rotate the picker view
        let rotationAngle: CGFloat = -90 * (.pi/180)
        regionsPicker.transform = CGAffineTransform(rotationAngle: rotationAngle)

    }

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        regionsPicker.snp.remakeConstraints { (make) in

            // constrain picker view center horizontally
            make.centerX.equalToSuperview()

            // constant of 100 - because it's rotated, set the width
            make.width.equalTo(100)

            // constrain the height to a constant equal to the view width
            make.height.equalTo(view.bounds.width)

            // constrain the centerY to the centerY of the label,
            // plus one-half the label's frame height / 2
            // plus a constant of 65 (half the "height" of the picker view + 15-pts spacing)
            make.centerY.equalTo(regionsLabel.snp.centerY).offset(regionsLabel.frame.height / 2.0 + 65.0)

        }

    }

}

结果是: