iosuistackview
Xcode can't contain image in container
Beginner formatting question here. I'm trying to format the storyboard so that it can be shown when the screen has been rotated.
I've created a vertical stack and then 3 containers within the vertical stack. Then for each container, I've pinned the objects in the container to the centre for x and y axis. I've distributed each container equally within the stack view.
These constraints seem to work for everything except the image in the middle view. In particular, the image can't seem to stay in the container view.
Is there a way to make the image stay within the container, so that when the device rotates the storyboard is organised?
Solution
It's a little tough to tell because you haven't shown all your layout / constraints setup, but it looks like you may be missing only a Height constraint on your image view.
Take a look at this:
The Label and Button each have only CenterX and CenterY constraints to their superviews (the "Container" views).
The "baby" ImageView is also constrained CenterX and CenterY to its superview... but in addition, it has a 1:1 aspect ratio constraint, and its Height is constrained to its superview height.
When rotated, the image view will - of course - be smaller, but each container-subview will remain centered:
Here's the source to that Storyboard which you can load and inspect in detail:
<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="20037" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="Y6W-OH-hqX">
<device id="retina4_7" orientation="portrait" appearance="light"/>
<dependencies>
<deployment identifier="iOS"/>
<plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="20020"/>
<capability name="Safe area layout guides" minToolsVersion="9.0"/>
<capability name="System colors in document resources" minToolsVersion="11.0"/>
<capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
</dependencies>
<scenes>
<!--View Controller-->
<scene sceneID="s0d-6b-0kx">
<objects>
<viewController id="Y6W-OH-hqX" sceneMemberID="viewController">
<view key="view" contentMode="scaleToFill" id="5EZ-qb-Rvc">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
<subviews>
<stackView opaque="NO" contentMode="scaleToFill" axis="vertical" distribution="fillEqually" translatesAutoresizingMaskIntoConstraints="NO" id="7E3-zM-xdW">
<rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
<subviews>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="3vZ-b6-2PK" userLabel="TopContainerView">
<rect key="frame" x="0.0" y="0.0" width="375" height="222.5"/>
<subviews>
<label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="jhh-FE-Gc1">
<rect key="frame" x="145" y="89.5" width="85" height="43"/>
<color key="backgroundColor" red="1" green="1" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<fontDescription key="fontDescription" type="system" pointSize="36"/>
<nil key="textColor"/>
<nil key="highlightedColor"/>
</label>
</subviews>
<color key="backgroundColor" red="1" green="0.83279907422115529" blue="0.84725732769064332" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="jhh-FE-Gc1" firstAttribute="centerY" secondItem="3vZ-b6-2PK" secondAttribute="centerY" id="ZEr-dZ-CID"/>
<constraint firstItem="jhh-FE-Gc1" firstAttribute="centerX" secondItem="3vZ-b6-2PK" secondAttribute="centerX" id="Zq2-gb-ZZA"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="wcs-01-6sH" userLabel="MiddleContainerView">
<rect key="frame" x="0.0" y="222.5" width="375" height="222"/>
<subviews>
<imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" placeholderIntrinsicWidth="128" placeholderIntrinsicHeight="128" image="baby" translatesAutoresizingMaskIntoConstraints="NO" id="t9E-eg-46j" userLabel="babyImageView">
<rect key="frame" x="76.5" y="0.0" width="222" height="222"/>
<color key="backgroundColor" red="0.44372500819999999" green="0.93188083170000002" blue="0.56410874590000004" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstAttribute="width" secondItem="t9E-eg-46j" secondAttribute="height" multiplier="1:1" id="k4O-iU-k7p"/>
</constraints>
</imageView>
</subviews>
<color key="backgroundColor" red="0.89976056546453709" green="1" blue="0.86768957131626201" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="t9E-eg-46j" firstAttribute="height" secondItem="wcs-01-6sH" secondAttribute="height" id="UJc-15-bdP"/>
<constraint firstItem="t9E-eg-46j" firstAttribute="centerX" secondItem="wcs-01-6sH" secondAttribute="centerX" id="Ykm-c5-4mw"/>
<constraint firstItem="t9E-eg-46j" firstAttribute="centerY" secondItem="wcs-01-6sH" secondAttribute="centerY" id="jFT-oV-1Hy"/>
</constraints>
</view>
<view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="g6G-kE-uD0" userLabel="BottomContainerView">
<rect key="frame" x="0.0" y="444.5" width="375" height="222.5"/>
<subviews>
<button opaque="NO" contentMode="scaleToFill" contentHorizontalAlignment="center" contentVerticalAlignment="center" buttonType="system" lineBreakMode="middleTruncation" translatesAutoresizingMaskIntoConstraints="NO" id="jBP-kz-BTs">
<rect key="frame" x="154" y="96" width="67" height="31"/>
<state key="normal" title="Button"/>
<buttonConfiguration key="configuration" style="filled" title="Button"/>
</button>
</subviews>
<color key="backgroundColor" red="0.90000000000000002" green="0.90000000000000002" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
<constraints>
<constraint firstItem="jBP-kz-BTs" firstAttribute="centerX" secondItem="g6G-kE-uD0" secondAttribute="centerX" id="LbN-8f-BLO"/>
<constraint firstItem="jBP-kz-BTs" firstAttribute="centerY" secondItem="g6G-kE-uD0" secondAttribute="centerY" id="eGu-gP-ux2"/>
</constraints>
</view>
</subviews>
</stackView>
</subviews>
<viewLayoutGuide key="safeArea" id="vDu-zF-Fre"/>
<color key="backgroundColor" systemColor="systemBackgroundColor"/>
<constraints>
<constraint firstItem="vDu-zF-Fre" firstAttribute="bottom" secondItem="7E3-zM-xdW" secondAttribute="bottom" id="4Be-hf-twX"/>
<constraint firstItem="vDu-zF-Fre" firstAttribute="trailing" secondItem="7E3-zM-xdW" secondAttribute="trailing" id="l7N-Ec-1P6"/>
<constraint firstItem="7E3-zM-xdW" firstAttribute="leading" secondItem="vDu-zF-Fre" secondAttribute="leading" id="sgi-DX-6mB"/>
<constraint firstItem="7E3-zM-xdW" firstAttribute="top" secondItem="vDu-zF-Fre" secondAttribute="top" id="wkA-eM-bOI"/>
</constraints>
</view>
</viewController>
<placeholder placeholderIdentifier="IBFirstResponder" id="Ief-a0-LHa" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
</objects>
<point key="canvasLocation" x="71" y="96"/>
</scene>
</scenes>
<resources>
<image name="baby" width="1200" height="1200"/>
<systemColor name="systemBackgroundColor">
<color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
</systemColor>
</resources>
</document>