xcode - 如何为多种 iPhone 尺寸对齐文本和图像
问题描述
我正在努力让 xcode 约束正常工作，我在下面有 6 个图像和文本，在较大的 iphone 尺寸下看起来很糟糕。它在 iphone SE/8 中看起来不错，但对于 iphone 11，左右图像更贴合两侧。
以下是它们在 iphone SE 和 11 中的屏幕截图： iphone SE 和 11 屏幕截图
以下是图像的约束： 图像约束
这里是文本约束： 文本约束
非常感谢任何反馈，我不确定我在这里做错了什么
解决方案
这UIStackView使得这个布局很容易完成......
- 在垂直堆栈视图中放置一个按钮和一个标签......这就是一个“列”
- 对齐方式：填充/分布：填充/间距：8
- 将其中的 3 个放入水平堆栈视图中......这使得“第 1 行”具有 3 个“列”
- 对齐方式：填充/分布：等间距/间距：0
- 再做一次，对于“第 2 行”
- 将 2 个“行”堆栈视图放在“外部”垂直堆栈视图中
- 对齐方式：填充/分布：均匀填充/间距：16
对于约束，我们将从“外部”堆栈视图开始
- 从“横幅”视图底部限制前 16 分
- 将宽度限制为视图的 90%（宽度等于视图宽度，乘数：0.9）
- 约束 CenterX 以查看 CenterX
- 以 1:1 的比例约束“btn1”（保持“方形”），宽度等于 row1 宽度，乘数：0.3 (30%)
- 将“btn2”的宽度和高度限制为“btn1”
- 将“btn3”的宽度和高度限制为“btn1”
- 以 1:1 的比例约束“btn4”（保持“方形”），宽度等于 row2 宽度，乘数：0.3 (30%)
- 将“btn5”的宽度和高度限制为“btn4”
- 将“btn6”的宽度和高度限制为“btn4”
这是它在 Storyboard 中的外观（大图，点击查看更清晰）：
这是该故事板的源代码，因此您可以检查它（我添加了名为“b1”/“b2”/等的图像）：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="LKM-8A-nb2">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
<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>
<!--Grid View Controller-->
<scene sceneID="79o-Ox-TwA">
<objects>
<viewController id="LKM-8A-nb2" customClass="GridViewController" customModule="PanZoom" customModuleProvider="target" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="IYJ-Hg-6cW">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="P8z-Sm-Q6t" userLabel="BannerView">
<rect key="frame" x="0.0" y="0.0" width="375" height="136"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="person.fill" catalog="system" translatesAutoresizingMaskIntoConstraints="NO" id="4jH-vt-7l5" userLabel="BannerImageView">
<rect key="frame" x="8" y="9.5" width="120" height="117"/>
<constraints>
<constraint firstAttribute="width" secondItem="4jH-vt-7l5" secondAttribute="height" multiplier="1:1" id="81h-yQ-hei"/>
<constraint firstAttribute="width" constant="120" id="uwP-ci-9yv"/>
</constraints>
</imageView>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Name" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="u6h-2Y-fxg">
<rect key="frame" x="136" y="16" width="231" height="20.5"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Some Text" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="awQ-9d-ac7">
<rect key="frame" x="136" y="44.5" width="80" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" systemColor="systemBlueColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Some More Text" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="kfJ-4l-Yax">
<rect key="frame" x="136" y="73" width="123.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<color key="textColor" systemColor="systemBlueColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.7673358321" green="0.76744776960000005" blue="0.78157937529999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="4jH-vt-7l5" firstAttribute="top" secondItem="P8z-Sm-Q6t" secondAttribute="top" constant="8" id="54V-Ke-kwa"/>
<constraint firstItem="u6h-2Y-fxg" firstAttribute="leading" secondItem="4jH-vt-7l5" secondAttribute="trailing" constant="8" id="C0B-BT-gMX"/>
<constraint firstItem="kfJ-4l-Yax" firstAttribute="top" secondItem="awQ-9d-ac7" secondAttribute="bottom" constant="8" id="Gge-WX-XeV"/>
<constraint firstItem="4jH-vt-7l5" firstAttribute="leading" secondItem="P8z-Sm-Q6t" secondAttribute="leading" constant="8" id="VzJ-jF-PeU"/>
<constraint firstAttribute="trailing" secondItem="u6h-2Y-fxg" secondAttribute="trailing" constant="8" id="fgo-dg-lvH"/>
<constraint firstAttribute="bottom" secondItem="4jH-vt-7l5" secondAttribute="bottom" constant="8" id="jOP-Za-STU"/>
<constraint firstItem="awQ-9d-ac7" firstAttribute="leading" secondItem="u6h-2Y-fxg" secondAttribute="leading" id="p8C-R8-P3n"/>
<constraint firstItem="u6h-2Y-fxg" firstAttribute="top" secondItem="P8z-Sm-Q6t" secondAttribute="top" constant="16" id="tpW-8x-5cn"/>
<constraint firstItem="awQ-9d-ac7" firstAttribute="top" secondItem="u6h-2Y-fxg" secondAttribute="bottom" constant="8" id="wI1-Kb-F4D"/>
<constraint firstItem="kfJ-4l-Yax" firstAttribute="leading" secondItem="awQ-9d-ac7" secondAttribute="leading" id="yVa-mI-4gE"/>
</constraints>
</view>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" spacing="16" translatesAutoresizingMaskIntoConstraints="NO" id="kvJ-kl-KIN" userLabel="Outer Stack View">
<rect key="frame" x="19" y="152" width="337.5" height="275.5"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="sQJ-MU-CSp" userLabel="Row1 Stack View">
<rect key="frame" x="0.0" y="0.0" width="337.5" height="130"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="OTb-dV-ttj" userLabel="R1C1 Stack View">
<rect key="frame" x="0.0" y="0.0" width="101" height="130"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="yyV-A5-4ke" userLabel="btn1" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101.5"/>
<constraints>
<constraint firstAttribute="width" secondItem="yyV-A5-4ke" secondAttribute="height" multiplier="1:1" id="P3x-SZ-1Mc"/>
</constraints>
<state key="normal" backgroundImage="b1"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 1" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="1jL-GW-qqq">
<rect key="frame" x="0.0" y="109.5" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="8Q6-9W-gXz" userLabel="R1C2 Stack View">
<rect key="frame" x="118" y="0.0" width="101" height="130"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="V37-nh-l7V" userLabel="bn2" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101.5"/>
<state key="normal" backgroundImage="b2"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 2" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Kmm-DY-Y3T">
<rect key="frame" x="0.0" y="109.5" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="rkC-n3-1XR" userLabel="R1C3 Stack View">
<rect key="frame" x="236" y="0.0" width="101.5" height="130"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kEA-jG-33S" userLabel="btn3" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101.5" height="101.5"/>
<state key="normal" backgroundImage="b3"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 3" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="xNJ-8c-vjq">
<rect key="frame" x="0.0" y="109.5" width="101.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
</subviews>
<constraints>
<constraint firstItem="kEA-jG-33S" firstAttribute="height" secondItem="yyV-A5-4ke" secondAttribute="height" id="2Si-on-gKK"/>
<constraint firstItem="kEA-jG-33S" firstAttribute="width" secondItem="yyV-A5-4ke" secondAttribute="width" id="50T-Oa-2nZ"/>
<constraint firstItem="V37-nh-l7V" firstAttribute="width" secondItem="yyV-A5-4ke" secondAttribute="width" id="MTd-OL-UU7"/>
<constraint firstItem="yyV-A5-4ke" firstAttribute="width" secondItem="sQJ-MU-CSp" secondAttribute="width" multiplier="0.3" id="XMH-jn-adE"/>
<constraint firstItem="V37-nh-l7V" firstAttribute="height" secondItem="yyV-A5-4ke" secondAttribute="height" id="twm-hP-ffF"/>
</constraints>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" distribution="equalSpacing" translatesAutoresizingMaskIntoConstraints="NO" id="gpl-wE-cdj" userLabel="Row2 Stack View">
<rect key="frame" x="0.0" y="146" width="337.5" height="129.5"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="xBX-2X-LgE" userLabel="R2C1 Stack View">
<rect key="frame" x="0.0" y="0.0" width="101" height="129.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="cXk-UC-q0U" userLabel="btn4" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101"/>
<constraints>
<constraint firstAttribute="width" secondItem="cXk-UC-q0U" secondAttribute="height" multiplier="1:1" id="eod-eh-BtF"/>
</constraints>
<state key="normal" backgroundImage="b4"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 4" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="dVu-b1-jO2">
<rect key="frame" x="0.0" y="109" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="Dmz-Yl-dol" userLabel="R2C2 Stack View">
<rect key="frame" x="118" y="0.0" width="101" height="129.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="M6I-u0-WFF" userLabel="btn5" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101" height="101"/>
<state key="normal" backgroundImage="b5"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 5" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="O8J-rz-IMQ">
<rect key="frame" x="0.0" y="109" width="101" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="k3d-gs-eoH" userLabel="R2C3 Stack View">
<rect key="frame" x="236" y="0.0" width="101.5" height="129.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kTF-VQ-Jbo" userLabel="btn6" customClass="MyButton" customModule="PanZoom" customModuleProvider="target">
<rect key="frame" x="0.0" y="0.0" width="101.5" height="101"/>
<state key="normal" backgroundImage="b6"/>
</button>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Text 6" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="9T2-30-xGr">
<rect key="frame" x="0.0" y="109" width="101.5" height="20.5"/>
<fontDescription key="fontDescription" type="system" pointSize="17"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
</subviews>
<constraints>
<constraint firstItem="M6I-u0-WFF" firstAttribute="height" secondItem="cXk-UC-q0U" secondAttribute="height" id="4OF-bE-18u"/>
<constraint firstItem="kTF-VQ-Jbo" firstAttribute="height" secondItem="cXk-UC-q0U" secondAttribute="height" id="RtW-GA-B4z"/>
<constraint firstItem="kTF-VQ-Jbo" firstAttribute="width" secondItem="cXk-UC-q0U" secondAttribute="width" id="ZQL-ND-pb9"/>
<constraint firstItem="M6I-u0-WFF" firstAttribute="width" secondItem="cXk-UC-q0U" secondAttribute="width" id="lZf-hT-U08"/>
<constraint firstItem="cXk-UC-q0U" firstAttribute="width" secondItem="gpl-wE-cdj" secondAttribute="width" multiplier="0.3" id="zu9-SD-Sf7"/>
</constraints>
</stackView>
</subviews>
</stackView>
</subviews>
<viewLayoutGuide key="safeArea" id="itM-WY-yzX"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="itM-WY-yzX" firstAttribute="trailing" secondItem="P8z-Sm-Q6t" secondAttribute="trailing" id="TYg-aZ-N52"/>
<constraint firstItem="kvJ-kl-KIN" firstAttribute="width" secondItem="IYJ-Hg-6cW" secondAttribute="width" multiplier="0.9" id="cAB-cO-cjP"/>
<constraint firstItem="kvJ-kl-KIN" firstAttribute="top" secondItem="P8z-Sm-Q6t" secondAttribute="bottom" constant="16" id="kst-RO-T6D"/>
<constraint firstItem="kvJ-kl-KIN" firstAttribute="centerX" secondItem="IYJ-Hg-6cW" secondAttribute="centerX" id="nQx-iz-Die"/>
<constraint firstItem="P8z-Sm-Q6t" firstAttribute="leading" secondItem="itM-WY-yzX" secondAttribute="leading" id="pEQ-i4-9gg"/>
<constraint firstItem="P8z-Sm-Q6t" firstAttribute="top" secondItem="itM-WY-yzX" secondAttribute="top" id="xJS-lS-jlb"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="cWX-J6-EFK" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="16.800000000000001" y="185.75712143928038"/>
</scene>
</scenes>
<designables>
<designable name="M6I-u0-WFF">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="V37-nh-l7V">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="cXk-UC-q0U">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="kEA-jG-33S">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="kTF-VQ-Jbo">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
<designable name="yyV-A5-4ke">
<size key="intrinsicContentSize" width="80" height="80"/>
</designable>
</designables>
<resources>
<image name="b1" width="80" height="80"/>
<image name="b2" width="80" height="80"/>
<image name="b3" width="80" height="80"/>
<image name="b4" width="80" height="80"/>
<image name="b5" width="80" height="80"/>
<image name="b6" width="80" height="80"/>
<image name="person.fill" catalog="system" width="128" height="120"/>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
<systemColor name="systemBlueColor">
<color red="0.0" green="0.47843137254901963" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</systemColor>
</resources>
</document>
推荐阅读
- c# - WPF将项目添加到BindingList不会更新Viewmodel中的另一个属性
- java - Java Swing 类对象
- android - 小米手环 3 配对和获取数据（心率、步数等）问题
- uwp - UWP 垂直排列底部项目（拆分视图）
- sitemap - 无法在 netlify 上将 sitemap.xml 添加到 Google 控制台
- c# - C# EF Random Order 导致相关列表消失
- python - Python中阈值检测功能的实现
- html - 2 个字符串/值之间的正则表达式捕获
- types - 用于 javascript 的 Flow 的替代品
- keras - Keras input_shape、output_shape、get_weights、get_config 和 summary 的 PyTorch 替代方案是什么