如何解决使我的项目适合所有iPhone尺寸
我创建了一个带有StoryBoard的项目，并在设计时使用了“将视图作为iphone11 PRO”。现在，当我在iPhone 11 MAX上运行模拟器时，右侧会出现一个巨大的白色条。这是因为MAX的屏幕更大。现在，我尝试设置约束，并通过使用教程等尝试了很多其他选项（确实很多）。但是我似乎无法在我的项目中使用它。
目前的问题是，我设置了所有UIImage的高度和宽度，并通过使用“添加缺少的约束”添加了缺少的约束。唯一的是，它什么也没做。我只是希望所有图像都会更大一些，所以我的布局与11 PRO相同。
左侧为iPHONE 11 PRO-右侧为iPHONE 11 MAX
因此，我认为约束条件很好，但是在11 MAX上运行时，图像不会变大。最佳做法是什么？ （我所有的图像都是@ x1 @ x2 @ x1）
解决方法
“这是我正在尝试的第五天...” -您应该花那5天的时间阅读文档并完成有关自动布局的教程。正如您很快发现的那样，除了将元素放置在单个大小的屏幕上并期望它在任何地方看起来都一样之外，它还有很多其他功能。
您认为您需要将“ tiles”变大以适合更大的屏幕，但是当用户在 更小上运行您的应用时会发生什么屏幕？
如果您还没有了解UIStackView，可能很难遵循，但这可能就是您想要的方式。
布局的“顶层”有两个等高部分。所以...
我们从具有分布：均等填充的垂直堆栈视图开始。
-
上半部分有两个等宽的部分，因此我们嵌入了一个水平堆栈视图，并带有* 等量填充
-
该部分的右半部分还有另外两个等高元素，因此我们嵌入了一个垂直堆栈视图，并带有* 等量填充
-
下半部分有两个两个等高的元素，因此我们嵌入了一个垂直堆栈视图* 均等填充
-
该区域的下半部分具有两个等宽的区域，因此我们嵌入了一个水平堆栈视图* 等量填充
所有堆栈视图均具有 间距：8
现在，要使其适合各种屏幕尺寸- 同时保持宽高比 -我们将查看整体尺寸：宽度为360，高度为是728（我们需要计算8点间距）。所以...
- 我们将为最外面的堆栈视图提供
360:728的长宽比 - 我们希望使所有内容居中，因此为堆栈视图提供CenterX和CenterY约束。
- iPhone 11 Pro的宽度为375点，因此，要获得确切的尺寸，我们需要
7.5的前导约束和尾随约束（始终到安全区域） - 宽高比约束将处理高度
我们需要进行一些调整，并添加更多限制，以处理其他屏幕尺寸...
该布局将“放大”以适合11和11 Pro Max的尺寸。但是，在iPhone 8或7或SE上，它将太高而无法容纳屏幕。为了解决这个问题，我们可以...
- 将前导约束和尾随约束更改为
>= 7.5（允许堆栈视图在侧面留出更多的空间） - 使用
Priority: 750（默认为高）添加等于零的前导约束和尾随约束。这告诉自动布局 try 将侧面拉到边缘 - 添加
>= 0的顶部和底部约束，以防止其在屏幕上方/下方延伸 - 使用
Priority: 750（默认为高）添加等于零的顶部和底部约束。这告诉自动布局 try 将顶部和底部拉到边缘
这是情节提要中的外观：
请注意，图像视图具有 无约束 ，并且所有堆栈视图均设置为 Distribution：Equally Filling （使用间距）： 8
以下是在各种设备上的外观（非常大的图片-单击以查看详细信息）：
因为我们无法绘制“部分像素”，并且某些设备每点2像素，而其他设备每点3像素（我们不必再担心@ 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>
每个UIImage都不会在不同的屏幕尺寸下动态更改尺寸，因为您将宽度和高度约束设置为常量。
我建议删除每个UIImage上的约束，而应将它们添加到UIStackView中。添加约束以将UIStackView的边缘固定到视图的safeAreaLayoutGuide。 UIStackView将根据其alignment和distribution属性处理UIImage的大小。
UIStackView上的文档：https://developer.apple.com/documentation/uikit/uistackview
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
