为所有 iPhone 设备制作自适应布局答案

【问题标题】：making adaptive layout for all iPhone devices为所有 iPhone 设备制作自适应布局
【发布时间】：2020-11-26 11:24:59
【问题描述】：

我现在正在学习 Swift，我正在尝试为我的个人项目制作 UI。我观看了一些自动布局、堆栈视图和自适应布局教程，但如果设备变小或变大，我将无法显示 UI。下面的第一张图片是当我将顶部约束添加到标签“欢迎”时，达到 20 分。

我可以显示我的所有 UI、标签、进度条、图像视图和按钮，“如果那时检查我的”。我为 UI 添加了 16pt 的垂直间距，因此您可以看到这些 UI 之间的小间隙。但问题是，iPhone SE 的屏幕看起来还可以，但对于 iPhone 11，你会看到底部的巨大空间。

这是第二张图片，使 UI 图像视图（中间较大的粉红色方块）垂直居中并稍微降低 UI。

与第一张图片相同，我在垂直项目之间添加了 16pt 的间距，您会看到它们之间的小间隙。但是对于 iPhone 11，由于我将粉色图像视图垂直居中放置，因此顶部和底部都有较大的差距，UI 看起来很糟糕。

我想做的布局是这样的。

即使屏幕尺寸发生变化（而且我现在只关心 iPhone 屏幕），我仍然可以看到相同的 UI 具有更小或更大的版本。现在我为每个 UI 添加 16pt 的垂直间距，这样可以使 UI 收紧，但不确定如何更改间距取决于屏幕水平尺寸。我希望这是有道理的。我想知道我在制作 UI 时缺少什么，应该学习或提出任何建议。我不确定这是否有帮助，但这是我的限制......

我正在为这个项目使用界面生成器。

【问题讨论】：

标签： ios swift xcode user-interface interface-builder

【解决方案1】：

UI 设计涉及的不仅仅是在设备/屏幕尺寸之间调整间距/大小。

您希望它在设备旋转时看起来如何？还是在 iPad 屏幕上？

有些“UI 设计师”赚了很多钱，因为他们非常非常擅长。

你说“我现在正在学习 Swift” ...好吧，最好的方法是简单地阅读越来越多的教程/文章/博客/文档/等，并不断尝试和学习.

当你在处理它时，想想元素是如何在你的布局上“划分”的......

您似乎希望顶部元素（菜单和注销按钮以及欢迎标签）的大小和间距保持一致。
您可能希望进度标签垂直靠近进度条。
您似乎希望粉红色（我猜是图片）视图为方形 - 1:1 比例。
然后是底部的“按钮”。
你想要一些均匀的间距。

因此，您基本上需要考虑 4 个元素，而不是 8。

