Xcode 自动布局不断改变我的布局

Xcode Auto Layout keeps changing my Layout

我试图让我的应用在不同的屏幕尺寸上看起来一样,但似乎 Xcode 只是忽略了我在另一个屏幕尺寸上的约束 This is what it looks like on an iPhone 7 Sceen

这就是我想要的样子,但是在(例如)iPhone XR 上会发生这种情况: the text field get streched

我该如何解决这个问题?

您的元素受到限制 top-to-bottom。这意味着当您在更高的屏幕上时,某些东西 必须伸展。

您可能希望字段高度保持不变,并在最后一个字段和按钮之间留出额外的 space。

因此,限制您的字段 top-down,但不要给最后一个字段设置底部限制。

然后将您的按钮限制在视图的底部,使其保持不动。

当然,当您的应用 运行 在较小的设备上运行时,将不会 足够 垂直 space 用于所有内容...您要么需要设计它以减少字段和标签之间的垂直间距,要么需要将其全部放在滚动视图中。


编辑: 正如Matt[=17=所建议的那样]

这里是一个使用 UIStackView 的例子。每个标签/字段对都包含在 UIView 中,因此它们彼此靠近。

然后,每个视图都与按钮一起添加到 UIStackView。堆栈视图被限制在视图的所有 4 个边(有一些填充),并设置为:

Axis: Vertical
Alignment: Fill
Distribution: Equal Spacing
Spacing: 0

iPhone8、SE 和 XS 的结果:

这是故事板的来源:

