swiftautolayout
Autolayout squares not aligning
I thought I was getting decent at auto layout but I can not find a solution for something I feel should be simple. I attached a photo to show what I mean. I simply want to have 5 squares next to each other and then 5 identical squares below all aligned in the center of the main view on all device sizes. The squares are all views.
Solution
Okay, i was able to do it in IB using three stack views:
First, vertical -> this is X and Y centered in main view with paddings to the side (leading/trailing anchors with whatever constant you want).
Then, i add two horizontal stacks inside with a non constrained spacer in between.
The height constrainted of vertical is equal to the first horizontal with 2.2 multiplier (this is a bit tweaky depending on the gap you want).
Then, into each horizontal you add 5 boxes and 6 spacers.
Last spacer is unconstrained, the rest of boxes is constrained as 0.167 of width of horizontal stack and spacers as 0.027 (these are my guesstimates of what you want).
The first box in the stack also has a ratio constraint of 1:1 to make it a square.
Then here's a couple of looks:
Here's the 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>
- Gesture prevents list swipe action
- Xcode 11 archive gives PhaseScriptExecution failed
- Find longest string in an array
- How to enable horizontal scroll of UICollection View that is within a UITableViewCell?
- How to set cornerRadius on a imageview inside a table view cell
- How do I invert the normal of a sphere in SceneKit?
- `NSDecimalString` crashes Xcode 16
- How to convert UIColor to SwiftUI‘s Color
- SwiftUI shrink view on dragging edges
- Xcode error Alamofire.framework: No such file or directory
- Is 'allowFileAccessFromFileURls' still available on iOS WebKit?
- Enable selecting text without user interaction enabled
- Is there a way to use Swift 6 without SWIFT_STRICT_CONCURRENCY=COMPLETE?
- SensorKit - Fetching data don't call results delegate function
- Does Swift allow passing argument based on control flow like if else?
- How to Apply subscriptionStatusTask to TabView in SwiftUI
- How to create spacing between items in a SwiftUI List view?
- Observe window resize event with SwiftUI
- Async let - fire-and-forget
- Xcode 15 build error: Assertion failed: (fixups().size() == 2), function initFixup, file Atom.cpp
- How does a Swift parameter pack solve the stated motivational problem?
- How to let SwiftUI View know that ViewModel's computed property has changed?
- How to blur an existing image in a UIImageView with Swift?
- SwiftUI Preview macro not working with Observation
- The compiler is unable to type-check this expression Swift 4?
- How do I fix my chart data being displayed when using HealthKit?
- How to add custom Markup to the MarkupVisitor in Swift-Markdown?
- Parsing CSV file in Swift
- How to benchmark Swift code execution?
- In Swift 5, how do I increment a date property by some interval and then run the function with that new future date?