这里是故事板的来源，可以帮助你：

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="172-Ys-2E0">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="Stack View standard spacing" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="gg1-88-ZEb">
            <objects>
                <viewController id="172-Ys-2E0" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="W95-f5-z1M">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="G3C-2N-hBY">
                                <rect key="frame" x="20" y="12" width="46" height="36"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="36" id="vVB-Sc-Yi1"/>
                                </constraints>
                                <color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                <state key="normal" image="menuButton">
                                    <preferredSymbolConfiguration key="preferredSymbolConfiguration" configurationType="pointSize" pointSize="28" weight="black"/>
                                </state>
                            </button>
                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="NAA-cu-1GI">
                                <rect key="frame" x="263" y="7" width="92" height="46"/>
                                <fontDescription key="fontDescription" type="system" weight="black" pointSize="28"/>
                                <state key="normal" title="logout">
                                    <color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                </state>
                            </button>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fWQ-7J-f7E">
                                <rect key="frame" x="32" y="123" width="311" height="528"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="equalSpacing" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="nXY-UB-zXF">
                                        <rect key="frame" x="0.0" y="13" width="311" height="502"/>
                                        <subviews>
                                            <view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="OP6-NH-JHF">
                                                <rect key="frame" x="0.0" y="-6" width="311" height="2"/>
                                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="2" id="3UY-3c-rC3"/>
                                                </constraints>
                                            </view>
                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="kXp-zq-J6l">
                                                <rect key="frame" x="0.0" y="0.0" width="311" height="44"/>
                                                <subviews>
                                                    <stackView opaque="NO" contentMode="scaleToFill" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="Wax-WV-I2N">
                                                        <rect key="frame" x="0.0" y="0.0" width="311" height="24"/>
                                                        <subviews>
                                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Today's progress:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Aum-nh-bCH">
                                                                <rect key="frame" x="0.0" y="0.0" width="262" height="24"/>
                                                                <fontDescription key="fontDescription" type="system" pointSize="20"/>
                                                                <nil key="textColor"/>
                                                                <nil key="highlightedColor"/>
                                                            </label>
                                                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="750" verticalHuggingPriority="251" text="4 / 6" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="irl-97-Tfc">
                                                                <rect key="frame" x="270" y="0.0" width="41" height="24"/>
                                                                <fontDescription key="fontDescription" type="system" pointSize="20"/>
                                                                <nil key="textColor"/>
                                                                <nil key="highlightedColor"/>
                                                            </label>
                                                        </subviews>
                                                    </stackView>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="tzW-47-BdA">
                                                        <rect key="frame" x="0.0" y="32" width="311" height="12"/>
                                                        <subviews>
                                                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="c06-2d-LeR">
                                                                <rect key="frame" x="0.0" y="0.0" width="311" height="12"/>
                                                                <color key="backgroundColor" red="0.84866023059999995" green="0.84878283740000005" blue="0.84863340850000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                            </imageView>
                                                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="ycO-Yh-oSC">
                                                                <rect key="frame" x="0.0" y="0.0" width="233.5" height="12"/>
                                                                <color key="backgroundColor" red="0.9215936065" green="0.38732314109999999" blue="0.51481616500000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                            </imageView>
                                                        </subviews>
                                                        <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                                        <constraints>
                                                            <constraint firstItem="ycO-Yh-oSC" firstAttribute="centerY" secondItem="c06-2d-LeR" secondAttribute="centerY" id="7wt-6I-EVf"/>
                                                            <constraint firstAttribute="bottom" secondItem="c06-2d-LeR" secondAttribute="bottom" id="9s3-pc-VkJ"/>
                                                            <constraint firstAttribute="trailing" secondItem="c06-2d-LeR" secondAttribute="trailing" id="EcS-Rm-Ynx"/>
                                                            <constraint firstItem="ycO-Yh-oSC" firstAttribute="width" secondItem="c06-2d-LeR" secondAttribute="width" multiplier="0.75" id="HSf-Y9-Shk"/>
                                                            <constraint firstItem="ycO-Yh-oSC" firstAttribute="leading" secondItem="c06-2d-LeR" secondAttribute="leading" id="TNa-dw-RcH"/>
                                                            <constraint firstItem="c06-2d-LeR" firstAttribute="leading" secondItem="tzW-47-BdA" secondAttribute="leading" id="dHn-DI-OKX"/>
                                                            <constraint firstAttribute="height" constant="12" id="hXb-9X-U4k"/>
                                                            <constraint firstItem="c06-2d-LeR" firstAttribute="top" secondItem="tzW-47-BdA" secondAttribute="top" id="qYp-Y2-WeM"/>
                                                            <constraint firstItem="ycO-Yh-oSC" firstAttribute="height" secondItem="c06-2d-LeR" secondAttribute="height" id="vco-oo-SHu"/>
                                                        </constraints>
                                                    </view>
                                                </subviews>
                                            </stackView>
                                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Ga2-sg-ARc">
                                                <rect key="frame" x="0.0" y="71.5" width="311" height="311"/>
                                                <color key="backgroundColor" red="0.94554942850000001" green="0.78171783689999996" blue="0.78158324960000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="width" secondItem="Ga2-sg-ARc" secondAttribute="height" multiplier="1:1" id="tT1-Hj-Sc1"/>
                                                </constraints>
                                            </imageView>
                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="K4b-he-ckY">
                                                <rect key="frame" x="0.0" y="410" width="311" height="62.5"/>
                                                <subviews>
                                                    <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kat-Ko-rc5">
                                                        <rect key="frame" x="62" y="0.0" width="187" height="62.5"/>
                                                        <color key="backgroundColor" red="0.7673358321" green="0.767447412" blue="0.76731151340000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="width" secondItem="kat-Ko-rc5" secondAttribute="height" multiplier="180:60" id="TrG-te-fP9"/>
                                                        </constraints>
                                                        <fontDescription key="fontDescription" type="boldSystem" pointSize="30"/>
                                                        <state key="normal" title="button">
                                                            <color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                        </state>
                                                    </button>
                                                </subviews>
                                                <constraints>
                                                    <constraint firstItem="kat-Ko-rc5" firstAttribute="width" secondItem="K4b-he-ckY" secondAttribute="width" multiplier="0.6" id="J8V-xL-g2t"/>
                                                </constraints>
                                            </stackView>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="icI-mg-H6h">
                                                <rect key="frame" x="0.0" y="500" width="311" height="2"/>
                                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="2" id="PNC-Wv-Qma"/>
                                                </constraints>
                                            </view>
                                        </subviews>
                                    </stackView>
                                </subviews>
                                <color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                <constraints>
                                    <constraint firstItem="nXY-UB-zXF" firstAttribute="height" secondItem="fWQ-7J-f7E" secondAttribute="height" multiplier="0.95" id="3Gx-N3-PZn"/>
                                    <constraint firstItem="nXY-UB-zXF" firstAttribute="centerY" secondItem="fWQ-7J-f7E" secondAttribute="centerY" id="9VX-uV-FqY"/>
                                    <constraint firstItem="nXY-UB-zXF" firstAttribute="leading" secondItem="fWQ-7J-f7E" secondAttribute="leading" id="BlQ-S7-cAD"/>
                                    <constraint firstAttribute="trailing" secondItem="nXY-UB-zXF" secondAttribute="trailing" id="yDc-bo-7JZ"/>
                                </constraints>
                            </view>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Welcome!!" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="OKM-oK-ll3">
                                <rect key="frame" x="32" y="64" width="179" height="43"/>
                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                        </subviews>
                        <color key="backgroundColor" red="0.99993449450000005" green="0.91130131479999998" blue="0.77088779210000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstItem="OKM-oK-ll3" firstAttribute="leading" secondItem="ORM-kG-UNT" secondAttribute="leading" constant="32" id="JQu-N0-9NK"/>
                            <constraint firstItem="ORM-kG-UNT" firstAttribute="trailing" secondItem="fWQ-7J-f7E" secondAttribute="trailing" constant="32" id="PRk-Hu-crq"/>
                            <constraint firstItem="G3C-2N-hBY" firstAttribute="leading" secondItem="ORM-kG-UNT" secondAttribute="leading" constant="20" id="R7V-zj-Ieg"/>
                            <constraint firstItem="fWQ-7J-f7E" firstAttribute="top" secondItem="OKM-oK-ll3" secondAttribute="bottom" constant="16" id="UTC-W0-Ja0"/>
                            <constraint firstItem="ORM-kG-UNT" firstAttribute="trailing" secondItem="NAA-cu-1GI" secondAttribute="trailing" constant="20" id="VAk-b0-olQ"/>
                            <constraint firstItem="G3C-2N-hBY" firstAttribute="top" secondItem="ORM-kG-UNT" secondAttribute="top" constant="12" id="ZgO-nA-Y6f"/>
                            <constraint firstItem="fWQ-7J-f7E" firstAttribute="leading" secondItem="ORM-kG-UNT" secondAttribute="leading" constant="32" id="a8r-Yh-0YR"/>
                            <constraint firstItem="NAA-cu-1GI" firstAttribute="centerY" secondItem="G3C-2N-hBY" secondAttribute="centerY" id="e4E-py-4P7"/>
                            <constraint firstItem="OKM-oK-ll3" firstAttribute="top" secondItem="G3C-2N-hBY" secondAttribute="bottom" constant="16" id="i4b-Wy-DZC"/>
                            <constraint firstItem="ORM-kG-UNT" firstAttribute="bottom" secondItem="fWQ-7J-f7E" secondAttribute="bottom" constant="16" id="jZt-27-Nuv"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="ORM-kG-UNT"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="smv-6h-Rg0" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="34.782608695652179" y="276.5625"/>
        </scene>
    </scenes>
    <resources>
        <image name="menuButton" width="46" height="40"/>
    </resources>
</document>

使用它，我在 SE (1)、8、XS Max 和 11 上得到了这个：

【讨论】：