Need constraints for Y position or height, but height is determined by labels

Question

I have a custom view with nested stack views and labels, I believe I have enough constraints to not cause an error, however, I suspect the interface builder might be losing the label defining the height some how. Regardless, it is breaking constraints according to interface builder.

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
    <device id="retina6_1" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
        <capability name="System colors in document resources" minToolsVersion="11.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <objects>
        <placeholder placeholderIdentifier="IBFilesOwner" id="-1" userLabel="File's Owner" customClass="CollectionsWidgetViewController" customModule="ALPaymentsPlugin">
            <connections>
                <outlet property="view" destination="Krl-KG-aoU" id="9m9-Vt-aGB"/>
            </connections>
        </placeholder>
        <placeholder placeholderIdentifier="IBFirstResponder" id="-2" customClass="UIResponder"/>
        <view contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" id="Krl-KG-aoU">
            <rect key="frame" x="0.0" y="0.0" width="420" height="216"/>
            <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
            <subviews>
                <stackView opaque="NO" contentMode="scaleToFill" insetsLayoutMarginsFromSafeArea="NO" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="HoY-1F-4en">
                    <rect key="frame" x="5" y="5" width="410" height="206"/>
                    <subviews>
                        <stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="2S6-Pe-jtt">
                            <rect key="frame" x="0.0" y="0.0" width="410" height="185.5"/>
                            <subviews>
                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" insetsLayoutMarginsFromSafeArea="NO" text="Due date" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="gPa-q7-8K6">
                                    <rect key="frame" x="0.0" y="0.0" width="205" height="185.5"/>
                                    <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" ambiguous="YES" insetsLayoutMarginsFromSafeArea="NO" text="July 8, 2022" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="jmM-tz-kES">
                                    <rect key="frame" x="205" y="0.0" width="205" height="185.5"/>
                                    <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                    <nil key="textColor"/>
                                    <nil key="highlightedColor"/>
                                </label>
                            </subviews>
                            <constraints>
                                <constraint firstItem="gPa-q7-8K6" firstAttribute="width" secondItem="2S6-Pe-jtt" secondAttribute="width" multiplier="0.5" id="xvG-iK-6qr"/>
                            </constraints>
                        </stackView>
                        <stackView opaque="NO" contentMode="scaleToFill" ambiguous="YES" insetsLayoutMarginsFromSafeArea="NO" translatesAutoresizingMaskIntoConstraints="NO" id="YxA-kd-JzN">
                            <rect key="frame" x="0.0" y="185.5" width="410" height="20.5"/>
                            <subviews>
                                <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" ambiguous="YES" insetsLayoutMarginsFromSafeArea="NO" text="Due date" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="fJK-U9-2XS">
                                    <rect key="frame" x="0.0" y="0.0" width="205" height="20.5"/>
                                    <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" ambiguous="YES" insetsLayoutMarginsFromSafeArea="NO" text="July 8, 2022" textAlignment="right" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="C1M-ND-vuD">
                                    <rect key="frame" x="205" y="0.0" width="205" height="20.5"/>
                                    <fontDescription key="fontDescription" type="boldSystem" pointSize="17"/>
                                    <nil key="textColor"/>
                                    <nil key="highlightedColor"/>
                                </label>
                            </subviews>
                            <constraints>
                                <constraint firstItem="fJK-U9-2XS" firstAttribute="width" secondItem="YxA-kd-JzN" secondAttribute="width" multiplier="0.5" id="WwH-N7-QUe"/>
                            </constraints>
                        </stackView>
                    </subviews>
                </stackView>
            </subviews>
            <color key="backgroundColor" systemColor="systemTealColor"/>
            <constraints>
                <constraint firstItem="HoY-1F-4en" firstAttribute="top" secondItem="Krl-KG-aoU" secondAttribute="top" constant="5" id="ROX-Cc-nCz"/>
                <constraint firstAttribute="trailing" secondItem="HoY-1F-4en" secondAttribute="trailing" constant="5" id="uXH-Y9-O6f"/>
                <constraint firstItem="HoY-1F-4en" firstAttribute="leading" secondItem="Krl-KG-aoU" secondAttribute="leading" constant="5" id="uy9-dC-D1X"/>
                <constraint firstAttribute="bottom" secondItem="HoY-1F-4en" secondAttribute="bottom" constant="5" id="wTb-GO-ZEb"/>
            </constraints>
            <nil key="simulatedTopBarMetrics"/>
            <nil key="simulatedBottomBarMetrics"/>
            <freeformSimulatedSizeMetrics key="simulatedDestinationMetrics"/>
            <point key="canvasLocation" x="149.27536231884059" y="145.98214285714286"/>
        </view>
    </objects>
    <resources>
        <systemColor name="systemTealColor">
            <color red="0.18823529411764706" green="0.69019607843137254" blue="0.7803921568627451" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
        </systemColor>
    </resources>
</document>

I expected not to get errors, however, I tried running the app and the view appeared as I was hoping/expecting, but I am getting an error in interface builder.

Answer 1

When designing UI with Xcode Storyboard / Interface builder, you need to provide information as complete as possible.

When there are ambiguities, Xcode does its best to guess at what you will eventually do with those views... but it can't know what you will do, so it tries to provide helpful notes on what information is missing.

During development (particularly when you're just starting out) it can be very helpful to give your UI elements contrasting background colors to make it easy to see what's what.

Here's your view, with colors:

That is probably not what you are expecting. Interface Builder shows an Error, because it doesn't know exactly how you want the labels to be laid out.

Depending on how you implement this view at run-time, it may be sizing just how you want... or, it may be sizing the way you want it to at the moment -- but then suddenly look wrong when other elements are added around it.

Couple ways to get rid of the Interface Error (warning)...

1. Set an explicit height for the vertical stack view - almost certainly not what you want to do though... you probably want the labels to determine the height.

2. Adjust the labels Content Hugging Priority... for example, if you give the bottom "July" label a Hugging priority of 252 (the default on all of them is 251 ), interface builder will be satisfied.

3. A better option might be to set the Distribution of the vertical stack view to Fill Equally - it will look like this in IB:

Now we've satisfied IB so it no longer shows an error, and the layout at design time is more representative of how it will look at run time .

Of course, like IB, I am also guessing at your layout goal...