Автоперекрывающие квадраты не выравниваются - PullRequest
Новая
       2

Автоперекрывающие квадраты не выравниваются

0 голосов
/ 28 января 2020

Я думал, что я получаю приличный в автоматическом макете, но я не могу найти решение для чего-то, что я считаю простым Я приложил фотографию, чтобы показать, что я имею в виду. Я просто хочу иметь 5 квадратов рядом друг с другом, а затем 5 одинаковых квадратов ниже всех, выровненных по центру основного вида на всех размерах устройства. Квадраты - все представления. Photo Example

1 Ответ

1 голос
/ 28 января 2020

Хорошо, я смог сделать это в IB, используя три вида стека:

Первый, вертикальный -> это X и Y по центру на главном виде с отступами в сторону (ведущие / конечные якоря с любым константа, которую вы хотите).

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

Высота, ограниченная по вертикали, равна первой горизонтали с множителем 2.2 ( это немного подстроено в зависимости от желаемого зазора).

Затем в каждую горизонталь добавьте 5 блоков и 6 прокладок. Последний разделитель не ограничен, остальные блоки ограничены 0.167 ширины горизонтального стека, а разделители - 0.027 (это мои предположения о том, что вы хотите).

Первый блок в стеке также имеет коэффициент отношения 1:1, чтобы сделать его квадратным.

Тогда вот пара взглядов:

iPad portrait

iPad landscape

iPhone portrait

