Автолайтинг ограничения с граничными условиями

Question

У меня есть следующие настройки

            Top View
               |
               |
 LeftView -- MyView --- RightView
               |
               |
          BottomView

Я хочу, чтобы MyView имел максимально возможный кадр с соотношением сторон 1: 1 и должен соблюдать граничное условие, чтобы не пересекать ни один из 4 видов (вид слева, вид справа), Вид сверху, вид снизу).Как я могу выразить ограничения автоматического размещения, желательно в раскадровке?

Answer 1

Используйте обычный UIView в качестве контейнера (родительского элемента) для MyView (это необходимо для правильного центрирования). Затем используйте следующие ограничения:

1. Прикрепите вид контейнера к верхнему, ведущему, нижнему и заднему видам с интервалом 0.
2. Центр MyView по горизонтали и вертикали в представлении контейнера.
3. Закрепите MyView вверху, впереди, внизу и сзади контейнера, с любым желаемым интервалом и необязательными приоритетами (например, 750).
4. Снова прикрепите MyView к верхней, передней, нижней и задней части контейнера с любым желаемым интервалом. На этот раз сделайте все четыре ограничения необходимыми и больше чем.
5. Установите соотношение сторон для MyView на любое значение.

Результат:

Answer 2

Хотите что-то подобное?

Дайте мне знать, чтобы отредактировать мой ответ.

Answer 3

Ограничения «Расстояние между элементами» не могут быть установлены равными или пропорциональными друг другу.

Таким образом, у вас есть пара вариантов, при этом самым простым и простым (на мой взгляд) является использование "Контейнерный вид ", чтобы держать" MyView "

Начните с добавления вашего вида сверху / снизу и слева / справа.Я установил их с этими ограничениями ширины / высоты, чтобы продемонстрировать.Ограничьте их Top, Leading, Trailing и Bottom, с верхом и низом по центру по горизонтали и слева и справа по центру по вертикали:

Теперь добавьте UIViewчто мы будем использовать в качестве «контейнера» - я выделил ему красный фон, чтобы его было легко увидеть:

Ограничить каждую сторонуиз представления контейнера для каждого из других представлений (сверху вниз, из TopView, по левому краю, по левому краю и т. д.).

Если вы запустите приложение сейчас, вы получите такой результат:

Пока ничего особенного.

Далее добавьте свой "MyView""как подпредставление контейнера ... и мы немного усложним ограничения.

Легкие детали:

• пропорциональное ограничение 1:1
• ограничить его по центру по вертикали и горизонтали в представлении контейнера

Далее:

• добавить ограничения Top / Bottom / Leading / Trailing из ZERO
• Edit каждого из этих ограничений и установить их Приоритет до 750

Сейчас:

• добавить еще один набор сверху / снизу / ведущим /Трейлинг-ограничения ZERO
• Редактировать каждое из этих ограничений и установить для них >=

ВашРаскадровка должна выглядеть следующим образом:

и при запуске приложения:

Вот как это выглядит, когда фоновый вид контейнера установлен на clear:

Как видите, центр «MyView» заполняет столько жепространство, насколько это возможно, оставаясь в соотношении 1: 1, и равное расстояние слева / справа и сверху / снизу.

Если вы хотите немного «заполнить» между представлениями, измените ограничения «контейнера»представление "относительно каждого из вида сверху / снизу слева / справа.Здесь я изменил их с нуля на 8 (никаких других изменений не требуется)

И результаты:

Наконец, вот источник раскадровки:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14460.31" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="yEI-oI-7TM">
    <device id="retina4_7" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14460.20"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--View Controller-->
        <scene sceneID="lsW-Jh-u0o">
            <objects>
                <viewController id="yEI-oI-7TM" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="bPW-Lv-D8K">
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="200 x 28" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ufs-Rs-T6p">
                                <rect key="frame" x="87.5" y="20" width="200" height="28"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="width" constant="200" id="KeC-SC-7sr"/>
                                    <constraint firstAttribute="height" constant="28" id="Snc-pq-7hW"/>
                                </constraints>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="ytj-cQ-xcw">
                                <rect key="frame" x="0.0" y="258.5" width="34" height="150"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="150" id="LDr-tW-Ea2"/>
                                    <constraint firstAttribute="width" constant="34" id="jXP-5w-bh0"/>
                                </constraints>
                                <string key="text">34
x
150</string>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="FKr-kC-VXc">
                                <rect key="frame" x="275" y="233.5" width="100" height="200"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="height" constant="200" id="JX4-TU-YAy"/>
                                    <constraint firstAttribute="width" constant="100" id="lyr-5f-Pkd"/>
                                </constraints>
                                <string key="text">100
