使我的项目适合所有 iPhone 大小

Making my project suitable for all iPhone sizes

我创建了一个带有故事板的项目,在设计时我使用了 'view as iPhone11 PRO'。现在,当我 运行 模拟器在 iPhone 11 MAX 时,我在右侧看到一个白色的条。当然是因为 MAX 有更大的屏幕。现在我尝试设置约束,我通过使用教程等尝试了很多不同的选项(真的很多)。但我似乎无法在我的项目中使用它。

目前的问题,我设置了所有 UIImage 的高度和宽度,并使用 'add missing constrains' 添加了缺少的约束。唯一的问题是,它什么都不做。我只是希望所有图像都会更大一点,所以我的布局与 11 PRO 上的布局相同。

左边是 iPHONE 11 PRO - 右边是 iPHONE 11 MAX

所以,我想约束很好,但是当 运行在 11 MAX 上使用时,我的图像并没有变大。最好的做法是什么? (我所有的图都是@x1 @x2 @x1)

每个 UIImage 不会随着屏幕尺寸的不同而动态改变尺寸,因为您将宽度和高度限制设置为常量。

我建议删除每个 UIImage 的约束,而是将它们添加到 UIStackView。添加约束以将 UIStackView 的边缘固定到视图的 safeAreaLayoutGuide。 UIStackView 将根据它的 alignmentdistribution 属性处理调整 UIImage 的大小。

关于 UIStackView 的文档:https://developer.apple.com/documentation/uikit/uistackview

“这是我正在尝试的第 5 天...” - 您应该用这 5 天的时间阅读 auto-layout 上的文档和教程。正如您很快就会发现的那样,它不仅仅是在单一尺寸的屏幕上定位元素并期望它在任何地方看起来都一样。

您认为您需要使“图块”更大以适应更大的屏幕,但是当用户在[上运行您的应用程序时会发生什么? =70=]更小屏幕?

如果您还没有了解 UIStackView,这可能很难理解,但这可能是您想要的方式。

布局的“顶层”有两个 equal-height 部分。所以...

我们从垂直堆栈视图开始,分布:均匀填充

  • 上半部分有两个等宽的部分,所以我们嵌入了一个水平堆栈视图,同样使用 *Fill Equally

  • 那个部分的 right-half 有另外两个 equal-height 元素,所以我们嵌入了一个垂直堆栈视图,也用 *Fill Equally

  • 下半部分有两个两个 equal-height 元素,所以我们嵌入了一个 Vertical stack view,*Fill Equally

  • 那个部分的下半部分有两个等宽的部分,所以我们嵌入了一个水平堆栈视图,*Fill Equally

所有堆栈视图都有间距:8

