#ios #swift #xcode
#iOS #swift #xcode
Вопрос:
Извините, если название немного сбивает с толку… Я пытаюсь создать приложение для iPhone, которое шифрует сообщения. Я закончил создавать логику приложения (часть шифрования), и теперь мне просто нужно создать пользовательский интерфейс. Теперь я уже сделал так, чтобы это выглядело красиво на iPhone 11 с границами, видами и всем остальным. Я также понимаю, что приложение должно работать на всех устройствах, а не только на iPhone 11, поэтому я перепробовал все. Но я ничего не сделал, чтобы это выглядело хорошо на всех поддерживаемых устройствах. Мне не нужно, чтобы он выглядел одинаково на всех устройствах, меня устраивает удобный макет.
Вот как это выглядит в настоящее время на iphone SE. 
И как это должно выглядеть: 
Любая помощь будет с благодарностью! Эта проблема заставляла меня лезть на стену в течение последних нескольких недель! Заранее большое спасибо!
Комментарии:
1. Являются ли белые поля текстовыми полями? текстовые представления? Вы размещаете элементы в раскадровке? или с помощью кода?
2. Не отмечайте, что он был помещен в раскадровку. Надеюсь, это поможет! Большое спасибо!
3. Являются ли столбцы
1и0частью вашего «фонового» изображения? Или это метки? Отредактируйте свой вопрос и добавьте только фоновое изображение.4. Да, посмотрите на swiftui, если вам нужна только поддержка iOS 13 . Поскольку это значительно упрощает компоновку, существуют некоторые ограничения для сложного пользовательского интерфейса, но по большей части они должны хорошо работать с вашим примером.
5. Единицы и 0 являются частью фона. К сожалению, у меня нет фонового изображения, но я попытаюсь объяснить. Единицы, 0, цвет фона и красная машина — все это часть фонового изображения. Прозрачный белый прямоугольник — нет. Я поддерживаю только iOS 13
Ответ №1:
Дизайн приложения — это ГОРАЗДО больше, чем просто размещение элементов в представлении. Хорошие дизайнеры UI / UX зарабатывают много денег.
Я бы посоветовал прочитать и просмотреть несколько руководств по адаптивной верстке и как работать с ограничениями автоматической верстки.
Но это может помочь вам на вашем пути:
Сначала я добавил a UIImageView для фонового изображения и ограничил его всеми 4 сторонами представления. Режим содержимого: заливка аспекта
Затем я добавил a UIView для использования в качестве полупрозрачного прямоугольника. Ограниченные 8 пунктов для всех 4 сторон безопасной зоны.
Затем добавлено представление вертикального стека в качестве подвида полупрозрачного представления для размещения текстовых полей и кнопок. Настройки просмотра стека:
Вид стека ограничен 8-пунктами впереди и сзади, центр, высота равна высоте полупрозрачного вида с множителем 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>
и вот фоновое изображение, которое я создал (нажмите для получения полного размера)… очевидно, замените на ваш:
Комментарии:
1. Вау! Я не ожидал такого доброго и подробного ответа! Большое спасибо! Я попробую это после урока и скажу вам, сработало ли это! Еще раз, большое спасибо!