为所有 iPhone 设备制作自适应布局
[英]making adaptive layout for all iPhone devices
问题描述
I'm learning Swift now and I'm trying to make UIs for my personal project.
我现在正在学习 Swift，我正在尝试为我的个人项目制作 UI。 I watched some of the autolayout, stack views, and adoptive layout tutorials, but I cannot display UIs if the device gets smaller or bigger.我观看了一些自动布局、堆栈视图和采用布局教程，但如果设备变小或变大，我将无法显示 UI。 The first image below is when I add the top constraint to the label, "welcome", to 20 points.下面的第一张图片是当我将顶部约束添加到 label 时，“欢迎”到 20 分。
I can display all of my UIs, labels, the progress bar, image view, and the button, "check my if then".我可以显示我的所有 UI、标签、进度条、图像视图和按钮“检查我的 if then”。 I added vertical spacing of 16pt for UIs so, you can see a small gap between those UIs.我为 UI 添加了 16pt 的垂直间距，因此您可以看到这些 UI 之间的小间隙。 However, the problem is, it looks ok for the iPhone SE screen, but for the iPhone 11 you see the huge space at the bottom.但是，问题是，iPhone SE 的屏幕看起来还可以，但对于 iPhone 11，你会看到底部的巨大空间。
And here is the second image, make the UI image view (a bigger pink square in the middle) vertically centers and lower the UI a little.这是第二张图片，使 UI 图像视图（中间更大的粉红色方块）垂直居中并稍微降低 UI。
Same as the first image, I added 16pt spacing between vertical items, and you will see the small gap between them.和第一张图片一样，我在垂直项目之间添加了 16pt 的间距，你会看到它们之间的小间隙。 But for the iPhone 11, since I put the pink image view vertically centered, both the top and bottom have a bigger gap and the UI looks poorly.但对于 iPhone 11，由于我将粉色图像视图垂直居中放置，因此顶部和底部都有较大的差距，UI 看起来很糟糕。
The layout I want to make is something like this.我想做的布局是这样的。
Even if the screen size changes (and I only care about iPhone screens for now), I can still see the same UIs with smaller version or bigger version.即使屏幕尺寸发生变化（我现在只关心 iPhone 屏幕），我仍然可以看到相同的 UI 具有较小版本或较大版本。 Now I add vertical spacing of 16pt to each UI, so that makes UIs tighten, but not sure how I can change the spacing depends on the screen horizontal sizes.现在我为每个 UI 添加了 16pt 的垂直间距，这样可以使 UI 收紧，但不确定如何更改间距取决于屏幕水平尺寸。 I hope this makes sense.我希望这是有道理的。 I want to know what I'm missing and should study or any suggestions when I work on making UIs.我想知道我在制作 UI 时缺少什么，应该学习或提出任何建议。 I'm not sure this helps or not, but here are my constraints...我不确定这是否有帮助，但这是我的限制......
I'm using interface builder for this project.我正在为这个项目使用界面构建器。
1 个解决方案
解决方案1
-1 2020-08-06 13:55:22
UI design involves a lot more than just getting spacing / sizing to adjust between device / screen sizes. UI 设计涉及的不仅仅是在设备/屏幕尺寸之间调整间距/大小。
How do you want it to look when the device is rotated?当设备旋转时，您希望它看起来如何？ Or on an iPad screen?还是在 iPad 屏幕上？
There are "UI Designers" who make a lot of money because they are very, very good at it.有“UI设计师”因为他们非常非常擅长而赚了很多钱。
You say "I'm learning Swift now" ... well, the best approach is to simply read more and more tutorials / articles / blogs / documentation / etc, and keep experimenting and learning.你说“我现在正在学习 Swift” ……好吧，最好的方法是简单地阅读越来越多的教程/文章/博客/文档/等，并不断尝试和学习。
While you're working on it, think about how the elements are "divided up" on your layout...当你在处理它时，想想元素是如何在你的布局上“划分”的......
- It appears you want the top elements - the menu and logout buttons and the Welcome label - to be consistently sized and spaced.您似乎希望顶部元素 - 菜单和注销按钮以及 Welcome label - 具有一致的大小和间距。
- You probably want the progress labels to stay vertically close to the progress bar.您可能希望进度标签垂直靠近进度条。
- It looks like you want the pink (I'm guessing, image) view to be square - 1:1 ratio.看起来您希望粉红色（我猜是图像）视图是方形的 - 1:1 的比例。
- Then the "button" at the bottom.然后是底部的“按钮”。
- And you want some even spacing.你想要一些均匀的间距。
So, you have essentially 4 elements to think about instead of 8 .因此，您基本上需要考虑4 个元素，而不是8个。
Here's source for a Storyboard that may help you along:这是 Storyboard 的来源，它可能会帮助您：
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="16096" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="172-Ys-2E0">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="16087"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="Stack View standard spacing" minToolsVersion="9.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="gg1-88-ZEb">
<objects>
<viewController id="172-Ys-2E0" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="W95-f5-z1M">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="G3C-2N-hBY">
<rect key="frame" x="20" y="12" width="46" height="36"/>
<constraints>
<constraint firstAttribute="height" constant="36" id="vVB-Sc-Yi1"/>
</constraints>
<color key="tintColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<state key="normal" image="menuButton">
<preferredSymbolConfiguration key="preferredSymbolConfiguration" configurationType="pointSize" pointSize="28" weight="black"/>
</state>
</button>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="NAA-cu-1GI">
<rect key="frame" x="263" y="7" width="92" height="46"/>
<fontDescription key="fontDescription" type="system" weight="black" pointSize="28"/>
<state key="normal" title="logout">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="fWQ-7J-f7E">
<rect key="frame" x="32" y="123" width="311" height="528"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="equalSpacing" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="nXY-UB-zXF">
<rect key="frame" x="0.0" y="13" width="311" height="502"/>
<subviews>
<view hidden="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="OP6-NH-JHF">
<rect key="frame" x="0.0" y="-6" width="311" height="2"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="height" constant="2" id="3UY-3c-rC3"/>
</constraints>
</view>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="kXp-zq-J6l">
<rect key="frame" x="0.0" y="0.0" width="311" height="44"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" spacing="8" translatesAutoresizingMaskIntoConstraints="NO" id="Wax-WV-I2N">
<rect key="frame" x="0.0" y="0.0" width="311" height="24"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Today's progress:" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Aum-nh-bCH">
<rect key="frame" x="0.0" y="0.0" width="262" height="24"/>
<fontDescription key="fontDescription" type="system" pointSize="20"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="750" verticalHuggingPriority="251" text="4 / 6" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="irl-97-Tfc">
<rect key="frame" x="270" y="0.0" width="41" height="24"/>
<fontDescription key="fontDescription" type="system" pointSize="20"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="tzW-47-BdA">
<rect key="frame" x="0.0" y="32" width="311" height="12"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="c06-2d-LeR">
<rect key="frame" x="0.0" y="0.0" width="311" height="12"/>
<color key="backgroundColor" red="0.84866023059999995" green="0.84878283740000005" blue="0.84863340850000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</imageView>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="ycO-Yh-oSC">
<rect key="frame" x="0.0" y="0.0" width="233.5" height="12"/>
<color key="backgroundColor" red="0.9215936065" green="0.38732314109999999" blue="0.51481616500000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
</imageView>
</subviews>
<color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
<constraints>
<constraint firstItem="ycO-Yh-oSC" firstAttribute="centerY" secondItem="c06-2d-LeR" secondAttribute="centerY" id="7wt-6I-EVf"/>
<constraint firstAttribute="bottom" secondItem="c06-2d-LeR" secondAttribute="bottom" id="9s3-pc-VkJ"/>
<constraint firstAttribute="trailing" secondItem="c06-2d-LeR" secondAttribute="trailing" id="EcS-Rm-Ynx"/>
<constraint firstItem="ycO-Yh-oSC" firstAttribute="width" secondItem="c06-2d-LeR" secondAttribute="width" multiplier="0.75" id="HSf-Y9-Shk"/>
<constraint firstItem="ycO-Yh-oSC" firstAttribute="leading" secondItem="c06-2d-LeR" secondAttribute="leading" id="TNa-dw-RcH"/>
<constraint firstItem="c06-2d-LeR" firstAttribute="leading" secondItem="tzW-47-BdA" secondAttribute="leading" id="dHn-DI-OKX"/>
<constraint firstAttribute="height" constant="12" id="hXb-9X-U4k"/>
<constraint firstItem="c06-2d-LeR" firstAttribute="top" secondItem="tzW-47-BdA" secondAttribute="top" id="qYp-Y2-WeM"/>
<constraint firstItem="ycO-Yh-oSC" firstAttribute="height" secondItem="c06-2d-LeR" secondAttribute="height" id="vco-oo-SHu"/>
</constraints>
</view>
</subviews>
</stackView>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="Ga2-sg-ARc">
<rect key="frame" x="0.0" y="71.5" width="311" height="311"/>
<color key="backgroundColor" red="0.94554942850000001" green="0.78171783689999996" blue="0.78158324960000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="Ga2-sg-ARc" secondAttribute="height" multiplier="1:1" id="tT1-Hj-Sc1"/>
</constraints>
</imageView>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" alignment="center" translatesAutoresizingMaskIntoConstraints="NO" id="K4b-he-ckY">
<rect key="frame" x="0.0" y="410" width="311" height="62.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="roundedRect" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="kat-Ko-rc5">
<rect key="frame" x="62" y="0.0" width="187" height="62.5"/>
<color key="backgroundColor" red="0.7673358321" green="0.767447412" blue="0.76731151340000003" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="kat-Ko-rc5" secondAttribute="height" multiplier="180:60" id="TrG-te-fP9"/>
</constraints>
<fontDescription key="fontDescription" type="boldSystem" pointSize="30"/>
<state key="normal" title="button">
<color key="titleColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</state>
</button>
</subviews>
<constraints>
<constraint firstItem="kat-Ko-rc5" firstAttribute="width" secondItem="K4b-he-ckY" secondAttribute="width" multiplier="0.6" id="J8V-xL-g2t"/>
</constraints>
</stackView>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="icI-mg-H6h">
<rect key="frame" x="0.0" y="500" width="311" height="2"/>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstAttribute="height" constant="2" id="PNC-Wv-Qma"/>
</constraints>
</view>
</subviews>
</stackView>
</subviews>
<color key="backgroundColor" white="0.0" alpha="0.0" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
<constraints>
<constraint firstItem="nXY-UB-zXF" firstAttribute="height" secondItem="fWQ-7J-f7E" secondAttribute="height" multiplier="0.95" id="3Gx-N3-PZn"/>
<constraint firstItem="nXY-UB-zXF" firstAttribute="centerY" secondItem="fWQ-7J-f7E" secondAttribute="centerY" id="9VX-uV-FqY"/>
<constraint firstItem="nXY-UB-zXF" firstAttribute="leading" secondItem="fWQ-7J-f7E" secondAttribute="leading" id="BlQ-S7-cAD"/>
<constraint firstAttribute="trailing" secondItem="nXY-UB-zXF" secondAttribute="trailing" id="yDc-bo-7JZ"/>
</constraints>
</view>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Welcome!!" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="OKM-oK-ll3">
<rect key="frame" x="32" y="64" width="179" height="43"/>
<fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="0.99993449450000005" green="0.91130131479999998" blue="0.77088779210000002" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="OKM-oK-ll3" firstAttribute="leading" secondItem="ORM-kG-UNT" secondAttribute="leading" constant="32" id="JQu-N0-9NK"/>
<constraint firstItem="ORM-kG-UNT" firstAttribute="trailing" secondItem="fWQ-7J-f7E" secondAttribute="trailing" constant="32" id="PRk-Hu-crq"/>
<constraint firstItem="G3C-2N-hBY" firstAttribute="leading" secondItem="ORM-kG-UNT" secondAttribute="leading" constant="20" id="R7V-zj-Ieg"/>
<constraint firstItem="fWQ-7J-f7E" firstAttribute="top" secondItem="OKM-oK-ll3" secondAttribute="bottom" constant="16" id="UTC-W0-Ja0"/>
<constraint firstItem="ORM-kG-UNT" firstAttribute="trailing" secondItem="NAA-cu-1GI" secondAttribute="trailing" constant="20" id="VAk-b0-olQ"/>
<constraint firstItem="G3C-2N-hBY" firstAttribute="top" secondItem="ORM-kG-UNT" secondAttribute="top" constant="12" id="ZgO-nA-Y6f"/>
<constraint firstItem="fWQ-7J-f7E" firstAttribute="leading" secondItem="ORM-kG-UNT" secondAttribute="leading" constant="32" id="a8r-Yh-0YR"/>
<constraint firstItem="NAA-cu-1GI" firstAttribute="centerY" secondItem="G3C-2N-hBY" secondAttribute="centerY" id="e4E-py-4P7"/>
<constraint firstItem="OKM-oK-ll3" firstAttribute="top" secondItem="G3C-2N-hBY" secondAttribute="bottom" constant="16" id="i4b-Wy-DZC"/>
<constraint firstItem="ORM-kG-UNT" firstAttribute="bottom" secondItem="fWQ-7J-f7E" secondAttribute="bottom" constant="16" id="jZt-27-Nuv"/>
</constraints>
<viewLayoutGuide key="safeArea" id="ORM-kG-UNT"/>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="smv-6h-Rg0" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="34.782608695652179" y="276.5625"/>
</scene>
</scenes>
<resources>
<image name="menuButton" width="46" height="40"/>
</resources>
</document>
Using that, I get this on SE (1), 8, XS Max and 11:使用它，我在 SE (1)、8、XS Max 和 11 上得到了这个：
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
使用自适应布局的iPhone和iPad设备的不同uitableview单元高度 - Different uitableview cell height for iPhone and iPad devices using adaptive layout
ios swift-UI Designer自适应iPhone布局 - ios swift - UI Designer Adaptive iPhone Layout
如何在自动布局中设计 3x3 按钮支持所有使用 Storyboard 的 iPhone 设备 - How to design 3x3 buttons in auto layout support all iPhone devices using Storyboard
如何仅使用一个情节提要为所有iPhone设备设计自动布局约束？ - How to design auto layout constraint for all iPhone devices using only one storyboard?
如何使用情节提要自动布局为所有iPhone设备（例如4,5,6和6+）设计自动适配 - how to design auto fit for all iPhone devices like 4,5,6 and 6+ using storyboard auto layout
自适应故事板（将大量按钮正确安装到所有设备上） - Adaptive storyboard (fit lots of buttons onto all devices correctly)
适用于所有 iPhone 设备的图像调整器 - Images Resizer for all iPhone devices
从iPhone 4s到iPhone 6+的自适应布局来隔开布局元素 - Spacing layout elements with adaptive layout from iPhone 4s to iPhone 6+
自动布局所有设备的UIImage - Auto layout a UIImage for all devices
开发将在所有iPhone设备上运行的iPhone App - Developing iPhone App that will run on all the iPhone devices
相关标签