如何设置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 =宽度:80，高度= 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 =宽度:60，高度= 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

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

I'd really appreciate a hint, how to do that. Thanks in advance :))

推荐答案

进行此操作的关键是将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 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()

---

它在游乐场中运行:

---

Here it is running in a Playground:

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