x
200</string>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="100 x 100" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="Yjf-aU-73z">
                                <rect key="frame" x="137.5" y="567" width="100" height="100"/>
                                <color key="backgroundColor" red="0.45138680930000002" green="0.99309605359999997" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstAttribute="width" constant="100" id="7cd-f4-E5d"/>
                                    <constraint firstAttribute="height" constant="100" id="OJH-rB-ezu"/>
                                </constraints>
                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                <nil key="textColor"/>
                                <nil key="highlightedColor"/>
                            </label>
                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="HVg-nR-YS6">
                                <rect key="frame" x="42" y="56" width="225" height="503"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="MyView" textAlignment="center" lineBreakMode="tailTruncation" numberOfLines="0" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="KKs-Gt-Kdd">
                                        <rect key="frame" x="0.0" y="139" width="225" height="225"/>
                                        <color key="backgroundColor" red="0.0" green="0.58980089430000004" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <constraints>
                                            <constraint firstAttribute="width" secondItem="KKs-Gt-Kdd" secondAttribute="height" multiplier="1:1" id="7W6-ga-lno"/>
                                        </constraints>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <color key="textColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <color key="backgroundColor" red="1" green="0.14913141730000001" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="centerY" secondItem="HVg-nR-YS6" secondAttribute="centerY" id="1Xx-i7-Ozs"/>
                                    <constraint firstAttribute="trailing" secondItem="KKs-Gt-Kdd" secondAttribute="trailing" priority="750" id="AGs-sc-h0s"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="leading" secondItem="HVg-nR-YS6" secondAttribute="leading" priority="750" id="BpD-Dh-uWw"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="top" secondItem="HVg-nR-YS6" secondAttribute="top" priority="750" id="Cab-k8-rRO"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="top" relation="greaterThanOrEqual" secondItem="HVg-nR-YS6" secondAttribute="top" id="PA2-Kf-ZGk"/>
                                    <constraint firstAttribute="bottom" secondItem="KKs-Gt-Kdd" secondAttribute="bottom" priority="750" id="XAa-gM-AS6"/>
                                    <constraint firstAttribute="trailing" relation="greaterThanOrEqual" secondItem="KKs-Gt-Kdd" secondAttribute="trailing" id="ZwM-wh-Yva"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="centerX" secondItem="HVg-nR-YS6" secondAttribute="centerX" id="gcp-tp-2tO"/>
                                    <constraint firstAttribute="bottom" relation="greaterThanOrEqual" secondItem="KKs-Gt-Kdd" secondAttribute="bottom" id="msf-lp-AEL"/>
                                    <constraint firstItem="KKs-Gt-Kdd" firstAttribute="leading" relation="greaterThanOrEqual" secondItem="HVg-nR-YS6" secondAttribute="leading" id="uSX-oQ-rlK"/>
                                </constraints>
                            </view>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="HVg-nR-YS6" firstAttribute="top" secondItem="ufs-Rs-T6p" secondAttribute="bottom" constant="8" id="0dx-30-jr7"/>
                            <constraint firstItem="tiR-WL-oTG" firstAttribute="trailing" secondItem="FKr-kC-VXc" secondAttribute="trailing" id="9Nc-oP-aij"/>
                            <constraint firstItem="HVg-nR-YS6" firstAttribute="leading" secondItem="ytj-cQ-xcw" secondAttribute="trailing" constant="8" id="JFX-0b-cV0"/>
                            <constraint firstItem="ytj-cQ-xcw" firstAttribute="leading" secondItem="tiR-WL-oTG" secondAttribute="leading" id="KdN-6J-uTP"/>
                            <constraint firstItem="FKr-kC-VXc" firstAttribute="centerY" secondItem="bPW-Lv-D8K" secondAttribute="centerY" id="TZl-s4-qtB"/>
                            <constraint firstItem="ufs-Rs-T6p" firstAttribute="top" secondItem="tiR-WL-oTG" secondAttribute="top" id="Xik-Uy-8Dc"/>
                            <constraint firstItem="Yjf-aU-73z" firstAttribute="top" secondItem="HVg-nR-YS6" secondAttribute="bottom" constant="8" id="dWC-mc-WBd"/>
                            <constraint firstItem="FKr-kC-VXc" firstAttribute="leading" secondItem="HVg-nR-YS6" secondAttribute="trailing" constant="8" id="hvb-za-mJZ"/>
                            <constraint firstItem="Yjf-aU-73z" firstAttribute="centerX" secondItem="bPW-Lv-D8K" secondAttribute="centerX" id="n15-uw-LKo"/>
                            <constraint firstItem="tiR-WL-oTG" firstAttribute="bottom" secondItem="Yjf-aU-73z" secondAttribute="bottom" id="uws-fV-jh6"/>
                            <constraint firstItem="ufs-Rs-T6p" firstAttribute="centerX" secondItem="bPW-Lv-D8K" secondAttribute="centerX" id="zNk-qR-tkB"/>
                            <constraint firstItem="ytj-cQ-xcw" firstAttribute="centerY" secondItem="bPW-Lv-D8K" secondAttribute="centerY" id="zje-ml-TE1"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="tiR-WL-oTG"/>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="DYV-sv-5ip" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-2338.4000000000001" y="234.33283358320841"/>
        </scene>
    </scenes>
</document>