现在,要让它适应各种屏幕尺寸 - 同时保持宽高比 - 我们将查看整体size:Width为360,Height为728(需要计算8pt的间距)。所以...

  • 我们将为 outer-most 堆栈视图提供 360:728
  • 的纵横比
  • 我们想让一切都居中,所以给堆栈视图 CenterX 和 CenterY 约束。
  • iPhone 11 Pro 的宽度为 375 磅,因此要获得准确的尺寸,我们需要 7.5[的前导和尾随约束(始终为 safe-area)
  • 宽高比约束将处理高度

我们需要进行一些调整,并添加更多约束,以处理其他屏幕尺寸...

该布局将“放大”以适合 11 和 11 Pro Max。但是,在 iPhone 8 或 7 或 SE 上,它会太高而无法适应屏幕。为了解决这个问题,我们可以...

  • 将 Leading 和 Trailing 约束更改为 >= 7.5(允许堆栈视图在两侧多留一点 space)
  • 添加 等于零 Priority: 750(默认高)的前导和尾随约束。这告诉 auto-layout 到 尝试 将边拉到边缘
  • 添加 >= 0 的顶部和底部约束以防止其扩展 above/below 屏幕
  • 添加 等于零 Priority: 750(默认高)的顶部和底部约束。这告诉 auto-layout 到 尝试 将顶部和底部拉到边缘

这是它在 Storyboard 中的样子:

请注意图像视图没有约束,并且所有堆栈视图都设置为分布:均匀填充 间距:8

这是它在各种设备上的样子(非常大的图片 - 点击查看详细信息):

因为我们不能在“部分像素”上绘制并且一些设备有 2 pixels-per-point 而其他设备有 3 pixels-per-point(我们不再需要担心 @1x 屏幕)实际尺寸不会 精确 - 但它们足够接近,您必须放大并比较才能看到差异。

这是具有该布局的故事板的源代码,您可以查看它:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="bdh-XY-7ei">
    <device id="retina5_9" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--Schurk Images View Controller-->
        <scene sceneID="Zle-Gp-apY">
            <objects>
                <viewController id="bdh-XY-7ei" customClass="SchurkImagesViewController" customModule="DelMe" customModuleProvider="target" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="Dyb-Gm-pEf">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="812"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="Tyg-ff-xjO">
                                <rect key="frame" x="7.6666666666666572" y="47" width="360" height="728"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="JqK-ZW-H50">
                                        <rect key="frame" x="0.0" y="0.0" width="360" height="360"/>
                                        <subviews>
                                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="AtH-1N-5xc">
                                                <rect key="frame" x="0.0" y="0.0" width="176" height="360"/>
                                                <color key="backgroundColor" red="0.55634254220000001" green="0.97934550050000002" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                            </imageView>
                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="qMO-ld-jJw">
                                                <rect key="frame" x="184" y="0.0" width="176" height="360"/>
                                                <subviews>
                                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Yhc-Ph-1ck">
                                                        <rect key="frame" x="0.0" y="0.0" width="176" height="176"/>
                                                        <color key="backgroundColor" red="0.55634254220000001" green="0.97934550050000002" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                    </imageView>
                                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="nhS-Od-9jO">
                                                        <rect key="frame" x="0.0" y="184" width="176" height="176"/>
                                                        <color key="backgroundColor" red="0.55634254220000001" green="0.97934550050000002" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                    </imageView>
                                                </subviews>
                                            </stackView>
                                        </subviews>
                                    </stackView>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="WrS-eH-b3H">
                                        <rect key="frame" x="0.0" y="368" width="360" height="360"/>
                                        <subviews>
                                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="won-nT-d54">
                                                <rect key="frame" x="0.0" y="0.0" width="360" height="176"/>
                                                <color key="backgroundColor" red="0.55634254220000001" green="0.97934550050000002" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                            </imageView>
                                            <stackView opaque="NO" contentMode="scaleToFill" distribution="fillEqually" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="iS7-mQ-dnf">
                                                <rect key="frame" x="0.0" y="184" width="360" height="176"/>
                                                <subviews>
                                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="xcJ-dz-KeY">
                                                        <rect key="frame" x="0.0" y="0.0" width="176" height="176"/>
                                                        <color key="backgroundColor" red="0.55634254220000001" green="0.97934550050000002" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                    </imageView>
                                                    <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="0FQ-rZ-x81">
                                                        <rect key="frame" x="184" y="0.0" width="176" height="176"/>
                                                        <color key="backgroundColor" red="0.55634254220000001" green="0.97934550050000002" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                    </imageView>
                                                </subviews>
                                            </stackView>
                                        </subviews>
                                    </stackView>
                                </subviews>
                                <constraints>
                                    <constraint firstAttribute="width" secondItem="Tyg-ff-xjO" secondAttribute="height" multiplier="360:728" id="SdN-id-c4g"/>
                                </constraints>
                            </stackView>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="Q0H-gV-XLg"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="Tyg-ff-xjO" firstAttribute="top" secondItem="Q0H-gV-XLg" secondAttribute="top" priority="750" id="2Ih-jC-mAG"/>
                            <constraint firstItem="Tyg-ff-xjO" firstAttribute="centerY" secondItem="Q0H-gV-XLg" secondAttribute="centerY" id="EnC-xv-6e3"/>
                            <constraint firstItem="Tyg-ff-xjO" firstAttribute="top" relation="greaterThanOrEqual" secondItem="Q0H-gV-XLg" secondAttribute="top" id="KBQ-9p-3NJ"/>
                            <constraint firstItem="Q0H-gV-XLg" firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="Tyg-ff-xjO" secondAttribute="trailing" constant="7.5" id="KP5-ws-DRX"/>
                            <constraint firstItem="Tyg-ff-xjO" firstAttribute="leading" secondItem="Q0H-gV-XLg" secondAttribute="leading" priority="750" id="LSW-Dg-4V8"/>
                            <constraint firstItem="Q0H-gV-XLg" firstAttribute="bottom" secondItem="Tyg-ff-xjO" secondAttribute="bottom" priority="750" id="N6T-iS-PU1"/>
                            <constraint firstItem="Q0H-gV-XLg" firstAttribute="trailing" secondItem="Tyg-ff-xjO" secondAttribute="trailing" priority="750" id="V1E-M5-o7w"/>
                            <constraint firstItem="Q0H-gV-XLg" firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="Tyg-ff-xjO" secondAttribute="bottom" id="gVs-hN-gNr"/>
                            <constraint firstItem="Tyg-ff-xjO" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="Q0H-gV-XLg" secondAttribute="leading" constant="7.5" id="gih-7i-tg8"/>
                            <constraint firstItem="Tyg-ff-xjO" firstAttribute="centerX" secondItem="Q0H-gV-XLg" secondAttribute="centerX" id="knQ-zw-EAq"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="ddD-Pk-Baz" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-407" y="1534"/>
        </scene>
    </scenes>
    <resources>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
    </resources>
</document>