<?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">
    <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="et4-ph-qFU">
            <objects>
                <viewController id="0KB-bM-lGa" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="5xd-aB-51J">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="equalSpacing" translatesAutoresizingMaskIntoConstraints="NO" id="sJk-vH-8Fe">
                                <rect key="frame" x="20" y="100" width="335" height="527"/>
                                <subviews>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="9kL-Fs-g0D">
                                        <rect key="frame" x="0.0" y="0.0" width="335" height="59"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Firma:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="dEJ-Oa-qMo">
                                                <rect key="frame" x="0.0" y="0.0" width="335" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" placeholder="Firmen Name" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="y80-WD-UsN">
                                                <rect key="frame" x="0.0" y="28.5" width="335" height="30.5"/>
                                                <nil key="textColor"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                <textInputTraits key="textInputTraits"/>
                                            </textField>
                                        </subviews>
                                        <constraints>
                                            <constraint firstAttribute="trailing" secondItem="y80-WD-UsN" secondAttribute="trailing" id="1Qn-QT-svI"/>
                                            <constraint firstItem="y80-WD-UsN" firstAttribute="leading" secondItem="9kL-Fs-g0D" secondAttribute="leading" id="Zrp-Iv-UpA"/>
                                            <constraint firstItem="y80-WD-UsN" firstAttribute="top" secondItem="dEJ-Oa-qMo" secondAttribute="bottom" constant="8" id="h6I-Cu-Cep"/>
                                            <constraint firstAttribute="trailing" secondItem="dEJ-Oa-qMo" secondAttribute="trailing" id="ojC-Hl-iOQ"/>
                                            <constraint firstItem="dEJ-Oa-qMo" firstAttribute="top" secondItem="9kL-Fs-g0D" secondAttribute="top" id="pAR-uA-9Jm"/>
                                            <constraint firstAttribute="bottom" secondItem="y80-WD-UsN" secondAttribute="bottom" id="sNE-S4-8fz"/>
                                            <constraint firstItem="dEJ-Oa-qMo" firstAttribute="leading" secondItem="9kL-Fs-g0D" secondAttribute="leading" id="ytP-V8-Ljx"/>
                                        </constraints>
                                    </view>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="39p-CV-TpJ">
                                        <rect key="frame" x="0.0" y="119.5" width="335" height="59"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Kontaktperson:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="I8h-Ni-H0m">
                                                <rect key="frame" x="0.0" y="0.0" width="335" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" placeholder="Jon Doe" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="SmT-mA-Gye">
                                                <rect key="frame" x="0.0" y="28.5" width="335" height="30.5"/>
                                                <nil key="textColor"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                <textInputTraits key="textInputTraits"/>
                                            </textField>
                                        </subviews>
                                        <constraints>
                                            <constraint firstItem="SmT-mA-Gye" firstAttribute="leading" secondItem="39p-CV-TpJ" secondAttribute="leading" id="1jz-77-gyZ"/>
                                            <constraint firstAttribute="bottom" secondItem="SmT-mA-Gye" secondAttribute="bottom" id="A8e-ja-UsG"/>
                                            <constraint firstItem="SmT-mA-Gye" firstAttribute="top" secondItem="I8h-Ni-H0m" secondAttribute="bottom" constant="8" id="SiK-50-qR8"/>
                                            <constraint firstItem="I8h-Ni-H0m" firstAttribute="top" secondItem="39p-CV-TpJ" secondAttribute="top" id="WLB-IN-NPQ"/>
                                            <constraint firstAttribute="trailing" secondItem="SmT-mA-Gye" secondAttribute="trailing" id="X0Z-RS-0DO"/>
                                            <constraint firstItem="I8h-Ni-H0m" firstAttribute="leading" secondItem="39p-CV-TpJ" secondAttribute="leading" id="dGG-p0-EYr"/>
                                            <constraint firstAttribute="trailing" secondItem="I8h-Ni-H0m" secondAttribute="trailing" id="oEK-KL-zgz"/>
                                        </constraints>
                                    </view>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Joh-pH-Jnd">
                                        <rect key="frame" x="0.0" y="238.5" width="335" height="59"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="E-Mail Addresse:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="swE-G9-gnC">
                                                <rect key="frame" x="0.0" y="0.0" width="335" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" placeholder="abc@123.com" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="kn2-FC-VFP">
                                                <rect key="frame" x="0.0" y="28.5" width="335" height="30.5"/>
                                                <nil key="textColor"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                <textInputTraits key="textInputTraits"/>
                                            </textField>
                                        </subviews>
                                        <constraints>
                                            <constraint firstItem="kn2-FC-VFP" firstAttribute="leading" secondItem="Joh-pH-Jnd" secondAttribute="leading" id="3VZ-an-qei"/>
                                            <constraint firstAttribute="trailing" secondItem="swE-G9-gnC" secondAttribute="trailing" id="WLe-fg-xNA"/>
                                            <constraint firstAttribute="trailing" secondItem="kn2-FC-VFP" secondAttribute="trailing" id="nkU-6E-Lze"/>
                                            <constraint firstAttribute="bottom" secondItem="kn2-FC-VFP" secondAttribute="bottom" id="pV0-RW-IwL"/>
                                            <constraint firstItem="swE-G9-gnC" firstAttribute="leading" secondItem="Joh-pH-Jnd" secondAttribute="leading" id="rgy-dy-9Cu"/>
                                            <constraint firstItem="kn2-FC-VFP" firstAttribute="top" secondItem="swE-G9-gnC" secondAttribute="bottom" constant="8" id="wcW-le-EHd"/>
                                            <constraint firstItem="swE-G9-gnC" firstAttribute="top" secondItem="Joh-pH-Jnd" secondAttribute="top" id="xBd-ta-26w"/>
                                        </constraints>
                                    </view>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="veV-Mu-et4">
                                        <rect key="frame" x="0.0" y="358" width="335" height="59"/>
                                        <subviews>
                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Anliegen:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="I4g-ZA-iAN">
                                                <rect key="frame" x="0.0" y="0.0" width="335" height="20.5"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                                <nil key="textColor"/>
                                                <nil key="highlightedColor"/>
                                            </label>
                                            <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" placeholder="Wofür brauchen Sie uns?" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="UhO-oc-ZcI">
                                                <rect key="frame" x="0.0" y="28.5" width="335" height="30.5"/>
                                                <nil key="textColor"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                <textInputTraits key="textInputTraits"/>
                                            </textField>
                                        </subviews>
                                        <constraints>
                                            <constraint firstAttribute="trailing" secondItem="I4g-ZA-iAN" secondAttribute="trailing" id="CSx-cq-YKB"/>
                                            <constraint firstAttribute="bottom" secondItem="UhO-oc-ZcI" secondAttribute="bottom" id="H5B-U5-afD"/>
                                            <constraint firstAttribute="trailing" secondItem="UhO-oc-ZcI" secondAttribute="trailing" id="J4D-oz-gSp"/>
                                            <constraint firstItem="UhO-oc-ZcI" firstAttribute="top" secondItem="I4g-ZA-iAN" secondAttribute="bottom" constant="8" id="QJV-SW-hxN"/>
                                            <constraint firstItem="UhO-oc-ZcI" firstAttribute="leading" secondItem="veV-Mu-et4" secondAttribute="leading" id="TW5-Lk-gT2"/>
                                            <constraint firstItem="I4g-ZA-iAN" firstAttribute="leading" secondItem="veV-Mu-et4" secondAttribute="leading" id="fKN-rs-kcE"/>
                                            <constraint firstItem="I4g-ZA-iAN" firstAttribute="top" secondItem="veV-Mu-et4" secondAttribute="top" id="sp7-X4-5aY"/>
                                        </constraints>
                                    </view>
                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="ctf-8E-t6W">
                                        <rect key="frame" x="0.0" y="477" width="335" height="50"/>
                                        <color key="backgroundColor" red="0.46202266219999999" green="0.83828371759999998" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="height" constant="50" id="5t4-xU-Fc6"/>
                                        </constraints>
                                        <state key="normal" title="Senden">
                                            <color key="titleColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        </state>
                                        <userDefinedRuntimeAttributes>
                                            <userDefinedRuntimeAttribute type="number" keyPath="layer.cornerRadius">
                                                <integer key="value" value="12"/>
                                            </userDefinedRuntimeAttribute>
                                        </userDefinedRuntimeAttributes>
                                    </button>
                                </subviews>
                            </stackView>
                        </subviews>
                        <color key="backgroundColor" red="0.62352941176470589" green="0.61960784313725492" blue="0.62352941176470589" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstItem="sJk-vH-8Fe" firstAttribute="leading" secondItem="dku-bN-ckm" secondAttribute="leading" constant="20" id="CMC-tA-en4"/>
                            <constraint firstItem="dku-bN-ckm" firstAttribute="trailing" secondItem="sJk-vH-8Fe" secondAttribute="trailing" constant="20" id="NyP-xd-gmz"/>
                            <constraint firstItem="sJk-vH-8Fe" firstAttribute="top" secondItem="dku-bN-ckm" secondAttribute="top" constant="80" id="StM-g1-3te"/>
                            <constraint firstItem="dku-bN-ckm" firstAttribute="bottom" secondItem="sJk-vH-8Fe" secondAttribute="bottom" constant="40" id="YlG-nO-gt4"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="dku-bN-ckm"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="qpy-jO-wVd" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="153" y="52"/>
        </scene>
    </scenes>
</document>

将您的视图放入垂直的 UIStackView 中,并在所有方面约束堆栈视图。视图将在垂直方向上均匀

如果您希望标签靠近字段 - 也就是说,如果您想要隔开的是 label-field 对 - 那么每个 label-field 对都需要在视图中自己的。