我想使用AutoLayout以一种让人联想到UIImageView的方面适合内容模式的方式来大小和布局视图。

我在接口生成器的容器视图中有一个子视图。子视图有一些固有的纵横比,我希望尊重它。容器视图的大小在运行时之前是未知的。

如果容器视图的纵横比比子视图宽,那么我希望子视图的高度等于父视图的高度。

如果容器视图的纵横比大于子视图,那么我希望子视图的宽度等于父视图的宽度。

在这两种情况下,我希望子视图在容器视图中水平和垂直居中。

在Xcode 6或之前的版本中,是否有一种方法可以使用AutoLayout约束来实现这一点?理想情况下使用Interface Builder,但如果不是,也许可以通过编程方式定义这样的约束。


当前回答

这是针对macOS的。

我有问题使用罗伯的方式来实现方面适合OS X应用程序。但我用了另一种方法——我没有使用宽度和高度,而是使用了前导、后导、顶部和底部空间。

基本上,添加两个前导空格,其中一个是>= 0 @1000所需优先级,另一个是= 0 @250低优先级。对尾距、顶部和底部空间做相同的设置。

当然,你需要设置纵横比和中心X和中心Y。

然后工作就完成了!

其他回答

这是针对macOS的。

我有问题使用罗伯的方式来实现方面适合OS X应用程序。但我用了另一种方法——我没有使用宽度和高度,而是使用了前导、后导、顶部和底部空间。

基本上,添加两个前导空格,其中一个是>= 0 @1000所需优先级,另一个是= 0 @250低优先级。对尾距、顶部和底部空间做相同的设置。

当然,你需要设置纵横比和中心X和中心Y。

然后工作就完成了!

我需要一个解决方案从接受的答案,但从代码执行。我发现的最优雅的方式是使用砌体框架。

#import "Masonry.h"

...

[view mas_makeConstraints:^(MASConstraintMaker *make) {
    make.width.equalTo(view.mas_height).multipliedBy(aspectRatio);
    make.size.lessThanOrEqualTo(superview);
    make.size.equalTo(superview).with.priorityHigh();
    make.center.equalTo(superview);
}];

也许这是最简短的答案,使用砌体,它也支持方面填充和拉伸。

typedef NS_ENUM(NSInteger, ContentMode) {
    ContentMode_aspectFit,
    ContentMode_aspectFill,
    ContentMode_stretch
}

// ....

[containerView addSubview:subview];

[subview mas_makeConstraints:^(MASConstraintMaker *make) {
    if (contentMode == ContentMode_stretch) {
        make.edges.equalTo(containerView);
    }
    else {
        make.center.equalTo(containerView);
        make.edges.equalTo(containerView).priorityHigh();
        make.width.equalTo(content.mas_height).multipliedBy(4.0 / 3); // the aspect ratio
        if (contentMode == ContentMode_aspectFit) {
            make.width.height.lessThanOrEqualTo(containerView);
        }
        else { // contentMode == ContentMode_aspectFill
            make.width.height.greaterThanOrEqualTo(containerView);
        }
    }
}];

你不是在描述比例匹配;您正在描述方面拟合。(我已经编辑了你的问题。)子视图变得尽可能大,同时保持它的纵横比并完全适合它的父视图。

不管怎样,你可以用自动布局来做这个。你完全可以在Xcode 5.1的IB中完成。让我们从一些视图开始:

浅绿色视图的长宽比为4:1。深绿色视图的长宽比为1:4。我将设置约束,以便蓝色视图填充屏幕的上半部分,粉红色视图填充屏幕的下半部分,每个绿色视图尽可能地扩展,同时保持其纵横比并适合其容器。

首先,我将在蓝色视图的所有四个边创建约束。我将它固定到每条边上最近的邻居,距离为0。我确保关闭了页边距:

注意,我还没有更新框架。我发现在设置约束时在视图之间留出空间更容易,只需手动将常量设置为0(或任何值)。

接下来,我将粉红色视图的左、下、右边缘固定到最近的邻居。我不需要设置上边约束因为它的上边已经被约束到蓝色视图的下边。

我还需要在粉色和蓝色视图之间设置等高约束。这将使它们各自占据屏幕的一半:

如果我告诉Xcode现在更新所有的帧,我得到这个:

所以到目前为止我建立的约束条件是正确的。我撤销它并开始处理浅绿色视图。

对浅绿色视图进行方面拟合需要五个约束:

