swift - 使我的项目适合所有 iPhone 尺寸
问题描述
我创建了一个带有故事板的项目，在设计时我使用了“作为 iPhone11 PRO 的视图”。现在，当我在 iPhone 11 MAX 上运行模拟器时，右侧会出现一个巨大的白色条。因为 MAX 有更大的屏幕。现在我尝试设置约束，我通过使用教程等尝试了很多不同的选项（真的很多）。但我似乎无法让它在我的项目中发挥作用。
目前的问题是，我设置了所有 UIImage 的高度和宽度，并使用“添加缺失的约束”添加了缺失的约束。唯一的问题是，它什么也没做。我只是希望所有图像都会大一点，所以我的布局与 11 PRO 相同。
左边是 iPhone 11 Pro - 右边是 iPhone 11 MAX
所以，我想约束很好，但我的图像在 11 MAX 上运行时并没有变大。对此的最佳做法是什么？（我所有的图片都是@x1 @x2 @x1）
解决方案
“这是我正在尝试的第 5 天……” - 你应该用这 5 天时间阅读文档并完成有关自动布局的教程。正如您很快发现的那样，它不仅仅是在单一尺寸的屏幕上定位元素并期望它在任何地方看起来都一样。
您认为您需要为更大的屏幕使“图块”更大，但是当用户在较小的屏幕上运行您的应用程序时会发生什么？
如果您还没有了解UIStackView，这可能很难理解，但这可能是您想要的方式。
布局的“顶层”有两个等高部分。所以...
我们从一个带有Distribution: Fill Equally的垂直堆栈视图开始。
上半部分有两个相等宽度的部分，所以我们嵌入了一个水平堆栈视图，也带有 * Fill Equally
该部分的右半部分还有另外两个等高元素，因此我们嵌入了一个垂直堆栈视图，也使用 * Fill Equally
下半部分有两个两个等高的元素，所以我们嵌入一个 Vertical stack view，* Fill Equally
该部分的下半部分有两个等宽的部分，所以我们嵌入了一个水平堆栈视图，* Fill Equally
所有堆栈视图都有间距：8
现在，为了让它适应各种屏幕尺寸——同时保持纵横比——我们将查看整体尺寸：宽度为 360，高度为 728（我们需要计算 8 点间距）。所以...
- 我们将给最外层的堆栈视图一个纵横比
360:728 - 我们想让所有东西都居中，所以给堆栈视图 CenterX 和 CenterY 约束。
- iPhone 11 Pro 的宽度为 375-pts，因此要获得您的确切尺寸，我们需要前导和尾随约束（始终到安全区域）
7.5 - 纵横比约束将处理高度
我们需要进行一些调整，并添加更多约束，以处理其他屏幕尺寸......
该布局将“放大”以适应 11 和 11 Pro Max。但是，在 iPhone 8 或 7 或 SE 上，它太高而无法适应屏幕。为了解决这个问题，我们可以...
- 将前导和尾随约束更改为
>= 7.5（允许堆栈视图在两侧留出更多空间） - 使用（默认高）添加等于零的前导和尾随约束。
Priority: 750这告诉自动布局尝试将侧面拉到边缘 - 添加顶部和底部约束
>= 0以防止它在屏幕上方/下方延伸 - 使用（默认高）添加等于零的顶部和底部约束。
Priority: 750这告诉自动布局尝试将顶部和底部拉到边缘
这是它在 Storyboard 中的外观：
请注意，图像视图没有约束，并且所有堆栈视图都设置为Distribution: Fill Equally with Spacing: 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>
推荐阅读
- json - 使用 Axios 在 JSON-SERVER 上将数据作为新资源发布？
- javascript - 如果输入集中，如何检查单选按钮
- php - Sublime 语法高亮不适用于输入错误的 PHP 内置函数
- c# - Yammer Rest API - 从组中获取消息无法正常工作
- solr - solr中是否有父子数据结构的替代方案？
- vue.js - 为什么缩小时标签消失了
- python - 无法在 Python 中添加逗号并删除大数字的悬挂零
- reactjs - 找不到变量：initialState。我正在尝试为 REACT NATIVE 中的每个数组项映射一个数组并显示组件
- django - 如何编写用于比较 django 访问值“{{cust_package}}”和 vue.js“<%radio_price%>”的 v-if 条件
- macos - 在 Mac OS 上更改默认 Apache 版本