具有边界条件的自动布局约束答案

【问题标题】：Autolayout constraints with boundary conditions具有边界条件的自动布局约束
【发布时间】：2019-09-29 15:52:43
【问题描述】：

我有以下设置

            Top View
               |
               |
 LeftView -- MyView --- RightView
               |
               |
          BottomView

我希望 MyView 具有最大可能的帧，纵横比为 1:1，并且应该遵守不跨越 4 个视图（左视图、右视图、顶视图、底视图）中的任何一个的边界条件。如何表达自动布局约束，最好是在 Storyboard 中？

【问题讨论】：

外视图的具体内容是什么？
我在 2 年前创建了一个 Swift 3 存储库，用于在任何屏幕中以 1:1 视图为中心。我刚刚在github.com/justdfd/Square-Swift5 将其更新为 Swift 5@ 我可以用实际视图替换“边距”，但我认为这对你来说会更好 - 学习时刻等等。基本上，我认为您需要添加比我更多的约束 - 每个居中视图方面都有两个约束，一个 和一个 = 具有较低优先级 - 这些需要与周围的视图相似。底线？多个约束希望不同的优先级。
如何使用您的解决方案将 MyView 居中（不使用 Andre 建议的 superview 解决方案）？
@DeepakSharma - 你想让MyView 以超级视图为中心吗？或者在左/右顶/底视图之间居中？换句话说，如果LeftVIew 是 40-pts 宽，RightView 是 100-pts 宽，您是否希望 MyView 的中心位于 superVIew 的中心——这会在它之间留出更大的空间和LeftView 以及它与RightView 之间的较小空间？还是应该在superView中心的left-of-center，并且在Left/Right之间同样居中？
希望它在左/右和上/下之间居中。视图可以有不同的大小。

标签： ios swift autolayout uikit ios-autolayout

【解决方案1】：

你想要这样的东西吗？

让我知道编辑我的答案。

【讨论】：

【解决方案2】：

“元素之间的距离”约束不能彼此相等或成比例。

所以你有几个选择，最直接和最简单的（在我看来）是使用“容器视图”来保存“MyView”

首先添加您的顶/底和左/右视图。我已经设置了这些宽度/高度约束来演示。将它们约束在 Top、Leading、Trailing 和 Bottom，Top 和 Bottom 水平居中，Left 和 Right 垂直居中：

现在添加一个UIView，我们将其用作“容器视图”——我给它设置了红色背景以便于查看：

将容器视图的每一侧约束到每个其他视图（TopView 从上到下，LeftView 到尾随等）。

如果你现在运行应用程序，你会得到这样的结果：

到目前为止，没有什么特别的。

接下来，将您的“MyView”添加为容器视图的子视图......我们将在约束方面变得有点棘手。

简单的部分：

1:1的比例约束
约束它在容器视图中垂直和水平居中

下一步：

添加零的顶部/底部/前导/尾随约束
编辑每个约束并将它们的优先级设置为750

现在：

添加另一组为零的顶部/底部/前导/尾随约束
编辑每个那些约束并将它们设置为>=

您的故事板应如下所示：

并且，当我们运行应用程序时：

以下是容器视图背景设置为clear 时的外观：

如您所见，中心“MyView”尽可能多地填充空间，同时保持 1:1 的比例，并且左/右和上/下的间距相等。

如果您想在视图之间进行一点“填充”，请更改“容器视图”相对于每个上/下左/右视图的约束。在这里，我将它们从零更改为 8（无需其他更改）

结果：

最后，这里是 Storyboard 的来源：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="yEI-oI-7TM">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="lsW-Jh-u0o">
            <objects>
                <viewController id="yEI-oI-7TM" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="bPW-Lv-D8K">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="200 x 28" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ufs-Rs-T6p">
                                <rect key="frame" x="87.5" y="20" width="200" height="28"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="width" constant="200" id="KeC-SC-7sr"/>
                                    <constraint firstAttribute="height" constant="28" id="Snc-pq-7hW"/>
                                </constraints>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ytj-cQ-xcw">
                                <rect key="frame" x="0.0" y="258.5" width="34" height="150"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="150" id="LDr-tW-Ea2"/>
                                    <constraint firstAttribute="width" constant="34" id="jXP-5w-bh0"/>
                                </constraints>
                                <string key="text">34
x
150</string>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="FKr-kC-VXc">
                                <rect key="frame" x="275" y="233.5" width="100" height="200"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="200" id="JX4-TU-YAy"/>
                                    <constraint firstAttribute="width" constant="100" id="lyr-5f-Pkd"/>
                                </constraints>
                                <string key="text">100
