Swift 根据标签调整superview的大小';s字体大小和图像';s长宽比

Swift 根据标签调整superview的大小';s字体大小和图像';s长宽比,swift,uiview,autolayout,uilabel,dynamic-type-feature,Swift,Uiview,Autolayout,Uilabel,Dynamic Type Feature,这是一个与自动布局相关的问题。我有containerView,它有两个子视图:imageView和label。我想让标签的字体大小根据imageView的纵横比确定containerView的大小 当字体大小增加时,containerView和imageView应该变大,以保持纵横比,并保持标签居中,并使用一些填充,如下图所示 我想通过编程实现它 任何帮助都将不胜感激 您可以通过以下方式实现: 将图像视图约束到容器的所有4个侧面 约束容器中居中的标签 将图像视图约束为16:9比例 将图像视图的

这是一个与自动布局相关的问题。我有
containerView
,它有两个子视图:
imageView
label
。我想让
标签的字体大小根据
imageView
的纵横比确定
containerView
的大小

当字体大小增加时,
containerView
imageView
应该变大,以保持纵横比,并保持
标签
居中,并使用一些填充,如下图所示

我想通过编程实现它

任何帮助都将不胜感激


您可以通过以下方式实现:

  • 将图像视图约束到容器的所有4个侧面
  • 约束容器中居中的标签
  • 将图像视图约束为16:9比例
  • 将图像视图的高度约束为标签的高度+所需的“填充”
下面是一个示例,包括增加/减少字体大小的按钮:

class WalterViewController: UIViewController {

    let theContainerView: UIView = {
        let v = UIView()
        v.backgroundColor = .blue
        return v
    }()

    let theImageView: UIImageView = {
        let v = UIImageView()
        v.backgroundColor = .red
        v.contentMode = .scaleToFill
        return v
    }()

    let theLabel: UILabel = {
        let v = UILabel()
        v.backgroundColor = .yellow
        v.textAlignment = .center
        v.text = "TEST"
        // content vertical hugging REQUIRED !!!
        v.setContentHuggingPriority(.required, for: .vertical)
        return v
    }()

    let btnUp: UIButton = {
        let b = UIButton(type: .system)
        b.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
        b.setTitle("Increase", for: .normal)
        return b
    }()

    let btnDn: UIButton = {
        let b = UIButton(type: .system)
        b.backgroundColor = UIColor(white: 0.9, alpha: 1.0)
        b.setTitle("Decrease", for: .normal)
        return b
    }()

    let btnStack: UIStackView = {
        let v = UIStackView()
        v.axis = .horizontal
        v.spacing = 12
        v.distribution = .fillEqually
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // we'll be using constraints
        [theContainerView, theImageView, theLabel, btnUp, btnDn, btnStack].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }

        // add buttons to the stack
        btnStack.addArrangedSubview(btnUp)
        btnStack.addArrangedSubview(btnDn)

        // add imageView and label to container
        theContainerView.addSubview(theImageView)
        theContainerView.addSubview(theLabel)

        // add button stack and container view to view
        view.addSubview(btnStack)
        view.addSubview(theContainerView)

        // respect safe area
        let g = view.safeAreaLayoutGuide

        NSLayoutConstraint.activate([

            // horizontal button stack 20-points from top, 40-points on each side
            btnStack.topAnchor.constraint(equalTo: g.topAnchor, constant: 20.0),
            btnStack.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 40.0),
            btnStack.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: -40.0),

            // container view centered in view safeArea
            theContainerView.centerXAnchor.constraint(equalTo: g.centerXAnchor),
            theContainerView.centerYAnchor.constraint(equalTo: g.centerYAnchor),

            // constrain image view to its superView (container view)
            // 8-pts on all 4 sides
            theImageView.topAnchor.constraint(equalTo: theContainerView.topAnchor, constant: 8.0),
            theImageView.leadingAnchor.constraint(equalTo: theContainerView.leadingAnchor, constant: 8.0),
            theImageView.trailingAnchor.constraint(equalTo: theContainerView.trailingAnchor, constant: -8.0),
            theImageView.bottomAnchor.constraint(equalTo: theContainerView.bottomAnchor, constant: -8.0),

            // label is centered in its superView (container view)
            theLabel.centerXAnchor.constraint(equalTo: theContainerView.centerXAnchor),
            theLabel.centerYAnchor.constraint(equalTo: theContainerView.centerYAnchor),

            // constrain imageView to 16:9 ratio
            theImageView.widthAnchor.constraint(equalTo: theImageView.heightAnchor, multiplier: 16.0 / 9.0),

            // constrain imageView's height to label's height +40
            // will result in 20-pts on top and bottom
            theImageView.heightAnchor.constraint(equalTo: theLabel.heightAnchor, constant: 40.0),

        ])

        // load an image
        if let img = UIImage(named: "bkg640x360") {
            theImageView.image = img
        }

        // add targets to buttons to increase / decrease the label's font size
        btnUp.addTarget(self, action: #selector(increaseTapped(_:)), for: .touchUpInside)
        btnDn.addTarget(self, action: #selector(decreaseTapped(_:)), for: .touchUpInside)

    }

    @objc func increaseTapped(_ sender: Any?) -> Void {
        theLabel.font = theLabel.font.withSize(theLabel.font.pointSize + 1.0)
    }

    @objc func decreaseTapped(_ sender: Any?) -> Void {
        theLabel.font = theLabel.font.withSize(theLabel.font.pointSize - 1.0)
    }

}
启动时的外观(容器视图在根视图中居中):

而且,在轻敲之后,增加一系列的次数: