Question

我有以下设置

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

我希望MyView具有最大可能的宽高比为1：1的帧，并应遵守不交叉4个视图（左视图，右视图，顶视图，底视图）中任何一个的边界条件。如何表达自动布局约束，最好在Storyboard中表达？

Answer 1

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

将容器视图固定在顶视图，前视图，底视图和尾视图之间，间距为0。
在容器视图中将MyView水平和垂直居中放置。
将MyView固定在容器视图的顶部，顶部，底部和尾部，并具有所需的任意间距和不需要的优先级（例如750）。
将MyView的销钉以所需的任意间距固定在容器的顶部，顶部，底部和尾部。这次使所有四个约束都大于等于。
将MyView的纵横比设置为您想要的任何值。

结果：

Answer 2

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

因此，您有几个选择，最直接，最简单的方法（在我看来）是使用“容器视图”保存“ MyView”

首先添加您的顶视图/底视图和左视图/右视图。我为它们设置了这些宽度/高度约束以进行演示。约束它们的顶部，顶部，底部和底部，顶部和底部水平居中，左侧和右侧垂直居中：

现在添加一个UIView，我们将其用作“容器视图”-我将其设为红色背景以使其易于查看：

将容器视图的每一侧限制为其他每个视图（TopView的顶部到底部，LeftView的尾部等）。

如果立即运行该应用程序，将得到以下结果：

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

接下来，将您的“ MyView”添加为容器视图的子视图...，我们将对约束有些棘手。

简单的部分：

1:1的比例约束
在容器视图中将其限制为垂直和水平居中

下一步：

添加零位的顶部/底部/前导/尾随约束
编辑，然后将其优先级设置为750

现在：

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

您的分镜脚本应如下所示：

，然后，当我们运行该应用程序时：

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

如您所见，中心“ MyView”以1：1的比例填充尽可能多的空间，并且左/右和上/下等距。

如果要在视图之间添加一些“填充”，请相对于每个顶部/底部左/右视图更改“容器视图”的约束。在这里，我将它们从零更改为8（无需其他更改）

然后，结果：

最后，这是情节提要的源代码：

<?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>

Answer 3

您想要这样的东西吗？

让我知道编辑我的答案。

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

3 个答案: