如何设置 NSLayoutAnchor 以生成纵横比为 1:1 的居中子视图 [英] How to set the NSLayoutAnchor to generate an centered subview with aspect ratio 1:1

问题描述

听起来并不难，但经过数小时的尝试，我无法找到合适的解决方案.

It doesn't sound too difficult, but after hours of trying I couldn't get a proper solution.

问题:我想设置约束(使用 NSLayoutAnchor 类)以使子视图(colorImageView)在父视图中居中，纵横比为 1:1并且总是在可能具有宽度 > 高度或高度 > 宽度的超级视图中的最大尺寸.

Problem: I want to set constraints (with class NSLayoutAnchor) to get a subview (colorImageView) beeing centered in the superview, with a aspect ratio of 1:1 AND always at the maximum size possible in a superview that sometimes has a width > height OR height > width.

示例 1:SuperViewSize = width : 80, height = 100 -> 子视图的高度和宽度应为 80 并以 (40/50) 为中心

Example 1: SuperViewSize = width : 80, height = 100 -> subview should get a height and width of 80 and centered at (40/50)

示例 2:SuperviewSize = width : 60, height = 50 -> 子视图的高度和宽度应为 50 并以 (30/25) 为中心

Example 2: SuperviewSize = width : 60, height = 50 -> subview should get a height and width of 50 and centered at (30/25)

我不想/并且它不能解决问题/硬编码 widthConstraint = min(superviewWidth, superviewHeight) 因为在创建子视图的那一刻，超级视图边界没有最终定义 -> 所以我需要一个约束.

I dont want /and it does not solve the problem / to hardcode a widthConstraint = min(superviewWidth, superviewHeight) because at the moment of creation the subview, the superviews bounds are not finally defined -> so I need a constraint.

这是我迄今为止的尝试(仍然缺少在变化的超级视图中将高度和宽度设置为最大可能的约束:

This is my attempt so far (still missing constraints to set height and width at the maximum possible within a varying superview:

// CREATE CONSTRAINTS(center in SuperView)
colorImageView.centerXAnchor.constraint(equalTo: self.centerXAnchor).isActive = true
colorImageView.centerYAnchor.constraint(equalTo: self.centerYAnchor).isActive = true

// CREATE CONSTRAINTS (ratio 1:1)
colorImageView.widthAnchor.constraint(equalTo: colorImageView.heightAnchor, multiplier: 1.0).isActive = true

非常感谢您的提示，如何做到这一点.在此先感谢:))

推荐答案

实现这个工作的关键是设置 colorImageView 的宽度等于其父视图的宽度，但优先级为750(而不是默认的 1000).

The key to making this work is to set the width of the colorImageView equal to the width of its superview but with a priority of 750 (instead of the default 1000).

然后将 colorImageView 的高度设置为 lessThanOrEqualTo 其父视图的高度.

Then set the height of the colorImageView to be lessThanOrEqualTo the height of its superview.

Auto Layout 将尽最大努力满足这两个新约束.

Auto Layout will do its best to satisfy these two new constraints.

当视图的宽度大于它的高度时，它不能使 colorImageView 的宽度等于视图的宽度，但是没关系，因为优先级是 750.它会使在不违反其他完整优先级约束的情况下尽可能大.

When the view's width is greater than its height, it won't be able to make the colorImageViews width equal to the view's width, but that's OK since the priority is 750. It will make it as big as possible without violating the other full priority constraints.

当视图的高度大于其宽度时，它将能够满足所有约束，因为colorView的高度是lessThanOrEqualTo视图的高度.

When the view's height is greater than its width, it will be able to satisfy all constraints because the colorView's height is lessThanOrEqualTo the view's height.

import UIKit

let view = UIView(frame: CGRect(x: 0, y: 0, width: 80, height: 100))
view.backgroundColor = .red

let colorImageView = UIView()
colorImageView.translatesAutoresizingMaskIntoConstraints = false
colorImageView.backgroundColor = .yellow

view.addSubview(colorImageView)

// CREATE CONSTRAINTS(center in SuperView)
colorImageView.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
colorImageView.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true

// CREATE CONSTRAINTS (ratio 1:1)
colorImageView.widthAnchor.constraint(equalTo: colorImageView.heightAnchor, multiplier: 1.0).isActive = true

let widthConstraint = colorImageView.widthAnchor.constraint(equalTo: view.widthAnchor)
widthConstraint.priority = UILayoutPriority(rawValue: 750)
widthConstraint.isActive = true

colorImageView.heightAnchor.constraint(lessThanOrEqualTo: view.heightAnchor).isActive = true

view.layoutIfNeeded()

view.frame = CGRect(x: 0, y: 0, width: 60, height: 50)
view.layoutIfNeeded()

<小时>

它在 Playground 中运行:

---

Here it is running in a Playground:

这篇关于如何设置 NSLayoutAnchor 以生成纵横比为 1:1 的居中子视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！