Search code examples
iosxcodeautolayout

Xcode Auto Layout keeps changing my Layout

I'm trying to let my app look the same on different Screen Sizes, but it seems like Xcode just ignore my Constrains on another screen Size This is what it looks like on an iPhone 7 Sceen

Which is what I want it to look like, but on (for eg) iPhone XR this happens: the text field get streched

How do I can fix this problem?

Solution

  • You have your elements constrained top-to-bottom. That means something has to stretch when you're on a taller screen.

    You probably want the field heights to stay the same, and leave extra space between the last field and the button.

    So, constrain your fields top-down, but don't give the last field a bottom constraint.

    Then constrain your button to the bottom of the view, so it stays put.

    Of course, when your app is run on a smaller device, there won't be enough vertical space for everything... You'll either need to design it to reduce the vertical spacing between fields and labels, or you'll need to put it all in a scroll view.

    Edit: As also suggested by Matt

    Here is an example using a UIStackView. Each label / field pair is contained in a UIView, so they stay close to each other.

    Then, each view is added to a UIStackView, along with the button. The stack view is constrained to all 4 sides of the view (with some padding), and set to:

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

    Result for iPhone 8, SE and XS:

    enter image description here

    and here is the source for the 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">
    <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="[email protected]" 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>