Swift 使我的项目适合所有尺寸的iPhone_Swift_Autolayout_Constraints

Swift 使我的项目适合所有尺寸的iPhone

swift

Swift 使我的项目适合所有尺寸的iPhone,swift,autolayout,constraints,Swift,Autolayout,Constraints,我创建了一个带有故事板的项目，在设计时使用了“作为iPhone11 PRO查看”。现在，当我在iPhone11Max上运行模拟器时，我在右侧看到一个休白色的条。当然，因为MAX的屏幕更大。现在我尝试设置约束，我通过使用教程等尝试了很多不同的选项（真的很多）。但我似乎无法让它在我的项目中发挥作用目前的问题是，我设置了所有UIImage高度和宽度，并使用“添加缺少的约束”添加了缺少的约束。唯一的问题是，它什么都不做。我只是希望所有的图片都会大一点，所以我的布局和11 PRO上的一样左边是iPho

我创建了一个带有故事板的项目，在设计时使用了“作为iPhone11 PRO查看”。现在，当我在iPhone11Max上运行模拟器时，我在右侧看到一个休白色的条。当然，因为MAX的屏幕更大。现在我尝试设置约束，我通过使用教程等尝试了很多不同的选项（真的很多）。但我似乎无法让它在我的项目中发挥作用

目前的问题是，我设置了所有UIImage高度和宽度，并使用“添加缺少的约束”添加了缺少的约束。唯一的问题是，它什么都不做。我只是希望所有的图片都会大一点，所以我的布局和11 PRO上的一样

左边是iPhone11Pro，右边是iPhone11Max

所以，我想约束条件是好的，但我的图像在运行11最大值时不会变大。对此，什么是最佳实践？（我的所有图像都是@x1@x2@x1）

每个

UIImage

都不会随着屏幕大小的不同而动态改变大小，因为您将宽度和高度约束设置为常量

我建议删除每个

UIImage

上的约束，而是将它们添加到

UIStackView

中。添加约束以将UIStack视图的边缘固定到视图的

安全区域布局指南

。UIStackView将根据UIImage的

对齐

和

分布

属性来调整UIImage的大小

UIStackView文档：

“这是我尝试的第5天…”-你应该花这5天的时间阅读文档并完成有关自动布局的教程。正如您很快发现的，它不仅仅是在一个单一大小的屏幕上定位元素，并期望它在任何地方看起来都一样

你在想，你需要为更大的屏幕制作更大的“瓷砖”，但是当用户在更小的屏幕上运行你的应用时会发生什么

如果您还没有学习过

UIStackView

，这可能很难理解，但这可能是您想要走的路

布局的“顶层”有两个高度相等的部分。所以

我们从垂直堆栈视图开始，使用分布：均匀填充

上半部分有两个等宽的部分，因此我们嵌入了一个水平堆栈视图，也使用了*等宽填充

该部分的右半部分还有另外两个高度相等的元素，因此我们嵌入了一个垂直堆栈视图，也使用了*相等填充

下半部分有两个等高元素，因此我们嵌入了一个垂直堆栈视图，*等高填充

该部分的下半部分有两个等宽部分，因此我们嵌入了一个水平堆栈视图，*等宽填充

所有堆栈视图都具有间距：8
现在，为了适应各种屏幕尺寸-同时保持纵横比-，我们将查看整体尺寸：宽度为360，高度为728（我们需要计算8磅间距）。所以

我们将为最外层的堆栈视图提供一个纵横比
360:728

我们希望使所有内容都居中，因此请提供堆栈视图CenterX和CenterY约束

iPhone 11 Pro的宽度为375分，因此为了获得准确的尺寸，我们需要
7.5

纵横比约束将处理高度

我们需要做一些调整，并添加一些约束，以处理其他屏幕尺寸
该布局将“放大”以适合11和11 Pro Max精细版。然而，在iPhone8、7或SE上，它会太高而无法适应屏幕。为了解决这个问题，我们可以

将前导和尾随约束更改为
=7.5
（允许堆栈视图在侧面留出更多空间）

添加等于零的前导约束和尾随约束，优先级为750（默认高）。这会告诉auto layout尝试将边拉到边上

添加
>=0
的顶部和底部约束，以防止其在屏幕上方/下方延伸

添加等于零的顶部和底部约束，优先级为750（默认高）。这告诉自动布局尝试将顶部和底部拉到边缘

下面是它在情节提要中的外观：

请注意，图像视图具有无约束，并且所有堆栈视图都设置为分布：使用间距均匀填充：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>  <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>