создание адаптивной верстки для всех iPhone устройств

Question

Сейчас я изучаю Swift и пытаюсь создать пользовательский интерфейс для своего личного проекта. Я смотрел некоторые из руководств по автоматическому раскладке, просмотрам стека и адаптивному макету, но я не могу отображать пользовательский интерфейс, если устройство становится меньше или больше. На первом изображении ниже я добавляю верхнее ограничение к метке "добро пожаловать" до 20 пунктов.

введите описание изображения здесь

Я могу отобразить все свои пользовательские интерфейсы, метки, индикатор выполнения, просмотр изображений и кнопку «проверить, если тогда». Я добавил вертикальный интервал в 16 пунктов для пользовательских интерфейсов, поэтому вы можете увидеть небольшой промежуток между этими интерфейсами. Однако проблема в том, что он выглядит нормально для экрана iPhone SE, но для iPhone 11 вы видите огромное пространство внизу.

А вот второе изображение, создайте изображение пользовательского интерфейса вид (большой розовый квадрат посередине) вертикально центрируется и немного опускается.

введите описание изображения здесь

Как и на первом изображении, я добавил интервал 16 пунктов между вертикальными элементами, и вы увидите небольшой промежуток между ними. Но для iPhone 11, поскольку я поставил розовое изображение вертикально по центру, и сверху, и снизу есть больший зазор, и пользовательский интерфейс выглядит плохо.

Макет, который я хочу сделать, выглядит примерно так. введите описание изображения здесь

Даже если размер экрана изменится (а пока меня интересуют только iPhone экраны), я все равно могу видеть те же интерфейсы пользовательского интерфейса с меньшей или большей версией. Теперь я добавляю вертикальный интервал в 16 пунктов к каждому пользовательскому интерфейсу, чтобы сузить пользовательский интерфейс, но я не уверен, как я могу изменить интервал, в зависимости от горизонтальных размеров экрана. Я надеюсь это имеет смысл. Я хочу знать, что мне не хватает, и мне следует изучить или какие-либо предложения, когда я работаю над созданием пользовательского интерфейса. Я не уверен, что это помогает или нет, но вот мои ограничения ... введите описание изображения здесь

Я использую построитель интерфейсов для этого проекта.

Answer 1

Дизайн пользовательского интерфейса включает в себя гораздо больше, чем просто регулировку расстояния / размера между размерами устройства / экрана.

Как вы хотите, чтобы он выглядел при повороте устройства? Или на экране iPad?

Есть «UI-дизайнеры», которые зарабатывают много денег, потому что они очень, очень хороши в этом.

Вы говорите «Я учусь Swift now " ... лучше всего просто читать все больше и больше руководств / статей / блогов / документации / et c и продолжать экспериментировать и учиться.

Пока вы работая над этим, подумайте о том, как элементы «разделяются» на вашем макете ...

• Похоже, вы хотите, чтобы верхние элементы - кнопки меню и выхода из системы и метка приветствия - были единообразно
• Вероятно, вы хотите, чтобы метки выполнения оставались вертикально рядом с индикатором выполнения.
• Похоже, вы хотите, чтобы розовый (я предполагаю, изображение) вид был квадратным - Соотношение 1: 1.
• Затем «кнопка» внизу.
• И вам нужен ровный интервал.

Итак, у вас фактически 4 элементов, о которых стоит подумать вместо 8 .

Вот источник для раскадровки, которая может вам помочь:

<?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>

Используя это, я получаю это на SE (1), 8, XS Max и 11:

введите описание изображения здесь