x
200</string>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="100 x 100" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Yjf-aU-73z">
                                <rect key="frame" x="137.5" y="567" width="100" height="100"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="width" constant="100" id="7cd-f4-E5d"/>
                                    <constraint firstAttribute="height" constant="100" id="OJH-rB-ezu"/>
                                </constraints>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="HVg-nR-YS6">
                                <rect key="frame" x="42" y="56" width="225" height="503"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="MyView" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="KKs-Gt-Kdd">
                                        <rect key="frame" x="0.0" y="139" width="225" height="225"/>
                                        <color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="width" secondItem="KKs-Gt-Kdd" secondAttribute="height" multiplier="1:1" id="7W6-ga-lno"/>
                                        </constraints>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <color key="backgroundColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="centerY" secondItem="HVg-nR-YS6" secondAttribute="centerY" id="1Xx-i7-Ozs"/>
                                    <constraint firstAttribute="trailing" secondItem="KKs-Gt-Kdd" secondAttribute="trailing" priority="750" id="AGs-sc-h0s"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="leading" secondItem="HVg-nR-YS6" secondAttribute="leading" priority="750" id="BpD-Dh-uWw"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="top" secondItem="HVg-nR-YS6" secondAttribute="top" priority="750" id="Cab-k8-rRO"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="top" relation="greaterThanOrEqual" secondItem="HVg-nR-YS6" secondAttribute="top" id="PA2-Kf-ZGk"/>
                                    <constraint firstAttribute="bottom" secondItem="KKs-Gt-Kdd" secondAttribute="bottom" priority="750" id="XAa-gM-AS6"/>
                                    <constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="KKs-Gt-Kdd" secondAttribute="trailing" id="ZwM-wh-Yva"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="centerX" secondItem="HVg-nR-YS6" secondAttribute="centerX" id="gcp-tp-2tO"/>
                                    <constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="KKs-Gt-Kdd" secondAttribute="bottom" id="msf-lp-AEL"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="HVg-nR-YS6" secondAttribute="leading" id="uSX-oQ-rlK"/>
                                </constraints>
                            </view>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="HVg-nR-YS6" firstAttribute="top" secondItem="ufs-Rs-T6p" secondAttribute="bottom" constant="8" id="0dx-30-jr7"/>
                            <constraint firstItem="tiR-WL-oTG" firstAttribute="trailing" secondItem="FKr-kC-VXc" secondAttribute="trailing" id="9Nc-oP-aij"/>
                            <constraint firstItem="HVg-nR-YS6" firstAttribute="leading" secondItem="ytj-cQ-xcw" secondAttribute="trailing" constant="8" id="JFX-0b-cV0"/>
                            <constraint firstItem="ytj-cQ-xcw" firstAttribute="leading" secondItem="tiR-WL-oTG" secondAttribute="leading" id="KdN-6J-uTP"/>
                            <constraint firstItem="FKr-kC-VXc" firstAttribute="centerY" secondItem="bPW-Lv-D8K" secondAttribute="centerY" id="TZl-s4-qtB"/>
                            <constraint firstItem="ufs-Rs-T6p" firstAttribute="top" secondItem="tiR-WL-oTG" secondAttribute="top" id="Xik-Uy-8Dc"/>
                            <constraint firstItem="Yjf-aU-73z" firstAttribute="top" secondItem="HVg-nR-YS6" secondAttribute="bottom" constant="8" id="dWC-mc-WBd"/>
                            <constraint firstItem="FKr-kC-VXc" firstAttribute="leading" secondItem="HVg-nR-YS6" secondAttribute="trailing" constant="8" id="hvb-za-mJZ"/>
                            <constraint firstItem="Yjf-aU-73z" firstAttribute="centerX" secondItem="bPW-Lv-D8K" secondAttribute="centerX" id="n15-uw-LKo"/>
                            <constraint firstItem="tiR-WL-oTG" firstAttribute="bottom" secondItem="Yjf-aU-73z" secondAttribute="bottom" id="uws-fV-jh6"/>
                            <constraint firstItem="ufs-Rs-T6p" firstAttribute="centerX" secondItem="bPW-Lv-D8K" secondAttribute="centerX" id="zNk-qR-tkB"/>
                            <constraint firstItem="ytj-cQ-xcw" firstAttribute="centerY" secondItem="bPW-Lv-D8K" secondAttribute="centerY" id="zje-ml-TE1"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="tiR-WL-oTG"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="DYV-sv-5ip" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-2338.4000000000001" y="234.33283358320841"/>
        </scene>
    </scenes>
</document>

【讨论】：

【解决方案3】：

使用常规的UIView 作为MyView 的容器（父级）（这是正确居中所必需的）。然后使用以下约束：

将容器视图固定到顶部、前导、底部和尾随视图，间距为 0。
在容器视图中水平和垂直居中MyView。
将 MyView 固定到容器视图的顶部、前导、底部和尾部，可使用任意间距和非必需优先级（例如 750）。
再次将MyView 固定到容器的顶部、前导、底部和尾部，并按您希望的间距。这一次使所有四个约束都需要并且大于。
将MyView 的纵横比设置为您想要的任何值。

结果：

【讨论】：

使用父视图总是可行的，但任何选项都不会影响视图层次？
... 总是可能的？你为什么不说你不是在寻找这样的解决方案？
您不必使用父视图来保存 myView 这可以通过约束来处理并产生相同的效果
你能否在没有容器的情况下在情节提要中展示如何做到这一点，@Sh_Khan？
你需要前导、尾随、centerY 和 aspect