Ios 在Xcode中制作布局有没有简单的方法或技巧？

抱歉，如果标题有点混乱。。。我正在尝试为iPhone制作一个加密信息的应用程序。我已经完成了应用程序（加密部分）的逻辑，现在只需要制作UI。现在我已经在iPhone11上用边界、视图和所有东西使它看起来很漂亮了。我也明白，该应用程序必须在所有设备上运行，而不仅仅是iPhone 11，所以我已经尝试了一切。但我所做的一切都没有使它在所有受支持的设备上看起来都很好。我不需要它在所有设备上看起来完全相同，我对可用的布局很满意

以下是目前在iphone SE上的外观。

它应该是什么样子的：

任何帮助都将不胜感激！在过去的几周里，这个问题一直让我感到非常不安！非常感谢

除了在视图中放置元素之外，应用程序设计还有很多内容。优秀的用户界面/用户体验设计师会赚很多钱

我建议大家阅读和阅读一些关于自适应布局以及如何使用自动布局约束的教程

但是，这可能会帮助您在路上：

首先，我为背景图像添加了一个

UIImageView

，并将其约束到视图的所有四个侧面。内容模式为：方面填充

接下来，我添加了一个

UIView

，用作半透明矩形。将8-PT限制在安全区域的所有4个侧面

然后，添加一个垂直堆栈视图作为半透明视图的子视图，以保存文本字段和按钮。堆栈视图设置：

堆栈视图被约束为8-pts前导和尾随，居中，高度等于半透明视图高度，倍增为0.6（60%）

接下来，向堆栈视图添加2个文本字段和2个按钮

顶部文本字段获取宽度限制：等于堆栈视图宽度，高度：80

第二个文本字段获取宽度和高度的约束，每个约束都等于顶部文本字段的宽度和高度

加密按钮获取宽度：等于堆栈视图宽度，乘数为0.5（50%），高度：44

保存按钮宽度和高度，每个都等于加密按钮宽度和高度

这是iPhone 11上的外观：

以及它在iPhone SE上的外观：

尝试按照这些说明构建您自己的视图。。。玩转乘数和高度，得到你想要的

如果您想查看我所做的事情，请查看故事板的来源：

