1

I'm having the following layout:

enter image description here

I want the Stack View to fill the entire screen. I want the green View to behave like a space between the above rows and the bottom view. The green row should have a minimum height (like 20 points) and it should adjust it's own height depending on the device's height in order to fill the entire screen. If the device is having a smaller height, then the layout should be scrollable (I'm using Scroll View).

Note: The circle in the bottom represent the "empty space" left because the layout isn't filled entirely (actually it's the content View's background color). The content View shouldn't be visible.

The "menu stack view" is having the following properties:

enter image description here enter image description here

Zbarcea Christian
  • 9,367
  • 22
  • 84
  • 137

1 Answers1

1
  • Green View should have a Height constraint of >= 20
  • StackView should have a Width constraint Equal to ScrollView's Width
  • StackView should have a Height constraint Equal to ScrollView's Height, with Priority: 750
  • StackView should be constrained on all 4 sides to the ScrollView

That should do it!

EDIT:

Just saw you have a UIView holding the StackView...

You don't really need that, so you can either:

Remove that view, and let the StackView be the "root" view of the scroll view, or

  • Green View should have a Height constraint of >= 20
  • StackView should be constrained on all 4 sides to the UIView
  • UIView should have a Width constraint Equal to ScrollView's Width
  • UIView should have a Height constraint Equal to ScrollView's Height, with Priority: 750

EDIT 2:

If you saw this answer with Priority: 250 on the contentView / StackView Height constraint, it works, but doesn't always update right away in IB / Storyboard (when changing "View As: device). Setting it to 750 also works at run-time, and does a better job of maintaining the layout in Storyboard.

Here is an example Storyboard. It has two view "matching" controllers - one with a "content view" and one without:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="14490.70" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="lQ9-cT-kGJ">
    <device id="retina6_1" orientation="portrait">
        <adaptation id="fullscreen"/>
    </device>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="14490.49"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
    <scenes>
        <!--Without Content View-->
        <scene sceneID="fpf-XB-SxY">
            <objects>
                <viewController id="lQ9-cT-kGJ" userLabel="Without Content View" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="fIT-Xh-wDY">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="V9k-Oj-b66">
                                <rect key="frame" x="0.0" y="44" width="414" height="818"/>
                                <subviews>
                                    <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="Iia-IH-hjS">
                                        <rect key="frame" x="0.0" y="0.0" width="414" height="818"/>
                                        <subviews>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="KHw-zC-OPn">
                                                <rect key="frame" x="0.0" y="0.0" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.99806135890000003" green="0.96808904409999996" blue="0.12760734560000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="bv0-aW-7AU"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="uGD-v3-lUW">
                                                <rect key="frame" x="0.0" y="150" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.9981210828" green="0.7443595529" blue="0.3907994628" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="E1D-ib-QRx"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Mje-14-Tbd">
                                                <rect key="frame" x="0.0" y="300" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.99805814029999995" green="0.40440851449999998" blue="0.31141346689999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="fMn-Hk-F5G"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="D49-Gt-N8s">
                                                <rect key="frame" x="0.0" y="450" width="414" height="150"/>
                                                <color key="backgroundColor" red="0.99912148710000004" green="0.17214331029999999" blue="0.38572910430000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="150" id="5BE-5m-P8B"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="O9M-qj-KPE">
                                                <rect key="frame" x="0.0" y="600" width="414" height="178"/>
                                                <color key="backgroundColor" red="0.33141675590000003" green="0.98072248699999998" blue="0.40079861880000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="20" id="giA-Vz-78H"/>
                                                </constraints>
                                            </view>
                                            <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Lhc-kd-s85">
                                                <rect key="frame" x="0.0" y="778" width="414" height="40"/>
                                                <color key="backgroundColor" red="1" green="0.2503993511" blue="0.97168940309999996" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                <constraints>
                                                    <constraint firstAttribute="height" constant="40" id="G0c-fN-TP7"/>
                                                </constraints>
                                            </view>
                                        </subviews>
                                    </stackView>
                                </subviews>
                                <color key="backgroundColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="width" secondItem="V9k-Oj-b66" secondAttribute="width" id="36y-ht-1ZL"/>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="height" secondItem="V9k-Oj-b66" secondAttribute="height" priority="750" id="BAJ-IB-R4g"/>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="top" secondItem="V9k-Oj-b66" secondAttribute="top" id="QHY-7z-ekV"/>
                                    <constraint firstItem="Iia-IH-hjS" firstAttribute="leading" secondItem="V9k-Oj-b66" secondAttribute="leading" id="cKH-2e-Ovg"/>
                                    <constraint firstAttribute="bottom" secondItem="Iia-IH-hjS" secondAttribute="bottom" id="cye-Ww-qAH"/>
                                    <constraint firstAttribute="trailing" secondItem="Iia-IH-hjS" secondAttribute="trailing" id="udZ-yd-vnu"/>
                                </constraints>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="sd1-79-0ea" firstAttribute="trailing" secondItem="V9k-Oj-b66" secondAttribute="trailing" id="WGi-oU-rbN"/>
                            <constraint firstItem="sd1-79-0ea" firstAttribute="bottom" secondItem="V9k-Oj-b66" secondAttribute="bottom" id="fnq-aB-tb0"/>
                            <constraint firstItem="V9k-Oj-b66" firstAttribute="leading" secondItem="sd1-79-0ea" secondAttribute="leading" id="g91-1x-kaM"/>
                            <constraint firstItem="V9k-Oj-b66" firstAttribute="top" secondItem="sd1-79-0ea" secondAttribute="top" id="reB-s3-Un5"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="sd1-79-0ea"/>
                    </view>
                    <navigationItem key="navigationItem" id="1y7-cc-tli"/>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="2g2-ck-IEI" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="2565" y="163"/>
        </scene>
        <!--With Content View-->
        <scene sceneID="vq1-pI-V6t">
            <objects>
                <viewController id="lR1-JQ-SAe" userLabel="With Content View" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="rsN-vT-52r">
                        <rect key="frame" x="0.0" y="0.0" width="414" height="896"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="8Lg-op-1W1">
                                <rect key="frame" x="0.0" y="44" width="414" height="818"/>
                                <subviews>
                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="ygo-gK-BzW" userLabel="ContentView">
                                        <rect key="frame" x="0.0" y="0.0" width="414" height="818"/>
                                        <subviews>
                                            <stackView opaque="NO" contentMode="scaleToFill" axis="vertical" translatesAutoresizingMaskIntoConstraints="NO" id="eZ0-N0-ecD">
                                                <rect key="frame" x="0.0" y="0.0" width="414" height="818"/>
                                                <subviews>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Fta-Vk-7rB">
                                                        <rect key="frame" x="0.0" y="0.0" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.99806135890000003" green="0.96808904409999996" blue="0.12760734560000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="qG6-fb-qL0"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="NQ2-Wg-vx6">
                                                        <rect key="frame" x="0.0" y="150" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.9981210828" green="0.7443595529" blue="0.3907994628" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="gYm-9M-VUm"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Y11-gj-s20">
                                                        <rect key="frame" x="0.0" y="300" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.99805814029999995" green="0.40440851449999998" blue="0.31141346689999999" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="qvn-Nt-dCb"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="8iH-mi-wRX">
                                                        <rect key="frame" x="0.0" y="450" width="414" height="150"/>
                                                        <color key="backgroundColor" red="0.99912148710000004" green="0.17214331029999999" blue="0.38572910430000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="150" id="ZF1-YH-sre"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="983-cl-csE">
                                                        <rect key="frame" x="0.0" y="600" width="414" height="178"/>
                                                        <color key="backgroundColor" red="0.33141675590000003" green="0.98072248699999998" blue="0.40079861880000001" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" relation="greaterThanOrEqual" constant="20" id="LrL-s0-6aa"/>
                                                        </constraints>
                                                    </view>
                                                    <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="Awz-rO-vcs">
                                                        <rect key="frame" x="0.0" y="778" width="414" height="40"/>
                                                        <color key="backgroundColor" red="1" green="0.2503993511" blue="0.97168940309999996" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                                        <constraints>
                                                            <constraint firstAttribute="height" constant="40" id="lCa-X5-V4P"/>
                                                        </constraints>
                                                    </view>
                                                </subviews>
                                            </stackView>
                                        </subviews>
                                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                        <constraints>
                                            <constraint firstAttribute="bottom" secondItem="eZ0-N0-ecD" secondAttribute="bottom" id="Mqb-fG-5zQ"/>
                                            <constraint firstAttribute="trailing" secondItem="eZ0-N0-ecD" secondAttribute="trailing" id="RBn-5m-9po"/>
                                            <constraint firstItem="eZ0-N0-ecD" firstAttribute="leading" secondItem="ygo-gK-BzW" secondAttribute="leading" id="dpF-aq-8uV"/>
                                            <constraint firstItem="eZ0-N0-ecD" firstAttribute="top" secondItem="ygo-gK-BzW" secondAttribute="top" id="uye-i9-kBk"/>
                                        </constraints>
                                    </view>
                                </subviews>
                                <color key="backgroundColor" red="0.0" green="0.47843137250000001" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="height" secondItem="8Lg-op-1W1" secondAttribute="height" priority="750" id="34X-Z2-gJg"/>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="top" secondItem="8Lg-op-1W1" secondAttribute="top" id="34X-Z4-WAK"/>
                                    <constraint firstAttribute="bottom" secondItem="ygo-gK-BzW" secondAttribute="bottom" id="Me7-yt-8gX"/>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="width" secondItem="8Lg-op-1W1" secondAttribute="width" id="XFS-SE-QbM"/>
                                    <constraint firstItem="ygo-gK-BzW" firstAttribute="leading" secondItem="8Lg-op-1W1" secondAttribute="leading" id="mqg-gZ-hEy"/>
                                    <constraint firstAttribute="trailing" secondItem="ygo-gK-BzW" secondAttribute="trailing" id="us5-aT-tnP"/>
                                </constraints>
                            </scrollView>
                        </subviews>
                        <color key="backgroundColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                        <constraints>
                            <constraint firstItem="8Lg-op-1W1" firstAttribute="top" secondItem="N1d-br-dMg" secondAttribute="top" id="NHA-1q-iN5"/>
                            <constraint firstItem="N1d-br-dMg" firstAttribute="trailing" secondItem="8Lg-op-1W1" secondAttribute="trailing" id="TGg-ig-3O1"/>
                            <constraint firstItem="N1d-br-dMg" firstAttribute="bottom" secondItem="8Lg-op-1W1" secondAttribute="bottom" id="da0-Ux-sH0"/>
                            <constraint firstItem="8Lg-op-1W1" firstAttribute="leading" secondItem="N1d-br-dMg" secondAttribute="leading" id="e0A-Yr-Bnq"/>
                        </constraints>
                        <viewLayoutGuide key="safeArea" id="N1d-br-dMg"/>
                    </view>
                    <navigationItem key="navigationItem" id="ZJ5-xB-PxK"/>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="ssf-O0-6hP" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="3361" y="163"/>
        </scene>
    </scenes>
</document>
DonMag
  • 69,424
  • 5
  • 50
  • 86
  • I copy pasted your code and it worked. This is just incredible! I'm trying to fix this issue for more than 3 and a half days and you did it in less than 30 minutes. Anyways, back on topic: I see that you applied the `>= 20` is this the "trick" that should solve my problem? Did you changed or modified the hugging priorities or any other data? – Zbarcea Christian Jul 16 '19 at 20:22
  • 1
    No changes to hugging / compression / etc. Probably the only significant change was the `>= 20` and the `Priority: 750` for the "content view" height constraint. – DonMag Jul 16 '19 at 20:56