Вот Xib: 

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="ipad10_5" orientation="portrait" layout="fullscreen" appearance="light"/>
    <dependencies>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner"/>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" id="iN0-l3-epB">
            <rect key="frame" x="0.0" y="0.0" width="834" height="1112"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="1aR-Cf-6gD">
                    <rect key="frame" x="10" y="406.5" width="814" height="299"/>
                    <subviews>
                        <stackView opaque="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="J92-jg-RpZ">
                            <rect key="frame" x="0.0" y="0.0" width="814" height="136"/>
                            <subviews>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="mUm-Ut-J1j" userLabel="Spacer">
                                    <rect key="frame" x="0.0" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ES1-vw-10G" userLabel="Box">
                                    <rect key="frame" x="22" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                    <constraints>
                                        <constraint firstAttribute="width" secondItem="ES1-vw-10G" secondAttribute="height" multiplier="1:1" id="UmD-ok-V8l"/>
                                    </constraints>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="wVm-sl-kEu" userLabel="Spacer">
                                    <rect key="frame" x="158" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="S2Q-2f-h3B" userLabel="Box">
                                    <rect key="frame" x="180" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="MY3-LW-Vbm" userLabel="Spacer">
                                    <rect key="frame" x="316" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="MjK-iO-LGo" userLabel="Box">
                                    <rect key="frame" x="338" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="3ao-sj-TQC" userLabel="Spacer">
                                    <rect key="frame" x="473.5" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rAY-lo-gyd" userLabel="Box">
                                    <rect key="frame" x="495.5" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rYl-hk-hbf" userLabel="Spacer">
                                    <rect key="frame" x="631.5" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="VZD-xC-lnV" userLabel="Box">
                                    <rect key="frame" x="653.5" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="rff-I0-bZu" userLabel="Spacer">
                                    <rect key="frame" x="789.5" y="0.0" width="24.5" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                            </subviews>
                            <constraints>
                                <constraint firstItem="MjK-iO-LGo" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.167" id="9gu-OS-k9n"/>
                                <constraint firstItem="MY3-LW-Vbm" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.027" id="BeB-DS-as1"/>
                                <constraint firstItem="wVm-sl-kEu" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.027" id="Dme-Qc-dAN"/>
                                <constraint firstItem="ES1-vw-10G" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.167" id="GUX-WL-pDX"/>
                                <constraint firstItem="rAY-lo-gyd" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.167" id="Jdz-4v-c3a"/>
                                <constraint firstItem="mUm-Ut-J1j" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.027" id="NUG-9e-R91"/>
                                <constraint firstItem="rYl-hk-hbf" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.027" id="T6F-Pi-gtZ"/>
                                <constraint firstItem="3ao-sj-TQC" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.027" id="d8l-vy-8Rf"/>
                                <constraint firstItem="S2Q-2f-h3B" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.167" id="fik-Is-MJN"/>
                                <constraint firstItem="VZD-xC-lnV" firstAttribute="width" secondItem="J92-jg-RpZ" secondAttribute="width" multiplier="0.167" id="q1U-1P-1oc"/>
                            </constraints>
                        </stackView>
                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="sQZ-Jk-hc5">
                            <rect key="frame" x="0.0" y="136" width="814" height="27"/>
                            <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                        </view>
                        <stackView opaque="NO" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="SAF-mT-Z1u">
                            <rect key="frame" x="0.0" y="163" width="814" height="136"/>
                            <subviews>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="nBV-hH-EER" userLabel="Spacer">
                                    <rect key="frame" x="0.0" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ucT-Xe-7UO" userLabel="Box">
                                    <rect key="frame" x="22" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                    <constraints>
                                        <constraint firstAttribute="width" secondItem="ucT-Xe-7UO" secondAttribute="height" multiplier="1:1" id="hrl-W5-Lj4"/>
                                    </constraints>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="cNs-Sm-0TF" userLabel="Spacer">
                                    <rect key="frame" x="158" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="vGF-xl-aFc" userLabel="Box">
                                    <rect key="frame" x="180" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="eGI-hH-wbh" userLabel="Spacer">
                                    <rect key="frame" x="316" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="xde-PV-hfM" userLabel="Box">
                                    <rect key="frame" x="338" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="6Gq-4F-Bai" userLabel="Spacer">
                                    <rect key="frame" x="473.5" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="EDY-TA-337" userLabel="Box">
                                    <rect key="frame" x="495.5" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="uFI-yw-K38" userLabel="Spacer">
                                    <rect key="frame" x="631.5" y="0.0" width="22" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="G0G-o2-bV9" userLabel="Box">
                                    <rect key="frame" x="653.5" y="0.0" width="136" height="136"/>
                                    <color key="backgroundColor" systemColor="linkColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                </view>
                                <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="H5z-DW-J1O" userLabel="Spacer">
                                    <rect key="frame" x="789.5" y="0.0" width="24.5" height="136"/>
                                    <color key="backgroundColor" systemColor="systemBackgroundColor" cocoaTouchSystemColor="whiteColor"/>
                                </view>
                            </subviews>
                            <constraints>
                                <constraint firstItem="cNs-Sm-0TF" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.027" id="8LE-gU-ecs"/>
                                <constraint firstItem="nBV-hH-EER" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.027" id="LTf-fi-mqD"/>
                                <constraint firstItem="vGF-xl-aFc" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.167" id="NxE-9D-OZO"/>
                                <constraint firstItem="uFI-yw-K38" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.027" id="Sxx-df-k8O"/>
                                <constraint firstItem="xde-PV-hfM" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.167" id="a0N-hE-Y5E"/>
                                <constraint firstItem="eGI-hH-wbh" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.027" id="djr-ik-dga"/>
                                <constraint firstItem="6Gq-4F-Bai" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.027" id="fcK-Xx-eMA"/>
                                <constraint firstItem="EDY-TA-337" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.167" id="g7z-4o-DLG"/>
                                <constraint firstItem="G0G-o2-bV9" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.167" id="jnK-Ke-VYA"/>
                                <constraint firstItem="ucT-Xe-7UO" firstAttribute="width" secondItem="SAF-mT-Z1u" secondAttribute="width" multiplier="0.167" id="pXl-tW-U29"/>
                            </constraints>
                        </stackView>
                    </subviews>
                    <constraints>
                        <constraint firstAttribute="height" secondItem="J92-jg-RpZ" secondAttribute="height" multiplier="2.2" id="6ES-KQ-RIs"/>
                    </constraints>
                </stackView>
            </subviews>
            <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
            <constraints>
                <constraint firstItem="1aR-Cf-6gD" firstAttribute="centerY" secondItem="iN0-l3-epB" secondAttribute="centerY" id="1AL-XB-nV8"/>
                <constraint firstItem="1aR-Cf-6gD" firstAttribute="centerX" secondItem="iN0-l3-epB" secondAttribute="centerX" id="Ngt-kE-dES"/>
                <constraint firstItem="vUN-kp-3ea" firstAttribute="trailing" secondItem="1aR-Cf-6gD" secondAttribute="trailing" constant="10" id="rxp-yv-mfe"/>
                <constraint firstItem="1aR-Cf-6gD" firstAttribute="leading" secondItem="vUN-kp-3ea" secondAttribute="leading" constant="10" id="s8x-uC-qaC"/>
            </constraints>
            <viewLayoutGuide key="safeArea" id="vUN-kp-3ea"/>
            <point key="canvasLocation" x="137.68115942028987" y="153.34821428571428"/>
        </view>
    </objects>
</document>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...