如何为多种 iPhone 尺寸对齐文本和图像
Posted
技术标签:
【中文标题】如何为多种 iPhone 尺寸对齐文本和图像【英文标题】：How to align text & images for multiple iphone sizes 【发布时间】：2021-02-08 18:26:46 【问题描述】：我正在努力让 xcode 约束正常工作，我在下面有 6 个图像和文本，在较大的 iphone 尺寸下看起来很糟糕。在 iphone SE/8 中看起来不错，但在 iphone 11 中左右图像更贴合两侧。
以下是它们在 iphone SE 和 11 中的屏幕截图： iphone SE and 11 screen shot
以下是图像的限制条件： image constraints
这里是文本限制： text constraints
非常感谢任何反馈，我不确定我在这里做错了什么
【问题讨论】：
您要动态创建它吗？你总是有 6 张图片吗？ 它总是有 6 张静态图片 这些是图像视图吗？还是只有图片的按钮？ 【参考方案1】：UIStackView 使这个布局相当容易实现...
对于约束，我们将从“外部”堆栈视图开始
从“横幅”视图底部限制前 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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
</designable>
<designable name="V37-nh-l7V">
<size key="intrinsicContentSize" />
</designable>
<designable name="cXk-UC-q0U">
<size key="intrinsicContentSize" />
</designable>
<designable name="kEA-jG-33S">
<size key="intrinsicContentSize" />
</designable>
<designable name="kTF-VQ-Jbo">
<size key="intrinsicContentSize" />
</designable>
<designable name="yyV-A5-4ke">
<size key="intrinsicContentSize" />
</designable>
</designables>
<resources>
<image name="b1" />
<image name="b2" />
<image name="b3" />
<image name="b4" />
<image name="b5" />
<image name="b6" />
<image name="person.fill" catalog="system" />
<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>
【讨论】：
以上是关于如何为多种 iPhone 尺寸对齐文本和图像的主要内容，如果未能解决你的问题，请参考以下文章
iPhone/iOS：如何为 Scrollview 的子视图实现拖放？