自动布局正方形未对齐

问题描述 投票：0回答：1

我以为我在自动布局方面正变得不错，但是我找不到简单的解决方案。我附上一张照片，以表达我的意思。我只是想在所有设备尺寸的主视图中心对齐五个相邻的正方形，然后在所有下面五个相同的正方形。正方形都是视图。Photo Example

swift autolayout
1个回答
0
投票

好，我能够使用三个堆栈视图在IB中做到这一点：

[首先，垂直->这是X和Y在主视图中居中，侧面带有填充物（具有所需常量的前导/尾随锚）。

然后，我在内部添加了两个水平堆栈，中间有一个不受限制的间隔。

垂直的约束高度等于使用2.2乘数的第一个水平（这取决于您想要的间隙，有些微调整）。

然后，在每个水平框中添加5个框和6个间隔。最后一个分隔符不受限制，其余的框被约束为水平堆栈宽度的0.167，而分隔符被约束为0.027（这些是我对所需内容的猜测）。

堆栈中的第一个框还具有1:1的比率约束以使其成为正方形。

然后是几个样子：

iPad portrait

iPad landscape

iPhone portrait

这里是锡伯族：

<?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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.