A required-priority aspect ratio constraint on the light green view. You can create this constraint in a xib or storyboard with Xcode 5.1 or later. A required-priority constraint limiting the width of the light green view to be less than or equal to the width of its container. A high-priority constraint setting the width of the light green view to be equal to the width of its container. A required-priority constraint limiting the height of the light green view to be less than or equal to the height of its container. A high-priority constraint setting the height of the light green view to be equal to the height of its container.

让我们考虑两个宽度约束。小于或等于约束本身不足以确定浅绿色视图的宽度;许多宽度将符合限制。由于存在歧义,自动布局将尝试选择一个解决方案,使其他约束(高优先级但不是必需的)中的错误最小化。最小化误差意味着使宽度尽可能接近容器的宽度,同时不违反所需的小于或等于约束。

同样的事情也发生在高度限制上。由于还需要宽高比约束,它只能沿一个轴最大化子视图的大小(除非容器恰好与子视图具有相同的宽高比)。

首先我创建纵横比约束:

然后我用容器创建等宽和等高的约束:

我需要将这些约束编辑为小于或等于约束:

接下来,我需要用容器创建另一组等宽和高的约束:

我需要让这些新的约束的优先级低于要求的优先级:

最后,你要求子视图在它的容器中居中,所以我将设置这些约束:

现在,为了测试,我将选择视图控制器并让Xcode更新所有的帧。这是我得到的结果:

哦!子视图已经扩展到完全填充它的容器。如果我选择它,我可以看到它保持了它的纵横比,但它在做一个方面填充而不是方面拟合。

问题是,在一个小于或等于的约束上,哪个视图在约束的两端很重要,而Xcode设置的约束与我的期望相反。我可以选择两个约束中的每一个,并反转其第一项和第二项。相反,我将只选择子视图并将约束更改为大于或等于:

Xcode更新布局:

现在我对底部的深绿色视图做同样的事情。我需要确保它的纵横比是1:4 (Xcode以一种奇怪的方式调整了它,因为它没有约束)。我不会再展示步骤了,因为它们是一样的。结果如下:

现在我可以在iPhone 4S模拟器中运行它,它的屏幕大小与IB使用的屏幕大小不同,并测试旋转:

我可以在iPhone 6模拟器中进行测试:

为了方便大家,我上传了我最后的故事板。

我找不到任何现成的完全程序化的解决方案,所以这里是我在swift 5中对方面填充扩展到视图的看法:

extension UIView {

    public enum FillingMode {
        case full(padding:Int = 0)
        case aspectFit(ratio:CGFloat)
        // case aspectFill ...
    }

    public func addSubview(_ newView:UIView, withFillingMode fillingMode:FillingMode) {
        newView.translatesAutoresizingMaskIntoConstraints = false
        addSubview(newView)

        switch fillingMode {
        case let .full(padding):
            let cgPadding = CGFloat(padding)

            NSLayoutConstraint.activate([
                newView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: cgPadding),
                newView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -cgPadding),
                newView.topAnchor.constraint(equalTo: topAnchor, constant: cgPadding),
                newView.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -cgPadding)
            ])
        case let .aspectFit(ratio):
            guard ratio != 0 else { return }

            NSLayoutConstraint.activate([
                newView.centerXAnchor.constraint(equalTo: centerXAnchor),
                newView.centerYAnchor.constraint(equalTo: centerYAnchor),

                newView.leadingAnchor.constraint(greaterThanOrEqualTo: leadingAnchor),
                newView.leadingAnchor.constraint(equalTo: leadingAnchor).usingPriority(900),

                newView.trailingAnchor.constraint(lessThanOrEqualTo: trailingAnchor),
                newView.trailingAnchor.constraint(equalTo: trailingAnchor).usingPriority(900),

                newView.topAnchor.constraint(greaterThanOrEqualTo: topAnchor),
                newView.topAnchor.constraint(equalTo: topAnchor).usingPriority(900),

                newView.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor),
                newView.bottomAnchor.constraint(equalTo: bottomAnchor).usingPriority(900),

                newView.heightAnchor.constraint(equalTo: newView.widthAnchor, multiplier: CGFloat(ratio)),
            ])
        }
    }
}

这里是优先级扩展(来自另一个线程,但我“保护它”与1…1000之间的一些模式匹配:

extension NSLayoutConstraint {
    /// Returns the constraint sender with the passed priority.
    ///
    /// - Parameter priority: The priority to be set.
    /// - Returns: The sended constraint adjusted with the new priority.
    func usingPriority(_ priority: Int) -> NSLayoutConstraint {
        self.priority = UILayoutPriority( (1...1000 ~= priority) ? Float(priority) : 1000 )
        return self
    }
}

希望能有所帮助~