Can I make a scrollview on xcode 12 without specifying content height

Question

Okay, I'm a relatively new Swift developer and I just started learning scrollviews. All the tutorials I've seen always specify a particular height for the content view so as to activate the scrollview. Is there a way to make a scrollview without specifying the height. Checking it on bigger screens the content view is actually cut off the scrollview and that's not good UI design.

*Specifying content height* is very out-of-date. You should be using auto-layout constraints. Do some searching, and go through examples and tutorials that are not 5 years old. Here is just one example: https://stackoverflow.com/a/63890754/6257435 — DonMag, Sep 22 '20 at 12:21

score 3 · Accepted Answer · answered Sep 22 '20 at 18:24

Step-by-Step...

Add a view controller to your Storyboard
Add a scroll view to the view controller
Constrain it with 20-pts Top / Bottom / Leading / Trailing
Add two labels to the scroll view - position one near the top-left and the other near the bottom-right
Constrain the First label Top: 8 and Leading: 8 to the scroll view's Content Layout Guide
Constrain the Second label Bottom: 8 and Trailing: 8 to the scroll view's Content Layout Guide
Constrain the Second label Leading to the First label Trailing
Constrain the Second label Top to the First label Bottom
Change that constraint constant to a large number - such as 1200

If you've done it right, it should look something like this:

You cannot see the Bottom-Right-Label because it is 1200-pts below the top label (so, it's off the bottom of the view).

Run the app, and you will have a vertically scrolling view.

Here's the source to that Storyboard so you can inspect it directly:

<?xml version="1.0" encoding="UTF-8"?>
<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17156" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="uUy-L1-OnG">
    <device id="retina3_5" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17125"/>
        <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="Rrc-66-RYL">
            <objects>
                <viewController id="uUy-L1-OnG" sceneMemberID="viewController">
                    <view key="view" contentMode="scaleToFill" id="39G-hU-x3e">
                        <rect key="frame" x="0.0" y="0.0" width="320" height="480"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
                            <scrollView clipsSubviews="YES" multipleTouchEnabled="YES" contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="2QQ-od-V3W">
                                <rect key="frame" x="20" y="20" width="280" height="440"/>
                                <subviews>
                                    <label opaque="NO" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Bottom-Right Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="6dS-VR-QcN">
                                        <rect key="frame" x="131" y="1229" width="149" height="21"/>
                                        <color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <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" text="Top-Left Label" textAlignment="natural" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" adjustsFontSizeToFit="NO" translatesAutoresizingMaskIntoConstraints="NO" id="KrQ-5T-fSH">
                                        <rect key="frame" x="8" y="8" width="112" height="21"/>
                                        <color key="backgroundColor" red="0.99953407049999998" green="0.98835557699999999" blue="0.47265523669999998" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                        <fontDescription key="fontDescription" type="system" pointSize="17"/>
                                        <nil key="textColor"/>
                                        <nil key="highlightedColor"/>
                                    </label>
                                </subviews>
                                <color key="backgroundColor" red="0.46202266219999999" green="0.83828371759999998" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
                                <constraints>
                                    <constraint firstItem="j0p-3A-LQb" firstAttribute="bottom" secondItem="6dS-VR-QcN" secondAttribute="bottom" constant="8" id="1yq-cx-1GE"/>
                                    <constraint firstItem="6dS-VR-QcN" firstAttribute="top" secondItem="KrQ-5T-fSH" secondAttribute="bottom" constant="1200" id="BpQ-El-04G"/>
                                    <constraint firstItem="KrQ-5T-fSH" firstAttribute="top" secondItem="j0p-3A-LQb" secondAttribute="top" constant="8" id="JhA-o5-VKG"/>
                                    <constraint firstItem="KrQ-5T-fSH" firstAttribute="leading" secondItem="j0p-3A-LQb" secondAttribute="leading" constant="8" id="axd-l2-1aY"/>
                                    <constraint firstItem="6dS-VR-QcN" firstAttribute="trailing" secondItem="j0p-3A-LQb" secondAttribute="trailing" constant="8" id="han-0E-Nx6"/>
                                    <constraint firstItem="6dS-VR-QcN" firstAttribute="leading" secondItem="KrQ-5T-fSH" secondAttribute="trailing" constant="11" id="vB2-hP-NmI"/>
                                </constraints>
                                <viewLayoutGuide key="contentLayoutGuide" id="j0p-3A-LQb"/>
                                <viewLayoutGuide key="frameLayoutGuide" id="wx7-6c-6AG"/>
                            </scrollView>
                        </subviews>
                        <viewLayoutGuide key="safeArea" id="5O3-dC-9nE"/>
                        <color key="backgroundColor" systemColor="systemBackgroundColor"/>
                        <constraints>
                            <constraint firstItem="2QQ-od-V3W" firstAttribute="top" secondItem="5O3-dC-9nE" secondAttribute="top" constant="20" id="1P9-kk-0OW"/>
                            <constraint firstItem="2QQ-od-V3W" firstAttribute="leading" secondItem="5O3-dC-9nE" secondAttribute="leading" constant="20" id="Isk-wd-i1O"/>
                            <constraint firstItem="5O3-dC-9nE" firstAttribute="bottom" secondItem="2QQ-od-V3W" secondAttribute="bottom" constant="20" id="dhp-c0-XAb"/>
                            <constraint firstItem="5O3-dC-9nE" firstAttribute="trailing" secondItem="2QQ-od-V3W" secondAttribute="trailing" constant="20" id="eYJ-in-3Lv"/>
                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="iqc-7R-rKj" userLabel="First Responder" customClass="UIResponder" sceneMemberID="firstResponder"/>
            </objects>
            <point key="canvasLocation" x="-416.25" y="128.75"/>
        </scene>
    </scenes>
    <resources>
        <systemColor name="systemBackgroundColor">
            <color white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
        </systemColor>
    </resources>
</document>

Thanks mate . Really appreciate – Moses Chukwudi Nwigberi Sep 22 '20 at 21:42 — Moses Chukwudi Nwigberi, Sep 22 '20 at 21:42

Can I make a scrollview on xcode 12 without specifying content height

1 Answers1