<?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="yPA-e8-bF0">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
        <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="eKS-HH-0an">
            <objects>
                <viewController id="yPA-e8-bF0" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="IMs-mo-OT9">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFill" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="enigma" translatesAutoresizingMaskIntoConstraints="NO" id="a97-39-O1b" userLabel="BkgImageView">
                                <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                            </imageView>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="KU4-QP-gRf" userLabel="TranslucentView">
                                <rect key="frame" x="8" y="52" width="398" height="802"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="equalSpacing" alignment="center" spacingType="standard" translatesAutoresizingMaskIntoConstraints="NO" id="wP8-Q1-mPE">
                                        <rect key="frame" x="8" y="160.5" width="382" height="481"/>
                                        <subviews>
                                            <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" placeholder="Enter password..." textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="qfA-Wi-r60" userLabel="Password">
                                                <rect key="frame" x="0.0" y="0.0" width="382" height="80"/>
                                                <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="80" id="oZi-ie-XZG"/>
                                                </constraints>
                                                <fontDescription key="fontDescription" type="system" pointSize="32"/>
                                                <textInputTraits key="textInputTraits"/>
                                            </textField>
                                            <textField opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="left" contentVerticalAlignment="center" borderStyle="roundedRect" textAlignment="natural" minimumFontSize="17" translatesAutoresizingMaskIntoConstraints="NO" id="bjw-4v-4Jx" userLabel="OtherFIeld">
                                                <rect key="frame" x="0.0" y="157.5" width="382" height="80"/>
                                                <color key="backgroundColor" red="0.99999600649999998" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="14"/>
                                                <textInputTraits key="textInputTraits"/>
                                            </textField>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="bTb-DJ-vCs">
                                                <rect key="frame" x="95.5" y="315.5" width="191" height="44"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="44" id="lf2-w6-UTa"/>
                                                </constraints>
                                                <fontDescription key="fontDescription" type="system" pointSize="18"/>
                                                <state key="normal" title="Encrypt"/>
                                            </button>
                                            <button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="Cae-UG-Y7N">
                                                <rect key="frame" x="95.5" y="437" width="191" height="44"/>
                                                <color key="backgroundColor" red="0.92143100499999997" green="0.92145264149999995" blue="0.92144101860000005" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <fontDescription key="fontDescription" type="system" pointSize="18"/>
                                                <state key="normal" title="Save"/>
                                            </button>
                                        </subviews>
                                        <constraints>
                                            <constraint firstItem="bTb-DJ-vCs" firstAttribute="width" secondItem="wP8-Q1-mPE" secondAttribute="width" multiplier="0.5" id="6Wm-3S-qxD"/>
                                            <constraint firstItem="Cae-UG-Y7N" firstAttribute="height" secondItem="bTb-DJ-vCs" secondAttribute="height" id="p5o-jv-a8L"/>
                                            <constraint firstItem="qfA-Wi-r60" firstAttribute="width" secondItem="wP8-Q1-mPE" secondAttribute="width" id="r8a-2n-fea"/>
                                            <constraint firstItem="Cae-UG-Y7N" firstAttribute="width" secondItem="bTb-DJ-vCs" secondAttribute="width" id="vle-Os-n7x"/>
                                            <constraint firstItem="bjw-4v-4Jx" firstAttribute="width" secondItem="qfA-Wi-r60" secondAttribute="width" id="vvF-2z-jNy"/>
                                            <constraint firstItem="bjw-4v-4Jx" firstAttribute="height" secondItem="qfA-Wi-r60" secondAttribute="height" id="z1m-rH-13I"/>
                                        </constraints>
                                    </stackView>
                                </subviews>
                                <color key="backgroundColor" white="1" alpha="0.5" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                <constraints>
                                    <constraint firstItem="wP8-Q1-mPE" firstAttribute="height" secondItem="KU4-QP-gRf" secondAttribute="height" multiplier="0.6" id="Pfn-ju-x0H"/>
                                    <constraint firstItem="wP8-Q1-mPE" firstAttribute="leading" secondItem="KU4-QP-gRf" secondAttribute="leading" constant="8" id="Q8S-Ar-y5A"/>
                                    <constraint firstAttribute="trailing" secondItem="wP8-Q1-mPE" secondAttribute="trailing" constant="8" id="SGJ-gK-ig4"/>
                                    <constraint firstItem="wP8-Q1-mPE" firstAttribute="centerY" secondItem="KU4-QP-gRf" secondAttribute="centerY" id="ksD-Lw-Ytc"/>
                                    <constraint firstItem="wP8-Q1-mPE" firstAttribute="centerY" secondItem="KU4-QP-gRf" secondAttribute="centerY" id="wyp-LZ-9UA"/>
                                </constraints>
                            </view>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="zyU-KG-DhM"/>
                        <color key="backgroundColor" red="0.2814566791" green="0.56105160710000002" blue="0.5379729271" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                        <constraints>
                            <constraint firstItem="KU4-QP-gRf" firstAttribute="top" secondItem="zyU-KG-DhM" secondAttribute="top" constant="8" id="6jD-v6-UtV"/>
                            <constraint firstAttribute="trailing" secondItem="a97-39-O1b" secondAttribute="trailing" id="AVi-Gj-Pq8"/>
                            <constraint firstItem="zyU-KG-DhM" firstAttribute="trailing" secondItem="KU4-QP-gRf" secondAttribute="trailing" constant="8" id="HQF-op-KJr"/>
                            <constraint firstItem="a97-39-O1b" firstAttribute="leading" secondItem="IMs-mo-OT9" secondAttribute="leading" id="JWA-2e-TZN"/>
                            <constraint firstAttribute="bottom" secondItem="a97-39-O1b" secondAttribute="bottom" id="cQ2-Di-l19"/>
                            <constraint firstItem="a97-39-O1b" firstAttribute="top" secondItem="IMs-mo-OT9" secondAttribute="top" id="csp-iz-KcD"/>
                            <constraint firstItem="KU4-QP-gRf" firstAttribute="leading" secondItem="zyU-KG-DhM" secondAttribute="leading" constant="8" id="rkA-7R-qHD"/>
                            <constraint firstItem="zyU-KG-DhM" firstAttribute="bottom" secondItem="KU4-QP-gRf" secondAttribute="bottom" constant="8" id="zbM-iI-Zw9"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="xT8-h3-U8Q" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="303" y="190"/>
        </scene>
    </scenes>
    <resources>
        <image name="enigma" width="629" height="1167"/>
    </resources>
</document>

白色框是文本字段吗？文本视图？你是否在故事板中布置元素？还是通过代码？DonMag它被放在故事板上了。希望有帮助！非常感谢！
1
和
0
的列是否是您的“背景”图像的一部分？还是标签？编辑您的问题并只添加背景图像。是的，如果您只需要支持iOS 13+，请查看swiftui。由于它使布局更容易，复杂的UI有一些限制，但在大多数情况下，应该与您的示例配合使用。1和0是背景的一部分。不幸的是，我身上没有背景图像，但我会尽力解释。1、0、背景色和红色机器都是背景图像的一部分。不显示透明的白色矩形。我只支持iOS 13+哇！我没想到会有这样一个友好而详细的回答！非常感谢！下课后我会试试这个，然后告诉你它是否有效！再次感谢你！