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 对都需要在视图中自己的。
我试图让我的应用在不同的屏幕尺寸上看起来一样,但似乎 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 对都需要在视图中自己的。